Modal accessibility #4615
Open
Modal accessibility #4615
+415
−210
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
Storybook staging is available at https://kiwicom-orbit-dsil-modal-accessibility.surge.sh Playroom staging is available at https://kiwicom-orbit-dsil-modal-accessibility.surge.sh/playroom |
|
Size Change: +144 B (+0.03%) Total Size: 461 kB
ℹ️ View Unchanged
|
Deploying orbit with
|
| Latest commit: |
7bd50c5
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://db7b4683.orbit.pages.dev |
| Branch Preview URL: | https://dsil-modal-accessibility.orbit.pages.dev |
DSil
force-pushed
the
dsil/modal-accessibility
branch
from
7128f61 to
b2d6d62
Compare
These props can be used to enhance accessibility
This accepts a ref to the element that triggers the modal. This allows to restore the focus on the trigger element after closing the modal
The autoFocus prop now has no effect
BREAKING CHANGE: The modal now focuses the first focusable element by default. Therefore, the autoFocus prop is no longer needed
These are NOT related to this task, but are outdated from other tasks
DSil
force-pushed
the
dsil/modal-accessibility
branch
from
b2d6d62 to
30f5ff7
Compare
BREAKING CHANGE: the labelClose prop no longer has a default value. It is now required whenever onClose is defined and hasCloseButton is not explicitly set to false (default value is true).
The codemod now also targets the Modal and the labelClose prop. Renamed the codemod because it is no longer exclusive to HorizontalScroll.
DSil
force-pushed
the
dsil/modal-accessibility
branch
from
d69dd88 to
7bd50c5
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
A couple improvements to the Modal accessibility:
ariaLabel,ariaLabelledbyandariaDescribedbytriggerRefprop that receives a ref of the trigger element, allowing the focus to get back to it when the modal closesSome darwin visual tests were updated because they were outdated.
Also, visual tests were updated because they should now reflect the first focusable element with the focus.
FEPLT-2240
✨
Description by Callstackai
This PR introduces accessibility improvements to the Modal component, including support for
ariaLabel,ariaLabelledby, andariaDescribedbyattributes, as well as atriggerRefprop for better focus management.Diagrams of code changes
sequenceDiagram participant User participant Button participant Modal participant ModalHeader participant ScreenReader User->>Button: Clicks open button Button->>Modal: Opens modal (stores triggerRef) Modal->>ModalHeader: Renders with title/description ModalHeader->>Modal: Sets aria attributes Modal->>ScreenReader: Announces modal content Note over Modal,ScreenReader: Uses aria-labelledby/describedby User->>Modal: Interacts with modal Note over Modal: Focus trapped inside modal User->>Modal: Closes modal Modal->>Button: Returns focus to trigger Note over Button: Focus restored via triggerRefFiles Changed
This PR includes files in programming languages that we currently do not support. We have not reviewed files with the extensions
.mdx,.md. See list of supported languages.