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

chore: clean up docs a11y violations #7582

Merged
merged 1 commit into from
Jul 7, 2022
Merged

chore: clean up docs a11y violations #7582

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
7 changes: 5 additions & 2 deletions packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,8 @@ export interface NotificationDrawerGroupProps extends Omit<React.HTMLProps<HTMLD
| 'left-end'
| 'right-start'
| 'right-end';
/** Sets the heading level to use for the group title. Default is h1. */
headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}

export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawerGroupProps> = ({
Expand All @@ -54,6 +56,7 @@ export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawer
title,
truncateTitle = 0,
tooltipPosition,
headingLevel: HeadingLevel = 'h1',
...props
}: NotificationDrawerGroupProps) => {
const titleRef = React.useRef(null);
Expand Down Expand Up @@ -85,7 +88,7 @@ export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawer
{...props}
className={css(styles.notificationDrawerGroup, isExpanded && styles.modifiers.expanded, className)}
>
<h1>
<HeadingLevel>
<button
className={css(styles.notificationDrawerGroupToggle)}
aria-expanded={isExpanded}
Expand All @@ -112,7 +115,7 @@ export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawer
<AngleRightIcon />
</span>
</button>
</h1>
</HeadingLevel>
{children}
</section>
);
Expand Down
7 changes: 5 additions & 2 deletions packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ export interface NotificationDrawerListItemHeaderProps extends React.HTMLProps<H
| 'left-end'
| 'right-start'
| 'right-end';
/** Sets the heading level to use for the list item header title. Default is h2. */
headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
}

export const NotificationDrawerListItemHeader: React.FunctionComponent<NotificationDrawerListItemHeaderProps> = ({
Expand All @@ -63,6 +65,7 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
variant = 'default',
truncateTitle = 0,
tooltipPosition,
headingLevel: HeadingLevel = 'h2',
...props
}: NotificationDrawerListItemHeaderProps) => {
const titleRef = React.useRef(null);
Expand All @@ -79,14 +82,14 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
}, [titleRef, truncateTitle, isTooltipVisible]);
const Icon = variantIcons[variant];
const Title = (
<h2
<HeadingLevel
{...(isTooltipVisible && { tabIndex: 0 })}
ref={titleRef}
className={css(styles.notificationDrawerListItemHeaderTitle, truncateTitle && styles.modifiers.truncate)}
>
{srTitle && <span className={css(a11yStyles.screenReader)}>{srTitle}</span>}
{title}
</h2>
</HeadingLevel>
);

return (
Expand Down
5 changes: 5 additions & 0 deletions ...s/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,11 @@ describe('NotificationDrawerGroup', () => {
expect(asFragment()).toMatchSnapshot();
});

test('renders correct heading level', () => {
const { asFragment } = render(<NotificationDrawerGroup count={2} isExpanded={false} title="Critical Alerts" headingLevel="h2" />);
expect(asFragment()).toMatchSnapshot();
});

test('className is added to the root element', () => {
render(
<NotificationDrawerGroup
Expand Down
5 changes: 5 additions & 0 deletions ...ore/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ describe('NotificationDrawerListItemHeader', () => {
expect(asFragment()).toMatchSnapshot();
});

test('renders with correct heading level', () => {
const { asFragment } = render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly" headingLevel="h3"/>);
expect(asFragment()).toMatchSnapshot();
});

test('className is added to the root element', () => {
render(
<NotificationDrawerListItemHeader title="Pod quit unexpectedly" className="extra-class" data-testid="test-id" />
Expand Down
47 changes: 47 additions & 0 deletions ...mponents/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,53 @@ exports[`NotificationDrawerGroup drawer group with isRead applied 1`] = `
</DocumentFragment>
`;

exports[`NotificationDrawerGroup renders correct heading level 1`] = `
<DocumentFragment>
<section
class="pf-c-notification-drawer__group"
>
<h2>
<button
aria-expanded="false"
class="pf-c-notification-drawer__group-toggle"
>
<div
class="pf-c-notification-drawer__group-toggle-title"
>
Critical Alerts
</div>
<div
class="pf-c-notification-drawer__group-toggle-count"
>
<span
class="pf-c-badge pf-m-unread"
>
2
</span>
</div>
<span
class="pf-c-notification-drawer__group-toggle-icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 256 512"
width="1em"
>
<path
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
/>
</svg>
</span>
</button>
</h2>
</section>
</DocumentFragment>
`;

exports[`NotificationDrawerGroup renders with PatternFly Core styles 1`] = `
<DocumentFragment>
<section
Expand Down
31 changes: 31 additions & 0 deletions ...NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,3 +128,34 @@ exports[`NotificationDrawerListItemHeader renders with PatternFly Core styles 1`
</div>
</DocumentFragment>
`;

exports[`NotificationDrawerListItemHeader renders with correct heading level 1`] = `
<DocumentFragment>
<div
class="pf-c-notification-drawer__list-item-header"
>
<span
class="pf-c-notification-drawer__list-item-header-icon"
>
<svg
aria-hidden="true"
fill="currentColor"
height="1em"
role="img"
style="vertical-align: -0.125em;"
viewBox="0 0 896 1024"
width="1em"
>
<path
d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
/>
</svg>
</span>
<h3
class="pf-c-notification-drawer__list-item-header-title"
>
Pod quit unexpectedly
</h3>
</div>
</DocumentFragment>
`;
Loading