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

[material-ui][Divider] Add aria-orientation #43241

Merged
merged 6 commits into from
Aug 15, 2024
Merged

Conversation

aarongarciah
Copy link
Member

@aarongarciah aarongarciah commented Aug 9, 2024

Resolves #43275

Modifies the Divider component to render a <div role="separator" aria-orientation="vertical"> instead of <hr> when using vertical orientation to adhere to the ARIA spec.

This can be considered a breaking change since consumers might be targeting hr elements for styling purposes.

Benchmarks

@aarongarciah aarongarciah added breaking change component: divider This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material labels Aug 9, 2024
@aarongarciah aarongarciah self-assigned this Aug 9, 2024
@mui-bot
Copy link

mui-bot commented Aug 9, 2024

@aarongarciah aarongarciah changed the title [material-ui][Divider] Add aria-orientation [material-ui][Divider] Add aria-orientation for vertical Aug 9, 2024
@aarongarciah aarongarciah force-pushed the divider-vertical-a11y branch from 433ec05 to cde7379 Compare August 9, 2024 12:06
@aarongarciah aarongarciah changed the title [material-ui][Divider] Add aria-orientation for vertical [material-ui][Divider] Add aria-orientation Aug 9, 2024
@aarongarciah aarongarciah requested a review from DiegoAndai August 9, 2024 12:09
Copy link
Member Author

@aarongarciah aarongarciah Aug 9, 2024

Choose a reason for hiding this comment

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

I took the opportunity to improve related tests by using semantic queries whenever possible.

@aarongarciah aarongarciah marked this pull request as ready for review August 9, 2024 12:17
@aarongarciah
Copy link
Member Author

@DiegoAndai I'll add a section in the v6 upgrade guide if we agree on it being a breaking change.

@DiegoAndai
Copy link
Member

I'll add a section in the v6 upgrade guide if we agree on it being a breaking change.

👍🏼 let's do it

Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

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

One final request for this is to add a note to https://mui.com/material-ui/react-divider/#orientation that the underlying DOM changes to div to follow the accessibility guideline.

@aarongarciah
Copy link
Member Author

aarongarciah commented Aug 13, 2024

@siriwatknp I added a note as you suggested:

image

@aarongarciah
Copy link
Member Author

@DiegoAndai I added an entry in the v6 upgrade guide. This is now ready for a final review.

Copy link
Member

@siriwatknp siriwatknp left a comment

Choose a reason for hiding this comment

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

👍 Awesome

Copy link
Member

@DiegoAndai DiegoAndai left a comment

Choose a reason for hiding this comment

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

I have a small request for besides that RTM.

@aarongarciah aarongarciah merged commit 902bb70 into next Aug 15, 2024
28 checks passed
@aarongarciah aarongarciah deleted the divider-vertical-a11y branch August 15, 2024 12:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility a11y breaking change component: divider This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[material-ui][Divider] Add aria-orientation
4 participants