Adapt_framework: Unable to continue navigating after closing page level progress drawer

[eleanor-heath]

Subject of the issue/enhancement/features

When exiting out of the drawer, I am unable to continue navigating down the page.

Your environment

• Windows + NVDA screen reader (latest version) + Chrome

Steps to reproduce

• Create a course
• Add a page
• Add multiple components to the page
• Add page level progress extension
• Save and Preview
• Enable screen reader
• Use down arrow to move to the page level progress drawer
• Press enter to open it
• Use down arrow to move through the page level progress drawer
• Once you reach the close button press enter

Expected behaviour

Drawer closes and focus is given to the page level progress drawer and user can press down to continue navigating

Actual behaviour

Drawer closes but user is unable to continue navigating down the page

[moloko]

Please could you specify versions of:

• Framework
• Browser
• NVDA

[moloko]

It does sound very similar to #3022 so please could you confirm you are using FW v5.10.1

[eleanor-heath]

We are on FW v5.7, could be that once we upgrade this issue will be resolved. I am going to relay this to the team.

[oliverfoster]

It may also be a bug with the current version of chrome (88) and nvda. Try the beta version of chrome (89, to be released March 2nd) if the aforementioned fix doesn't work.

[eleanor-heath]

This issue on Chrome seems to be caused by the media component. To replicate add a few components e.g. text and graphic component, then add a media component below with a youtube link. Navigate through the items on the page using NVDA screen reader and press enter when the screenreader gets to the page level progress button. Navigate through all items until you get to the close button and click enter. You will not be able to navigate the page using the up and down arrows and the screen reader will read out "blank".

[oliverfoster]

This issue on IE11

The issue is for chrome?

[...] then add a media component below with a youtube link

Is the video from youtube? How are you adding the youtube link?

Please could you specify versions of:

• Framework
• Browser
• NVDA

Which version of nvda are you using? .4? And which framework?

[eleanor-heath]

yes it is for Chrome, I just updated my comment. I am using NVDA version 2020.4

[eleanor-heath]

framework version 5.7, but this has also been tested against the latest framework and same issue is occurring.

[eleanor-heath]

Is the video from youtube? How are you adding the youtube link?

I added an external source URL with the type video/youtube

[oliverfoster]

Please read through this bug https://github.com/adaptlearning/adapt_framework/issues/3042#issuecomment-785019313

This was changed which you can see here is broken in 5.7, can you test with that fix?

Effectively plp can't set focus on non-natively-focusable elements without that, there's no point trying to isolate any a11y bug without that fix.

[eleanor-heath]

Please read through this bug #3042 (comment)

This was changed which you can see here is broken in 5.7, can you test with that fix?

Effectively plp can't set focus on non-natively-focusable elements without that, there's no point trying to isolate any a11y bug without that fix.

Ok, I will test my course with this fix and will get back to you.

[oliverfoster]

Which version of chrome are you using?

[eleanor-heath]

Which version of chrome are you using?

Version 88.0.4324.182 (Official Build) (x86_64)

[oliverfoster]

https://github.com/adaptlearning/adapt_framework/issues/3042#issuecomment-785022585 : It's an issue with Chrome and NVDA then. Use the beta version (89) of chrome, it'll be released on the 2th March (today).

NVDA can't see that the DOM has updated because Chrome 88 doesn't tell it. So the up and down arrows are attempting to read the body as though it is under the notify still. You can see this if you just toggle aria-hidden="true" on the body in the debugger. There is no elegant or reasonable way to fix this except with a browser update. Attempting to cause the browser and screen reader to become re-synchronised is a sisyphean task.

[eleanor-heath]

I tested my course with that fix and on the beta version of Chrome and the issue is still occurring on my course. The issue no longer occurs when I delete the media component from the course.

Please read through this bug #3042 (comment)
This was changed which you can see here is broken in 5.7, can you test with that fix?
Effectively plp can't set focus on non-natively-focusable elements without that, there's no point trying to isolate any a11y bug without that fix.

Ok, I will test my course with this fix and will get back to you.

[eleanor-heath]

The newest version of Chrome along with your fix does seem to fix an issue in which I was being scrolled to the top of the page when clicking the up/down arrows after selecting an item in the PLP drawer.

[oliverfoster]

Can I have a zip of the src/ grunt/ and /. root files to test here?

Is the issue fixed or not fixed or are there more than one issues?

The newest version of Chrome along with your fix does seem to fix an issue in which I was being scrolled to the top of the page when clicking the up/down arrows after selecting an item in the PLP drawer.

This is because the plp is able to assign focus to the heading and not the page body. It's because of the fix to the focus function not the browser update.

I added an external source URL with the type video/youtube

So the up and down arrows coming back from the plp only stops working with a media component and only when playing a youtube video? And this happens with the fix and with the beta chrome?

Have you tried the adapt-youtube component? Have you tried the media component with a local mp4?

[eleanor-heath]

Can I have a zip of the src/ grunt/ and /_._ root files to test here?
PLP-focus-issue.zip

Is the issue fixed or not fixed or are there more than one issues?

There is more than one issue, I was going to raise the issue separately but it seems to be working fine when I delete the media component and use your fix along with the latest Chrome browser update.

The newest version of Chrome along with your fix does seem to fix an issue in which I was being scrolled to the top of the page when clicking the up/down arrows after selecting an item in the PLP drawer.

This is because the plp is able to assign focus to the heading and not the page body. It's because of the fix to the focus function not the browser update.

It jumped up to the top of the page when I tested it on Chrome 88.

So the up and down arrows coming back from the plp only stops working with a media component when playing a youtube video? Have you tried the adapt-youtube component?

No, I can give this a go.

[eleanor-heath]

@oliverfoster let me know if you need anything else! Really appreciate your help here

[oliverfoster]

It jumped up to the top of the page when I tested it on Chrome 88.

That'll be the screen reader cursor on the navigation bar then... Cool.

[moloko]

So the up and down arrows coming back from the plp only stops working with a media component when playing a youtube video? Have you tried the adapt-youtube component?

No, I can give this a go.

As is mentioned here we really recommend using the adapt-youtube component for playing YT videos. The YouTube/Vimeo support in the media component is likely to be buggy and there's very little we can do about that as it's all in the underlying mediaelementjs code - which at some point we're going to stop using anyway.

[eleanor-heath]

I tried replacing the media component with the youtube component but the issue still occurred unfortunately! Not too sure what else I can try at this point

[eleanor-heath]

@oliverfoster This issue has now been resolved with the release of f/w 5.13.0.

Closing the progress bar allows you to continue navigating and when selecting a component from PLP it takes you to it correctly and provides focus on the component.