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

chore: fix various a11y violations in examples (3) #7619

Merged
merged 7 commits into from
Jul 8, 2022

Conversation

nicolethoen
Copy link
Contributor

@nicolethoen nicolethoen commented Jun 27, 2022

What: Closes #7610

  • Notification drawer examples
  • Input group examples
  • Dual list selector examples
  • Data list examples
  • File upload examples
  • Card examples
  • Context selector examples
  • Code block examples
  • Accordion examples
  • Action list examples

few notes:

  • Context selector needed a more reliable way to generate unique ids. So I updated how they were randomly generated and also passed an id to the unit test cases so they would be the same across snapshots. Also, the items inside context selector menus did not have the role='menuitem' so I added it.
  • In the Dual list selector, the aria-multiselectable, aria-labelledby, aria-activedescendant, and role=tree|listbox should only be applied when they have the requisite valid children with valid roles. In the case of empty lists, they should not have those roles (according to the axe tests).
  • The DualListSelectorTree example had the same name as the DualListSelectorTree component, which was causing a conflict when generating the prop descriptions tables, so i renamed the example to DualListSelectorTreeExample.

@patternfly-build
Copy link
Contributor

patternfly-build commented Jun 27, 2022

Copy link
Contributor

@thatblindgeye thatblindgeye 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! 🎉 Only thing I noticed is on the Dual List Selector examples is aXe is catching the error "Ensures landmarks are unique" due to the dual list selector controls with role="region" and the same aria-label. Otherwise I only had a question below.

@@ -76,7 +76,7 @@ DualListSelectorControlsWrapperBase.displayName = 'DualListSelectorControlsWrapp

export const DualListSelectorControlsWrapper = React.forwardRef(
(props: DualListSelectorControlsWrapperProps, ref: React.Ref<HTMLDivElement>) => (
<DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} {...props} />
<DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} {...props} role="region" />
Copy link
Contributor

Choose a reason for hiding this comment

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

For the role, would "region" or "group" be better in this context? Currently the selector controls appear in VO's rotor under "landmarks", and wasn't sure if that may have been part of the intent or not.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

ooo good thought

Copy link
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

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

Looks like dual list selector snapshots just need to be updated, but otherwise looks good to me!

@@ -76,7 +76,7 @@ DualListSelectorControlsWrapperBase.displayName = 'DualListSelectorControlsWrapp

export const DualListSelectorControlsWrapper = React.forwardRef(
(props: DualListSelectorControlsWrapperProps, ref: React.Ref<HTMLDivElement>) => (
<DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} {...props} />
<DualListSelectorControlsWrapperBase innerRef={ref as React.MutableRefObject<any>} {...props} role="group" />
Copy link
Contributor

Choose a reason for hiding this comment

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

Are spreading props before the role here incase someone tries to override it?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't think so - I will spread props at the end

Copy link
Contributor

@jessiehuff jessiehuff left a comment

Choose a reason for hiding this comment

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

LGTM! :)
Testing this does remind me that Dual List selector with tree items isn't accessible by VO though. Do we already have an issue open for that? I thought we did, but I can't find it at the moment.

@tlabaj tlabaj merged commit ce62028 into patternfly:main Jul 8, 2022
jenny-s51 pushed a commit to jenny-s51/patternfly-react that referenced this pull request Jul 26, 2022
* chore: fix various a11y violations in examples (3)

* clean up tests

* fix context selector tests

* fix broken props table

* change controls' role from region to group

* update snapshots

* spread props at end of duallistselectorcontrolswrapperbase
@nicolethoen nicolethoen deleted the fix_site_a11y_violations_4 branch February 8, 2023 13:47
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.

chore: address a11y violations from various component docs (3)
6 participants