fix: fixed VO and JAWS problem in FF and Safari#14156
Conversation
✅ Deploy Preview for carbon-components-react ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-components-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
The issue with this is that it breaks the focus wrap behavior, looks like the tab order now goes outside of the modal. We need to be able to focus these elements for the |
Ohh! I got it |
|
@tw15egan I paired up with Taylor on that so we could tested using JAWS. Thanks @tay1orjones for pairing up! |
|
Just pushed up an update from @guidari and I's pairing session - we realigned the initial focus behavior to more closely match what's happening in Modal. The root issue that we resolved here was that the modal was rendering, focusing the initial element (input), and then re-rendering which was causing the focus on the input to be lost and revert to the modal container/focus sentinel. The changes ensure that |
tay1orjones
left a comment
There was a problem hiding this comment.
This also moves the focus sentinels outside of the dialog element and ensures they have tabIndex={0}
francinelucca
left a comment
There was a problem hiding this comment.
The VO seems to be reading out the focus sentinels to me on safari, is that correct?
Screen.Recording.2023-07-10.at.12.51.40.PM.mov
|
I'm not able to replicate that @francinelucca 🤔 I'm in Safari using the VO Edit: Now I can replicate it |
tay1orjones
left a comment
There was a problem hiding this comment.
Confirmed JAWS 2023 in firefox does not read focus sentinels 👍
francinelucca
left a comment
There was a problem hiding this comment.
LGTM in composedModal, I do see the same issue in Modal though, could we port this fix over to Modal? or open another issue for Modal?
We basically copy a few things from I can open it and take a look |
Closes #13888
Added
tabIndex={-1}to avoid that screen readers passes throught it.I tested only with VO, but it should work on JAWS also.
Testing / Reviewing
You should expect the same behaivor as Chrome in both browsers