Skip to content
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
merged 17 commits into from
Jan 3, 2024

Conversation

gadenbuie
Copy link
Member

@gadenbuie gadenbuie commented Jan 3, 2024

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 use opacity 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 an aria-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 an aria-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}}.

@gadenbuie 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
@gadenbuie gadenbuie merged commit 080861b into main Jan 3, 2024
1 check passed
@gadenbuie gadenbuie deleted the cards/a11y-fullscreen branch January 3, 2024 21:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Full-screen card() accessibility and usability improvements
2 participants