[Locale Modale]: Web Components - VO - Focus trapping not working in mobile

annawen1 commented 2 years ago

Engineering info:

Innovation Team engineer: @andy-blum
Innovation Team JIRA Ticket: https://jsw.ibm.com/browse/HC-2393
DPO consulting engineer: N/A

Description

Focus trapping is not working for the locale modal in mobile.

One thing to try is to change the sentinel nodes to button elements instead of anchor elements as done in: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/8074. This would have to be done in the carbon-web-components modal component as locale modal is extending that.

https://user-images.githubusercontent.com/54281166/150870389-0e73f33a-66dc-4045-9021-2c20f3c6b98e.mov

Component(s) impacted

Locale Modal

Browser

Safari

Carbon for IBM.com version

1.30.0-rc.1

Severity

Severity 2 = Aspects of design is broken, and impedes users in a significant way, but there is a way to complete their tasks. Affects major functionality, has a workaround.

Application/website

https://www.ibm.com/standards/carbon/web-components/?path=/story/components-locale-modal--default

Package

@carbon/ibmdotcom-web-components

Code of Conduct

[X] I agree to follow this project's Code of Conduct
[X] I checked the current issues for duplicate issues

andy-blum commented 2 years ago

@annawen1 is this ticket needed for the same sprint as #8086?

annawen1 commented 2 years ago

@andy-blum nope, this ticket is being treated separately! This one isn't going into this upcoming release so we can schedule this in for the next sprint.

andy-blum commented 2 years ago

Additional accessibility concerns regarding the locale modal:

DDSRegionItem components are rendering links instead of buttons

This is semantically wrong as clicking this item does something rather than goes somewhere.
This has the unfortunate side effect in iOS voiceover of also never getting focused when VO reads the text, leading to disabled options getting read out but not being clickable. Rendering these as buttons would allow us to use the native disabled attribute on the button, preventing VO from ever reading it

The focus trap doesn't navigate the same forwards as it does backwards

Cycling the elements forwards and backwards should include all items, currently cycling forwards does not include the close button, which could lead visually impaired users to assume there is no close button.

This is coming from the way we're collecting all focusable elements and always putting elements in the shadowRoot behind lightDOM children

DDSLocaleSearch has some problems of its own

On ios, the first focused item is the first item in the list. Cycling focus forward may lead users to think they have to navigate the entire list to get down to the bottom of the list. Ideally, the item getting focus would be the modal, allowing users to navigate forward through the close button, title, and search bar before getting to the list
The search updates the list as users type, but that isn't communicated to the screen reader. As a user types in their search term, VO reads back the individual letter and if a pause is detected, will announce the entire word(s). But we should also communicate to users that the list of items has changed and how many options are there now with an aria-live="polite" region.

proeung commented 2 years ago

@andy-blum Since you already looked into this issue. Do you want to grab this one?

carbon-design-system / carbon-for-ibm-dotcom