Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Force body focus (fixes #626) #627

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix: Force body focus (fixes #626) #627

wants to merge 1 commit into from

Conversation

oliverfoster
Copy link
Member

@oliverfoster oliverfoster commented Feb 13, 2025

fixes #626

When the router tries to focus on the document.body here:

a11y.focusFirst(document.body);

This pr forces the focus to the body element rather than trying to find the first focusable element - which had previously been the skip navigation button.

The outcome is that the body has focus making the window scrollable with the up/down arrows and then the first tab takes the learner to the skip navigation button, as before.

Fix

  • a11y.focusFirst(document.body) forces focus to body rather than first focusable element

@oliverfoster oliverfoster self-assigned this Feb 13, 2025
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👀

Copy link
Contributor

@kirsty-hames kirsty-hames left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @oliverfoster. When using keyboard navigation only (no screen reader), this works as expected testing with Chrome, FF and Safari.

Running voiceOver in Chrome works as expected but not for Safari. The following issue is specific to using voiceOver keyboard controls control + option + arrow keys to navigate:

  • On the menu, navigate to a menu item and select 'view' button.
  • The page loads but focus remains on the menu item 'view' button.
  • Using the same keyboard controls to navigate, the menu elements remain in focus (e.g. list item, menu item title, progress etc) even though you're on a page. See screenshots below.
  • Only when using the tab key does the current page receive focus.

Expected behaviour seen in Chrome with voiceOver. On page load, the first body element receives focus (back button):
chrome

Unexpected behaviour seen in Safari with voiceOver. On page load, focus remain on the menu item 'view' button:
safari

Tested running Safari Version 18.3 (20620.2.4.11.5), macOS Version 15.3 Sequoia. I do need to update to 15.3.1 Sequoia so I'll test this again when I do.

@oliverfoster
Copy link
Member Author

I'll let you have a crack at the new version before I have a go at this. That's very odd.

@kirsty-hames
Copy link
Contributor

I'll let you have a crack at the new version before I have a go at this. That's very odd.

Hey @oliverfoster, I can confirm the above issue still applies even after updating to macOS Version 15.3.1 Sequoia. And agreed, very odd :/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Needs Reviewing
Development

Successfully merging this pull request may close these issues.

Focus from menu to page
3 participants