Skip to content

chore: fix various a11y violations in examples (2) #7604

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

Merged
thatblindgeye merged 1 commit into from
Jul 15, 2022
Merged

chore: fix various a11y violations in examples (2) #7604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions packages/react-core/src/components/Alert/Alert.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
isPlain = false,
isLiveRegion = false,
variantLabel = `${capitalize(variant)} alert:`,
'aria-label': ariaLabel = `${capitalize(variant)} Alert`,
Copy link
Contributor

@thatblindgeye thatblindgeye Jul 6, 2022

Choose a reason for hiding this comment

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

Not necessarily a blocker, but one pro for keeping this aria-label in is that, at least for VoiceOver, it announces "Info alert, group" and "end of info alert, group" when entering/exiting it. So possibly better context of what is actually considered part of the alert or not.

I would agree that I don't think we need both this aria-label and the variantLabel that prefaces the alert title, though, and if we would want to avoid that aXe error about aria-labels on divs then I'm on board with this change. Another option would be adding a role/changing the div, but I'm not sure what would be the best approach for this other than maybe a status role (though that will create a live region on alerts).

Copy link
Contributor Author

@nicolethoen nicolethoen Jul 7, 2022

Choose a reason for hiding this comment

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

Yeah this was one where I was not sure which of the possible fixes were the best.
I opted for this because it's a single alert, not an alert group, so I thought that VO call out was not quite accurate.

