Combobox Examples with listbox popups: scroll item referenced by aria-activedescendant into view

[jongund]

Resolves #2052

Preview Link: aria-autocomplete=both
Preview Link: aria-autocomplete=list
Preview Link: aria-autocomplete=none

Editor's review checklist

The scope of changes for this pull request necessatates only the following reviews.

• Editorial review by @mcking65
• Accessibility review by @a11ydoer
• Code review by @howard-e

[jongund]

@mcking65
I have updated the combobox example to include a scroll into view feature.

[JAWS-test]

Thank you for the quick change. It works correctly now

[jongund]

@JAWS-test
Your welcome, and thank you for pointing out the deficiency implementation in the examples.

[mcking65]

@jongund
Thank you for also adding the accessibility features documentation!

I have some questions about:

The listbox option referenced by aria-activedescendant is scrolled into view when it is not visible in the graphical rendering. This can occur under many conditions, but is most common when people with visual impairments use a browser's zoom feature to increase the size of content.

It looks like the scrolling into view is only done from the setActiveDescendant method. What are the user events that can trigger the scrolling? Is it only focus events? Are the only user activities that can cause an option to scroll out of view keyboard presses or a next item gesture from a touch screen reader?

You also made some changes related to blur events. What drives the need for those changes?

What do you think of writing the documentation for this change as follows?

Browsers do not manage visibility of elements referenced by aria-activedescendant like they do for elements with focus. So, when a keyboard event changes the active option in the listbox, if the event removes the option from the visible area, the JavaScript scrolls the option referenced by aria-activedescendant into view. Managing aria-activedescendant visibility is essential to accessibility for people who use a browser's zoom feature to increase the size of content.

[jongund]

@mcking65
I did some updating of keyboard focus styling to support high contrast modes, part of the changes required using the onblur event to remove a focus class from the container element to remove the border around the textbox and button.

[howard-e]

Code reviewed and LGTM.

I did notice that when running the regression tests locally on macOS Monterey and Big Sur that there is a failing case. I've opened a new issue for it #2073 so we may keep track, as this PR made no changes which caused that.

[mcking65]

Accessibility review was completed during last telecon. Merging.