Skip to content

Commit a1c09df

Browse files
nicolethoennicolethoen
authored
chore: clean up docs a11y violations (#7582)
1 parent 2c24a25 commit a1c09df

File tree

15 files changed

+281
-165
lines changed

15 files changed

+281
-165
lines changed

‎packages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ export interface NotificationDrawerGroupProps extends Omit<React.HTMLProps<HTMLD
4141
| 'left-end'
4242
| 'right-start'
4343
| 'right-end';
44+
/** Sets the heading level to use for the group title. Default is h1. */
45+
headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
4446
}
4547

4648
export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawerGroupProps> = ({
@@ -54,6 +56,7 @@ export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawer
5456
title,
5557
truncateTitle = 0,
5658
tooltipPosition,
59+
headingLevel: HeadingLevel = 'h1',
5760
...props
5861
}: NotificationDrawerGroupProps) => {
5962
const titleRef = React.useRef(null);
@@ -85,7 +88,7 @@ export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawer
8588
{...props}
8689
className={css(styles.notificationDrawerGroup, isExpanded && styles.modifiers.expanded, className)}
8790
>
88-
<h1>
91+
<HeadingLevel>
8992
<button
9093
className={css(styles.notificationDrawerGroupToggle)}
9194
aria-expanded={isExpanded}
@@ -112,7 +115,7 @@ export const NotificationDrawerGroup: React.FunctionComponent<NotificationDrawer
112115
<AngleRightIcon />
113116
</span>
114117
</button>
115-
</h1>
118+
</HeadingLevel>
116119
{children}
117120
</section>
118121
);

‎packages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ export interface NotificationDrawerListItemHeaderProps extends React.HTMLProps<H
5252
| 'left-end'
5353
| 'right-start'
5454
| 'right-end';
55+
/** Sets the heading level to use for the list item header title. Default is h2. */
56+
headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
5557
}
5658

5759
export const NotificationDrawerListItemHeader: React.FunctionComponent<NotificationDrawerListItemHeaderProps> = ({
@@ -63,6 +65,7 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
6365
variant = 'default',
6466
truncateTitle = 0,
6567
tooltipPosition,
68+
headingLevel: HeadingLevel = 'h2',
6669
...props
6770
}: NotificationDrawerListItemHeaderProps) => {
6871
const titleRef = React.useRef(null);
@@ -79,14 +82,14 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
7982
}, [titleRef, truncateTitle, isTooltipVisible]);
8083
const Icon = variantIcons[variant];
8184
const Title = (
82-
<h2
85+
<HeadingLevel
8386
{...(isTooltipVisible && { tabIndex: 0 })}
8487
ref={titleRef}
8588
className={css(styles.notificationDrawerListItemHeaderTitle, truncateTitle && styles.modifiers.truncate)}
8689
>
8790
{srTitle && <span className={css(a11yStyles.screenReader)}>{srTitle}</span>}
8891
{title}
89-
</h2>
92+
</HeadingLevel>
9093
);
9194

9295
return (

‎packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerGroup.test.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@ describe('NotificationDrawerGroup', () => {
1111
expect(asFragment()).toMatchSnapshot();
1212
});
1313

14+
test('renders correct heading level', () => {
15+
const { asFragment } = render(<NotificationDrawerGroup count={2} isExpanded={false} title="Critical Alerts" headingLevel="h2" />);
16+
expect(asFragment()).toMatchSnapshot();
17+
});
18+
1419
test('className is added to the root element', () => {
1520
render(
1621
<NotificationDrawerGroup

‎packages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ describe('NotificationDrawerListItemHeader', () => {
1212
expect(asFragment()).toMatchSnapshot();
1313
});
1414

15+
test('renders with correct heading level', () => {
16+
const { asFragment } = render(<NotificationDrawerListItemHeader title="Pod quit unexpectedly" headingLevel="h3"/>);
17+
expect(asFragment()).toMatchSnapshot();
18+
});
19+
1520
test('className is added to the root element', () => {
1621
render(
1722
<NotificationDrawerListItemHeader title="Pod quit unexpectedly" className="extra-class" data-testid="test-id" />

‎packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snap‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,53 @@ exports[`NotificationDrawerGroup drawer group with isRead applied 1`] = `
9494
</DocumentFragment>
9595
`;
9696

97+
exports[`NotificationDrawerGroup renders correct heading level 1`] = `
98+
<DocumentFragment>
99+
<section
100+
class="pf-c-notification-drawer__group"
101+
>
102+
<h2>
103+
<button
104+
aria-expanded="false"
105+
class="pf-c-notification-drawer__group-toggle"
106+
>
107+
<div
108+
class="pf-c-notification-drawer__group-toggle-title"
109+
>
110+
Critical Alerts
111+
</div>
112+
<div
113+
class="pf-c-notification-drawer__group-toggle-count"
114+
>
115+
<span
116+
class="pf-c-badge pf-m-unread"
117+
>
118+
2
119+
</span>
120+
</div>
121+
<span
122+
class="pf-c-notification-drawer__group-toggle-icon"
123+
>
124+
<svg
125+
aria-hidden="true"
126+
fill="currentColor"
127+
height="1em"
128+
role="img"
129+
style="vertical-align: -0.125em;"
130+
viewBox="0 0 256 512"
131+
width="1em"
132+
>
133+
<path
134+
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"
135+
/>
136+
</svg>
137+
</span>
138+
</button>
139+
</h2>
140+
</section>
141+
</DocumentFragment>
142+
`;
143+
97144
exports[`NotificationDrawerGroup renders with PatternFly Core styles 1`] = `
98145
<DocumentFragment>
99146
<section

‎packages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snap‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,3 +128,34 @@ exports[`NotificationDrawerListItemHeader renders with PatternFly Core styles 1`
128128
</div>
129129
</DocumentFragment>
130130
`;
131+
132+
exports[`NotificationDrawerListItemHeader renders with correct heading level 1`] = `
133+
<DocumentFragment>
134+
<div
135+
class="pf-c-notification-drawer__list-item-header"
136+
>
137+
<span
138+
class="pf-c-notification-drawer__list-item-header-icon"
139+
>
140+
<svg
141+
aria-hidden="true"
142+
fill="currentColor"
143+
height="1em"
144+
role="img"
145+
style="vertical-align: -0.125em;"
146+
viewBox="0 0 896 1024"
147+
width="1em"
148+
>
149+
<path
150+
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"
151+
/>
152+
</svg>
153+
</span>
154+
<h3
155+
class="pf-c-notification-drawer__list-item-header-title"
156+
>
157+
Pod quit unexpectedly
158+
</h3>
159+
</div>
160+
</DocumentFragment>
161+
`;

0 commit comments

Comments
 (0)