-
Notifications
You must be signed in to change notification settings - Fork 58
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
a11y(card): Improve accessibility of card's full screen behavior #959
Merged
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
the tooltip isn't read by VoiceOver
gadenbuie
changed the title
Improve accessibility of card's full screen behavior
a11y(card): Improve accessibility of card's full screen behavior
Jan 3, 2024
To avoid closing the card "twice"
cpsievert
approved these changes
Jan 3, 2024
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.
Fixes #957
This PR improves the general accessibility of the full screen card button, using appropriate ARIA labels and ensuring that the full screen expand button is accessible by keyboard.
The full screen button is now revealed on
:focus
as well as hover. We useopacity
to hide and reveal the button so that it's always included in the tab order, and it's also revealed when hovering or focusing within the card it controls.The full screen button now has
aria-expanded="false"
. Because it's only shown when the card is not expanded, we don't need to toggle this attribute directly.Full screen cards should have an
id
that's reflected in anaria-controls="{cardId}"
attribute on the buttons that control the expansion, which are both the expand and close buttons.The close link in the full screen overlay should also have
aria-expanded="true"
and anaria-controls
with the card ID of the currently expanded card.I added
aria-label
attributes to both the close and expand buttons, without which VoiceOver doesn't provide any context for the purpose of the buttons.This PR also sets the stage for reporting the full screen state via a Shiny input, both in the improved handing of the card ID and also by emitting a new
bslib.card
custom event that reports the full screen status via{detail: {fullScreen: true | false}}
.