[A11y] Set focus on scroll-into-view

rajbirsingh83 commented 4 weeks ago

Summary

Currently, scroll-into-view modifier scrolls the element into the viewport but does not move the focus to the element. As such, it causes accessibility issue when the trigger element (like a button on the page that sets shouldScroll as true) is different from the modifier element, because the user sees the modifier element in the viewport but the focus remains on the trigger element (which might be out of viewport by now). So, the keyboard user has to navigate all the way from trigger element to modifier element.

To avoid this issue and be accessibility compliant, we can allow consumers of the modifier to enable auto setting of focus on scroll-into-view:

on the first focusable element found
on the focusable element provided by the consumer If no focusable element exists, its a no-op.

Testing

$ yarn test

[test:ember] 1..50
[test:ember] # tests 50
[test:ember] # pass  50
[test:ember] # skip  0
[test:ember] # todo  0
[test:ember] # fail  0
[test:ember] 
[test:ember] # ok

Screen recordings

elwayman02 commented 4 weeks ago

Looks like there are a couple minor linting errors.

elwayman02 commented 4 weeks ago

The test failure isn't caused by your PR, but you can fix it by bumping this line to 18.20.4: https://github.com/elwayman02/ember-scroll-modifiers/blob/master/package.json#L101

elwayman02 / ember-scroll-modifiers