Skip to content

Commit ce4bbba

Browse files
nicolethoennicolethoen
committed
chore: fix various a11y violations in examples
1 parent 95acf13 commit ce4bbba

29 files changed

Lines changed: 488 additions & 470 deletions

File tree

‎packages/react-core/src/components/Alert/Alert.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
8181
isPlain = false,
8282
isLiveRegion = false,
8383
variantLabel = `${capitalize(variant)} alert:`,
84-
'aria-label': ariaLabel = `${capitalize(variant)} Alert`,
8584
actionClose,
8685
actionLinks,
8786
title,
@@ -203,7 +202,6 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
203202
styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
204203
className
205204
)}
206-
aria-label={ariaLabel}
207205
{...ouiaProps}
208206
{...(isLiveRegion && {
209207
'aria-live': 'polite',

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

Lines changed: 0 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
exports[`Alert Alert - danger Action Link 1`] = `
44
<DocumentFragment>
55
<div
6-
aria-label="Danger Alert"
76
class="pf-c-alert pf-m-danger"
87
data-ouia-component-id="OUIA-Generated-Alert-danger-4"
98
data-ouia-component-type="PF4/Alert"
@@ -61,7 +60,6 @@ exports[`Alert Alert - danger Action Link 1`] = `
6160
exports[`Alert Alert - danger Action and Title 1`] = `
6261
<DocumentFragment>
6362
<div
64-
aria-label="Danger Alert"
6563
class="pf-c-alert pf-m-danger"
6664
data-ouia-component-id="OUIA-Generated-Alert-danger-6"
6765
data-ouia-component-type="PF4/Alert"
@@ -224,7 +222,6 @@ exports[`Alert Alert - danger Custom icon 1`] = `
224222
exports[`Alert Alert - danger Description 1`] = `
225223
<DocumentFragment>
226224
<div
227-
aria-label="Danger Alert"
228225
class="pf-c-alert pf-m-danger"
229226
data-ouia-component-id="OUIA-Generated-Alert-danger-1"
230227
data-ouia-component-type="PF4/Alert"
@@ -268,7 +265,6 @@ exports[`Alert Alert - danger Description 1`] = `
268265
exports[`Alert Alert - danger Heading level 1`] = `
269266
<DocumentFragment>
270267
<div
271-
aria-label="Danger Alert"
272268
class="pf-c-alert pf-m-danger"
273269
data-ouia-component-id="OUIA-Generated-Alert-danger-3"
274270
data-ouia-component-type="PF4/Alert"
@@ -313,7 +309,6 @@ exports[`Alert Alert - danger Heading level 1`] = `
313309
exports[`Alert Alert - danger Title 1`] = `
314310
<DocumentFragment>
315311
<div
316-
aria-label="Danger Alert"
317312
class="pf-c-alert pf-m-danger"
318313
data-ouia-component-id="OUIA-Generated-Alert-danger-2"
319314
data-ouia-component-type="PF4/Alert"
@@ -405,7 +400,6 @@ exports[`Alert Alert - danger Toast alerts match snapsnot 1`] = `
405400
exports[`Alert Alert - danger expandable variation 1`] = `
406401
<DocumentFragment>
407402
<div
408-
aria-label="Danger Alert"
409403
class="pf-c-alert pf-m-expandable pf-m-danger"
410404
data-ouia-component-id="OUIA-Generated-Alert-danger-9"
411405
data-ouia-component-type="PF4/Alert"
@@ -477,7 +471,6 @@ exports[`Alert Alert - danger expandable variation 1`] = `
477471
exports[`Alert Alert - danger inline variation 1`] = `
478472
<DocumentFragment>
479473
<div
480-
aria-label="Danger Alert"
481474
class="pf-c-alert pf-m-inline pf-m-danger"
482475
data-ouia-component-id="OUIA-Generated-Alert-danger-8"
483476
data-ouia-component-type="PF4/Alert"
@@ -522,7 +515,6 @@ exports[`Alert Alert - danger inline variation 1`] = `
522515
exports[`Alert Alert - default Action Link 1`] = `
523516
<DocumentFragment>
524517
<div
525-
aria-label="Default Alert"
526518
class="pf-c-alert"
527519
data-ouia-component-id="OUIA-Generated-Alert-default-5"
528520
data-ouia-component-type="PF4/Alert"
@@ -580,7 +572,6 @@ exports[`Alert Alert - default Action Link 1`] = `
580572
exports[`Alert Alert - default Action and Title 1`] = `
581573
<DocumentFragment>
582574
<div
583-
aria-label="Default Alert"
584575
class="pf-c-alert"
585576
data-ouia-component-id="OUIA-Generated-Alert-default-7"
586577
data-ouia-component-type="PF4/Alert"
@@ -743,7 +734,6 @@ exports[`Alert Alert - default Custom icon 1`] = `
743734
exports[`Alert Alert - default Description 1`] = `
744735
<DocumentFragment>
745736
<div
746-
aria-label="Default Alert"
747737
class="pf-c-alert"
748738
data-ouia-component-id="OUIA-Generated-Alert-default-2"
749739
data-ouia-component-type="PF4/Alert"
@@ -787,7 +777,6 @@ exports[`Alert Alert - default Description 1`] = `
787777
exports[`Alert Alert - default Heading level 1`] = `
788778
<DocumentFragment>
789779
<div
790-
aria-label="Default Alert"
791780
class="pf-c-alert"
792781
data-ouia-component-id="OUIA-Generated-Alert-default-4"
793782
data-ouia-component-type="PF4/Alert"
@@ -832,7 +821,6 @@ exports[`Alert Alert - default Heading level 1`] = `
832821
exports[`Alert Alert - default Title 1`] = `
833822
<DocumentFragment>
834823
<div
835-
aria-label="Default Alert"
836824
class="pf-c-alert"
837825
data-ouia-component-id="OUIA-Generated-Alert-default-3"
838826
data-ouia-component-type="PF4/Alert"
@@ -924,7 +912,6 @@ exports[`Alert Alert - default Toast alerts match snapsnot 1`] = `
924912
exports[`Alert Alert - default expandable variation 1`] = `
925913
<DocumentFragment>
926914
<div
927-
aria-label="Default Alert"
928915
class="pf-c-alert pf-m-expandable"
929916
data-ouia-component-id="OUIA-Generated-Alert-default-10"
930917
data-ouia-component-type="PF4/Alert"
@@ -996,7 +983,6 @@ exports[`Alert Alert - default expandable variation 1`] = `
996983
exports[`Alert Alert - default inline variation 1`] = `
997984
<DocumentFragment>
998985
<div
999-
aria-label="Default Alert"
1000986
class="pf-c-alert pf-m-inline"
1001987
data-ouia-component-id="OUIA-Generated-Alert-default-9"
1002988
data-ouia-component-type="PF4/Alert"
@@ -1041,7 +1027,6 @@ exports[`Alert Alert - default inline variation 1`] = `
10411027
exports[`Alert Alert - info Action Link 1`] = `
10421028
<DocumentFragment>
10431029
<div
1044-
aria-label="Info Alert"
10451030
class="pf-c-alert pf-m-info"
10461031
data-ouia-component-id="OUIA-Generated-Alert-info-4"
10471032
data-ouia-component-type="PF4/Alert"
@@ -1099,7 +1084,6 @@ exports[`Alert Alert - info Action Link 1`] = `
10991084
exports[`Alert Alert - info Action and Title 1`] = `
11001085
<DocumentFragment>
11011086
<div
1102-
aria-label="Info Alert"
11031087
class="pf-c-alert pf-m-info"
11041088
data-ouia-component-id="OUIA-Generated-Alert-info-6"
11051089
data-ouia-component-type="PF4/Alert"
@@ -1262,7 +1246,6 @@ exports[`Alert Alert - info Custom icon 1`] = `
12621246
exports[`Alert Alert - info Description 1`] = `
12631247
<DocumentFragment>
12641248
<div
1265-
aria-label="Info Alert"
12661249
class="pf-c-alert pf-m-info"
12671250
data-ouia-component-id="OUIA-Generated-Alert-info-1"
12681251
data-ouia-component-type="PF4/Alert"
@@ -1306,7 +1289,6 @@ exports[`Alert Alert - info Description 1`] = `
13061289
exports[`Alert Alert - info Heading level 1`] = `
13071290
<DocumentFragment>
13081291
<div
1309-
aria-label="Info Alert"
13101292
class="pf-c-alert pf-m-info"
13111293
data-ouia-component-id="OUIA-Generated-Alert-info-3"
13121294
data-ouia-component-type="PF4/Alert"
@@ -1351,7 +1333,6 @@ exports[`Alert Alert - info Heading level 1`] = `
13511333
exports[`Alert Alert - info Title 1`] = `
13521334
<DocumentFragment>
13531335
<div
1354-
aria-label="Info Alert"
13551336
class="pf-c-alert pf-m-info"
13561337
data-ouia-component-id="OUIA-Generated-Alert-info-2"
13571338
data-ouia-component-type="PF4/Alert"
@@ -1443,7 +1424,6 @@ exports[`Alert Alert - info Toast alerts match snapsnot 1`] = `
14431424
exports[`Alert Alert - info expandable variation 1`] = `
14441425
<DocumentFragment>
14451426
<div
1446-
aria-label="Info Alert"
14471427
class="pf-c-alert pf-m-expandable pf-m-info"
14481428
data-ouia-component-id="OUIA-Generated-Alert-info-9"
14491429
data-ouia-component-type="PF4/Alert"
@@ -1515,7 +1495,6 @@ exports[`Alert Alert - info expandable variation 1`] = `
15151495
exports[`Alert Alert - info inline variation 1`] = `
15161496
<DocumentFragment>
15171497
<div
1518-
aria-label="Info Alert"
15191498
class="pf-c-alert pf-m-inline pf-m-info"
15201499
data-ouia-component-id="OUIA-Generated-Alert-info-8"
15211500
data-ouia-component-type="PF4/Alert"
@@ -1560,7 +1539,6 @@ exports[`Alert Alert - info inline variation 1`] = `
15601539
exports[`Alert Alert - success Action Link 1`] = `
15611540
<DocumentFragment>
15621541
<div
1563-
aria-label="Success Alert"
15641542
class="pf-c-alert pf-m-success"
15651543
data-ouia-component-id="OUIA-Generated-Alert-success-4"
15661544
data-ouia-component-type="PF4/Alert"
@@ -1618,7 +1596,6 @@ exports[`Alert Alert - success Action Link 1`] = `
16181596
exports[`Alert Alert - success Action and Title 1`] = `
16191597
<DocumentFragment>
16201598
<div
1621-
aria-label="Success Alert"
16221599
class="pf-c-alert pf-m-success"
16231600
data-ouia-component-id="OUIA-Generated-Alert-success-6"
16241601
data-ouia-component-type="PF4/Alert"
@@ -1781,7 +1758,6 @@ exports[`Alert Alert - success Custom icon 1`] = `
17811758
exports[`Alert Alert - success Description 1`] = `
17821759
<DocumentFragment>
17831760
<div
1784-
aria-label="Success Alert"
17851761
class="pf-c-alert pf-m-success"
17861762
data-ouia-component-id="OUIA-Generated-Alert-success-1"
17871763
data-ouia-component-type="PF4/Alert"
@@ -1825,7 +1801,6 @@ exports[`Alert Alert - success Description 1`] = `
18251801
exports[`Alert Alert - success Heading level 1`] = `
18261802
<DocumentFragment>
18271803
<div
1828-
aria-label="Success Alert"
18291804
class="pf-c-alert pf-m-success"
18301805
data-ouia-component-id="OUIA-Generated-Alert-success-3"
18311806
data-ouia-component-type="PF4/Alert"
@@ -1870,7 +1845,6 @@ exports[`Alert Alert - success Heading level 1`] = `
18701845
exports[`Alert Alert - success Title 1`] = `
18711846
<DocumentFragment>
18721847
<div
1873-
aria-label="Success Alert"
18741848
class="pf-c-alert pf-m-success"
18751849
data-ouia-component-id="OUIA-Generated-Alert-success-2"
18761850
data-ouia-component-type="PF4/Alert"
@@ -1962,7 +1936,6 @@ exports[`Alert Alert - success Toast alerts match snapsnot 1`] = `
19621936
exports[`Alert Alert - success expandable variation 1`] = `
19631937
<DocumentFragment>
19641938
<div
1965-
aria-label="Success Alert"
19661939
class="pf-c-alert pf-m-expandable pf-m-success"
19671940
data-ouia-component-id="OUIA-Generated-Alert-success-9"
19681941
data-ouia-component-type="PF4/Alert"
@@ -2034,7 +2007,6 @@ exports[`Alert Alert - success expandable variation 1`] = `
20342007
exports[`Alert Alert - success inline variation 1`] = `
20352008
<DocumentFragment>
20362009
<div
2037-
aria-label="Success Alert"
20382010
class="pf-c-alert pf-m-inline pf-m-success"
20392011
data-ouia-component-id="OUIA-Generated-Alert-success-8"
20402012
data-ouia-component-type="PF4/Alert"
@@ -2079,7 +2051,6 @@ exports[`Alert Alert - success inline variation 1`] = `
20792051
exports[`Alert Alert - warning Action Link 1`] = `
20802052
<DocumentFragment>
20812053
<div
2082-
aria-label="Warning Alert"
20832054
class="pf-c-alert pf-m-warning"
20842055
data-ouia-component-id="OUIA-Generated-Alert-warning-4"
20852056
data-ouia-component-type="PF4/Alert"
@@ -2137,7 +2108,6 @@ exports[`Alert Alert - warning Action Link 1`] = `
21372108
exports[`Alert Alert - warning Action and Title 1`] = `
21382109
<DocumentFragment>
21392110
<div
2140-
aria-label="Warning Alert"
21412111
class="pf-c-alert pf-m-warning"
21422112
data-ouia-component-id="OUIA-Generated-Alert-warning-6"
21432113
data-ouia-component-type="PF4/Alert"
@@ -2300,7 +2270,6 @@ exports[`Alert Alert - warning Custom icon 1`] = `
23002270
exports[`Alert Alert - warning Description 1`] = `
23012271
<DocumentFragment>
23022272
<div
2303-
aria-label="Warning Alert"
23042273
class="pf-c-alert pf-m-warning"
23052274
data-ouia-component-id="OUIA-Generated-Alert-warning-1"
23062275
data-ouia-component-type="PF4/Alert"
@@ -2344,7 +2313,6 @@ exports[`Alert Alert - warning Description 1`] = `
23442313
exports[`Alert Alert - warning Heading level 1`] = `
23452314
<DocumentFragment>
23462315
<div
2347-
aria-label="Warning Alert"
23482316
class="pf-c-alert pf-m-warning"
23492317
data-ouia-component-id="OUIA-Generated-Alert-warning-3"
23502318
data-ouia-component-type="PF4/Alert"
@@ -2389,7 +2357,6 @@ exports[`Alert Alert - warning Heading level 1`] = `
23892357
exports[`Alert Alert - warning Title 1`] = `
23902358
<DocumentFragment>
23912359
<div
2392-
aria-label="Warning Alert"
23932360
class="pf-c-alert pf-m-warning"
23942361
data-ouia-component-id="OUIA-Generated-Alert-warning-2"
23952362
data-ouia-component-type="PF4/Alert"
@@ -2481,7 +2448,6 @@ exports[`Alert Alert - warning Toast alerts match snapsnot 1`] = `
24812448
exports[`Alert Alert - warning expandable variation 1`] = `
24822449
<DocumentFragment>
24832450
<div
2484-
aria-label="Warning Alert"
24852451
class="pf-c-alert pf-m-expandable pf-m-warning"
24862452
data-ouia-component-id="OUIA-Generated-Alert-warning-9"
24872453
data-ouia-component-type="PF4/Alert"
@@ -2553,7 +2519,6 @@ exports[`Alert Alert - warning expandable variation 1`] = `
25532519
exports[`Alert Alert - warning inline variation 1`] = `
25542520
<DocumentFragment>
25552521
<div
2556-
aria-label="Warning Alert"
25572522
class="pf-c-alert pf-m-inline pf-m-warning"
25582523
data-ouia-component-id="OUIA-Generated-Alert-warning-8"
25592524
data-ouia-component-type="PF4/Alert"

‎packages/react-core/src/components/Masthead/examples/Masthead.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ import React from 'react';
2323
import { Masthead, MastheadToggle, MastheadMain, MastheadBrand, MastheadContent, Button } from '@patternfly/react-core';
2424
import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
2525

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

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

219-
<Masthead id="basic">
219+
<Masthead id="icon-router-link">
220220
<MastheadToggle>
221221
<Button variant="plain" onClick={() => {}} aria-label="Global navigation">
222222
<BarsIcon />

‎packages/react-core/src/components/Menu/MenuGroup.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export interface MenuGroupProps extends React.HTMLProps<HTMLElement> {
1313
titleId?: string;
1414
/** Forwarded ref */
1515
innerRef?: React.Ref<any>;
16+
/** Group label heading level. Default is h1. */
17+
labelHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
1618
}
1719

1820
const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
@@ -21,13 +23,14 @@ const MenuGroupBase: React.FunctionComponent<MenuGroupProps> = ({
2123
label = '',
2224
titleId = '',
2325
innerRef,
26+
labelHeadingLevel: HeadingLevel = 'h1',
2427
...props
2528
}: MenuGroupProps) => (
2629
<section {...props} className={css('pf-c-menu__group', className)} ref={innerRef}>
2730
{label && (
28-
<h1 className={css(styles.menuGroupTitle)} id={titleId}>
31+
<HeadingLevel className={css(styles.menuGroupTitle)} id={titleId}>
2932
{label}
30-
</h1>
33+
</HeadingLevel>
3134
)}
3235
{children}
3336
</section>

0 commit comments

Comments
 (0)