actionClose,
actionLinks,
title,
Expand Down Expand Up @@ -203,7 +202,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
className
)}
aria-label={ariaLabel}
{...ouiaProps}
{...(isLiveRegion && {
'aria-live': 'polite',
Expand Down
35 changes: 0 additions & 35 deletions packages/react-core/src/components/Alert/__tests__/__snapshots__/Alert.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
exports[`Alert Alert - danger Action Link 1`] = `
<DocumentFragment>
<div
aria-label="Danger Alert"
class="pf-c-alert pf-m-danger"
data-ouia-component-id="OUIA-Generated-Alert-danger-4"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -61,7 +60,6 @@ exports[`Alert Alert - danger Action Link 1`] = `
exports[`Alert Alert - danger Action and Title 1`] = `
<DocumentFragment>
<div
aria-label="Danger Alert"
class="pf-c-alert pf-m-danger"
data-ouia-component-id="OUIA-Generated-Alert-danger-6"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -224,7 +222,6 @@ exports[`Alert Alert - danger Custom icon 1`] = `
exports[`Alert Alert - danger Description 1`] = `
<DocumentFragment>
<div
aria-label="Danger Alert"
class="pf-c-alert pf-m-danger"
data-ouia-component-id="OUIA-Generated-Alert-danger-1"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -268,7 +265,6 @@ exports[`Alert Alert - danger Description 1`] = `
exports[`Alert Alert - danger Heading level 1`] = `
<DocumentFragment>
<div
aria-label="Danger Alert"
class="pf-c-alert pf-m-danger"
data-ouia-component-id="OUIA-Generated-Alert-danger-3"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -313,7 +309,6 @@ exports[`Alert Alert - danger Heading level 1`] = `
exports[`Alert Alert - danger Title 1`] = `
<DocumentFragment>
<div
aria-label="Danger Alert"
class="pf-c-alert pf-m-danger"
data-ouia-component-id="OUIA-Generated-Alert-danger-2"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -405,7 +400,6 @@ exports[`Alert Alert - danger Toast alerts match snapsnot 1`] = `
exports[`Alert Alert - danger expandable variation 1`] = `
<DocumentFragment>
<div
aria-label="Danger Alert"
class="pf-c-alert pf-m-expandable pf-m-danger"
data-ouia-component-id="OUIA-Generated-Alert-danger-9"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -477,7 +471,6 @@ exports[`Alert Alert - danger expandable variation 1`] = `
exports[`Alert Alert - danger inline variation 1`] = `
<DocumentFragment>
<div
aria-label="Danger Alert"
class="pf-c-alert pf-m-inline pf-m-danger"
data-ouia-component-id="OUIA-Generated-Alert-danger-8"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -522,7 +515,6 @@ exports[`Alert Alert - danger inline variation 1`] = `
exports[`Alert Alert - default Action Link 1`] = `
<DocumentFragment>
<div
aria-label="Default Alert"
class="pf-c-alert"
data-ouia-component-id="OUIA-Generated-Alert-default-5"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -580,7 +572,6 @@ exports[`Alert Alert - default Action Link 1`] = `
exports[`Alert Alert - default Action and Title 1`] = `
<DocumentFragment>
<div
aria-label="Default Alert"
class="pf-c-alert"
data-ouia-component-id="OUIA-Generated-Alert-default-7"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -743,7 +734,6 @@ exports[`Alert Alert - default Custom icon 1`] = `
exports[`Alert Alert - default Description 1`] = `
<DocumentFragment>
<div
aria-label="Default Alert"
class="pf-c-alert"
data-ouia-component-id="OUIA-Generated-Alert-default-2"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -787,7 +777,6 @@ exports[`Alert Alert - default Description 1`] = `
exports[`Alert Alert - default Heading level 1`] = `
<DocumentFragment>
<div
aria-label="Default Alert"
class="pf-c-alert"
data-ouia-component-id="OUIA-Generated-Alert-default-4"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -832,7 +821,6 @@ exports[`Alert Alert - default Heading level 1`] = `
exports[`Alert Alert - default Title 1`] = `
<DocumentFragment>
<div
aria-label="Default Alert"
class="pf-c-alert"
data-ouia-component-id="OUIA-Generated-Alert-default-3"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -924,7 +912,6 @@ exports[`Alert Alert - default Toast alerts match snapsnot 1`] = `
exports[`Alert Alert - default expandable variation 1`] = `
<DocumentFragment>
<div
aria-label="Default Alert"
class="pf-c-alert pf-m-expandable"
data-ouia-component-id="OUIA-Generated-Alert-default-10"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -996,7 +983,6 @@ exports[`Alert Alert - default expandable variation 1`] = `
exports[`Alert Alert - default inline variation 1`] = `
<DocumentFragment>
<div
aria-label="Default Alert"
class="pf-c-alert pf-m-inline"
data-ouia-component-id="OUIA-Generated-Alert-default-9"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1041,7 +1027,6 @@ exports[`Alert Alert - default inline variation 1`] = `
exports[`Alert Alert - info Action Link 1`] = `
<DocumentFragment>
<div
aria-label="Info Alert"
class="pf-c-alert pf-m-info"
data-ouia-component-id="OUIA-Generated-Alert-info-4"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1099,7 +1084,6 @@ exports[`Alert Alert - info Action Link 1`] = `
exports[`Alert Alert - info Action and Title 1`] = `
<DocumentFragment>
<div
aria-label="Info Alert"
class="pf-c-alert pf-m-info"
data-ouia-component-id="OUIA-Generated-Alert-info-6"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1262,7 +1246,6 @@ exports[`Alert Alert - info Custom icon 1`] = `
exports[`Alert Alert - info Description 1`] = `
<DocumentFragment>
<div
aria-label="Info Alert"
class="pf-c-alert pf-m-info"
data-ouia-component-id="OUIA-Generated-Alert-info-1"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1306,7 +1289,6 @@ exports[`Alert Alert - info Description 1`] = `
exports[`Alert Alert - info Heading level 1`] = `
<DocumentFragment>
<div
aria-label="Info Alert"
class="pf-c-alert pf-m-info"
data-ouia-component-id="OUIA-Generated-Alert-info-3"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1351,7 +1333,6 @@ exports[`Alert Alert - info Heading level 1`] = `
exports[`Alert Alert - info Title 1`] = `
<DocumentFragment>
<div
aria-label="Info Alert"
class="pf-c-alert pf-m-info"
data-ouia-component-id="OUIA-Generated-Alert-info-2"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1443,7 +1424,6 @@ exports[`Alert Alert - info Toast alerts match snapsnot 1`] = `
exports[`Alert Alert - info expandable variation 1`] = `
<DocumentFragment>
<div
aria-label="Info Alert"
class="pf-c-alert pf-m-expandable pf-m-info"
data-ouia-component-id="OUIA-Generated-Alert-info-9"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1515,7 +1495,6 @@ exports[`Alert Alert - info expandable variation 1`] = `
exports[`Alert Alert - info inline variation 1`] = `
<DocumentFragment>
<div
aria-label="Info Alert"
class="pf-c-alert pf-m-inline pf-m-info"
data-ouia-component-id="OUIA-Generated-Alert-info-8"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1560,7 +1539,6 @@ exports[`Alert Alert - info inline variation 1`] = `
exports[`Alert Alert - success Action Link 1`] = `
<DocumentFragment>
<div
aria-label="Success Alert"
class="pf-c-alert pf-m-success"
data-ouia-component-id="OUIA-Generated-Alert-success-4"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1618,7 +1596,6 @@ exports[`Alert Alert - success Action Link 1`] = `
exports[`Alert Alert - success Action and Title 1`] = `
<DocumentFragment>
<div
aria-label="Success Alert"
class="pf-c-alert pf-m-success"
data-ouia-component-id="OUIA-Generated-Alert-success-6"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1781,7 +1758,6 @@ exports[`Alert Alert - success Custom icon 1`] = `
exports[`Alert Alert - success Description 1`] = `
<DocumentFragment>
<div
aria-label="Success Alert"
class="pf-c-alert pf-m-success"
data-ouia-component-id="OUIA-Generated-Alert-success-1"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1825,7 +1801,6 @@ exports[`Alert Alert - success Description 1`] = `
exports[`Alert Alert - success Heading level 1`] = `
<DocumentFragment>
<div
aria-label="Success Alert"
class="pf-c-alert pf-m-success"
data-ouia-component-id="OUIA-Generated-Alert-success-3"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1870,7 +1845,6 @@ exports[`Alert Alert - success Heading level 1`] = `
exports[`Alert Alert - success Title 1`] = `
<DocumentFragment>
<div
aria-label="Success Alert"
class="pf-c-alert pf-m-success"
data-ouia-component-id="OUIA-Generated-Alert-success-2"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -1962,7 +1936,6 @@ exports[`Alert Alert - success Toast alerts match snapsnot 1`] = `
exports[`Alert Alert - success expandable variation 1`] = `
<DocumentFragment>
<div
aria-label="Success Alert"
class="pf-c-alert pf-m-expandable pf-m-success"
data-ouia-component-id="OUIA-Generated-Alert-success-9"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -2034,7 +2007,6 @@ exports[`Alert Alert - success expandable variation 1`] = `
exports[`Alert Alert - success inline variation 1`] = `
<DocumentFragment>
<div
aria-label="Success Alert"
class="pf-c-alert pf-m-inline pf-m-success"
data-ouia-component-id="OUIA-Generated-Alert-success-8"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -2079,7 +2051,6 @@ exports[`Alert Alert - success inline variation 1`] = `
exports[`Alert Alert - warning Action Link 1`] = `
<DocumentFragment>
<div
aria-label="Warning Alert"
class="pf-c-alert pf-m-warning"
data-ouia-component-id="OUIA-Generated-Alert-warning-4"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -2137,7 +2108,6 @@ exports[`Alert Alert - warning Action Link 1`] = `
exports[`Alert Alert - warning Action and Title 1`] = `
<DocumentFragment>
<div
aria-label="Warning Alert"
class="pf-c-alert pf-m-warning"
data-ouia-component-id="OUIA-Generated-Alert-warning-6"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -2300,7 +2270,6 @@ exports[`Alert Alert - warning Custom icon 1`] = `
exports[`Alert Alert - warning Description 1`] = `
<DocumentFragment>
<div
aria-label="Warning Alert"
class="pf-c-alert pf-m-warning"
data-ouia-component-id="OUIA-Generated-Alert-warning-1"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -2344,7 +2313,6 @@ exports[`Alert Alert - warning Description 1`] = `
exports[`Alert Alert - warning Heading level 1`] = `
<DocumentFragment>
<div
aria-label="Warning Alert"
class="pf-c-alert pf-m-warning"
data-ouia-component-id="OUIA-Generated-Alert-warning-3"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -2389,7 +2357,6 @@ exports[`Alert Alert - warning Heading level 1`] = `
exports[`Alert Alert - warning Title 1`] = `
<DocumentFragment>
<div
aria-label="Warning Alert"
class="pf-c-alert pf-m-warning"
data-ouia-component-id="OUIA-Generated-Alert-warning-2"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -2481,7 +2448,6 @@ exports[`Alert Alert - warning Toast alerts match snapsnot 1`] = `
exports[`Alert Alert - warning expandable variation 1`] = `
<DocumentFragment>
<div
aria-label="Warning Alert"
class="pf-c-alert pf-m-expandable pf-m-warning"
data-ouia-component-id="OUIA-Generated-Alert-warning-9"
data-ouia-component-type="PF4/Alert"
Expand Down Expand Up @@ -2553,7 +2519,6 @@ exports[`Alert Alert - warning expandable variation 1`] = `
exports[`Alert Alert - warning inline variation 1`] = `
<DocumentFragment>
<div
aria-label="Warning Alert"
class="pf-c-alert pf-m-inline pf-m-warning"
data-ouia-component-id="OUIA-Generated-Alert-warning-8"
data-ouia-component-type="PF4/Alert"
Expand Down
6 changes: 3 additions & 3 deletions packages/react-core/src/components/Masthead/examples/Masthead.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import React from 'react';
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';

<Masthead id="basic">
<Masthead id="basic-example">
<MastheadToggle>
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
<BarsIcon />
Expand Down Expand Up @@ -126,7 +126,7 @@ import React from 'react';
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';

<Masthead id="stack-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
<Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
<MastheadToggle>
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
<BarsIcon />
Expand Down Expand Up @@ -216,7 +216,7 @@ import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
import { Link } from '@reach/router';
import pfIcon from './pf-logo-small.svg';

<Masthead id="basic">
<Masthead id="icon-router-link">
<MastheadToggle>
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
<BarsIcon />
Expand Down
7 changes: 5 additions & 2 deletions packages/react-core/src/components/Menu/MenuGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ export interface MenuGroupProps extends React.HTMLProps<HTMLElement> {
titleId?: string;
/** Forwarded ref */
innerRef?: React.Ref<any>;
/** Group label heading level. Default is h1. */
labelHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}

const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
Expand All @@ -21,13 +23,14 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
label = '',
titleId = '',
innerRef,
labelHeadingLevel: HeadingLevel = 'h1',
...props
}: MenuGroupProps) => (
<section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
{label && (
<h1 className={css(styles.menuGroupTitle)} id={titleId}>
<HeadingLevel className={css(styles.menuGroupTitle)} id={titleId}>
{label}
</h1>
</HeadingLevel>
)}
{children}
</section>
Expand Down
Loading