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

Fix sequence of content in Subhead #1950

Merged
merged 3 commits into from
Feb 28, 2022

Conversation

hectahertz
Copy link
Contributor

@hectahertz hectahertz commented Feb 23, 2022

What are you trying to accomplish?

When a heading, description, and action are rendered in the Subhead component, the content now follows logical order on screen readers.

Before

Before
Accessibility tree
Before accessibility tree

After

After
Accessibility tree
After accessibility tree

What approach did you choose and why?

I decided to reorder the elements on the DOM and use the flexbox order property so elements are still rendered in the same way.

The order property does not affect ordering in non-visual media (such as speech).

The main advantage of this approach is that it is 100% nonbreaking. If the DOM elements are not reordered, things will keep rendering correctly (the accessibility issue will still be there though).

Are additional changes needed?

  • No, this PR should be ok to ship as is. 🚢

When a heading, description, and action are rendered in the Subhead
component, the content now follows logical order on screen readers.
@hectahertz hectahertz requested a review from a team as a code owner February 23, 2022 14:43
@changeset-bot
Copy link

changeset-bot bot commented Feb 23, 2022

🦋 Changeset detected

Latest commit: e1f9d57

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/css Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Member

@jonrohan jonrohan left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good 👍🏻

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants