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.

Sign up for GitHub

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

Jump to bottom

Card: title should always precede subtitle in DOM order #8707

Open
9 of 10 tasks
rolfsmeds opened this issue Feb 20, 2025 · 1 comment
Open
9 of 10 tasks

Card: title should always precede subtitle in DOM order #8707

rolfsmeds opened this issue Feb 20, 2025 · 1 comment
Labels
a11y Accessibility issue documentation Improvements or additions to documentation enhancement New feature or request vaadin-card

Comments

@rolfsmeds
Copy link
Contributor

What is the problem?

In the Header example in the Card documentation (https://vaadin.com/docs/latest/components/card#header), the subtitle precedes the title in the DOM order, which is a problem for screen reader users for whom the title should be the first announced element in the card.

Solution options include:

  • Recommending use of flexbox and order to visually place subtitle before title without affecting DOM order
  • Introducing a style variant to achieve the same using slots

Browsers

  • Chrome
  • Firefox
  • Safari
  • Safari on iOS
  • Edge

Screen Readers

  • None
  • NVDA
  • JAWS
  • VoiceOver on MacOS
  • VoiceOver on iOS
@rolfsmeds rolfsmeds added a11y Accessibility issue documentation Improvements or additions to documentation enhancement New feature or request vaadin-card labels Feb 20, 2025
@yuriy-fix
Copy link
Contributor

Let's fix the documentation sample for now.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y Accessibility issue documentation Improvements or additions to documentation enhancement New feature or request vaadin-card
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rolfsmeds @yuriy-fix