added 'tab' accessibility to modal with focus lock to prevent from fo… #1575
Conversation
✅ Deploy Preview for evergreen-storybook ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
| @@ -63,13 +63,13 @@ const TableVirtualBody = memo(function TableVirtualBody(props) { | |||
| if (props.height !== calculatedHeight) { | |||
| setIsIntegerHeight(Number.isInteger(props.height)) | |||
| } | |||
| }, [props.height]) | |||
| }, [props.heightm, calculatedHeight]) | |||
There was a problem hiding this comment.
Can we revert this file?
| @@ -97,6 +98,16 @@ const Dialog = memo(function Dialog({ | |||
| const topOffsetWithUnit = Number.isInteger(topOffset) ? `${topOffset}px` : topOffset | |||
| const maxHeight = `calc(100% - ${topOffsetWithUnit} * 2)` | |||
|
|
|||
| const [isVisible, setIsVisible] = useState(false) | |||
There was a problem hiding this comment.
Can you explain what this is used for? (Is there a reason we can't use isShown from props?)
| {renderHeader(close)} | ||
|
|
||
| <Pane | ||
| data-state={state} |
There was a problem hiding this comment.
Can you explain why we needed to move some of these props down? (I'd say we probably only need data-state set once in here either way)
|
Thanks for taking a look at this @simona1245! I pulled it down and gave it a run myself, and it does seem to trap focus as expected. One potential issue I noticed is that it no longer closes the dialog when you click outside of it. I'm not entirely sure whether we should have this behavior, but it will be a breaking change if we keep it as-is. I'm going to dig into web accessibility standards a bit and see what I can find. |
|
Hmm, after taking a look at what Paste does, they actually split out two variants of what looks like our https://paste.twilio.design/components/modal This seems to be more or less our Dialog component, i.e. it closes on an outside click (but it is accessible in that it traps focus inside, handles escape to close, etc) https://paste.twilio.design/components/alert-dialog I think this is closer to what the proposed implementation in this PR is - same visual styling as their Modal component, but closing the AlertDialog has to be explicitly done with the Cancel/Confirmation action (escape does not close it either). We're in somewhat of a middle state between these two variants. In the interest of backwards compatibility, can we figure out how to maintain the outside-click-to-close behavior? |
as of the documentation and thorough internet searching about "tab focusing" it is clear that creating tab focus from scratch is not applicable. (see stackoverflow)
Library to add: react-focus-trap