Skip to content

Commit 799cd61

Browse files
seanforyou23seanforyou23
committed
fix(aria-props): align aria related property names #1529 
1 parent c979ec6 commit 799cd61

File tree

69 files changed

+597
-676
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+597
-676
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,8 @@ export class AboutModal extends React.Component<AboutModalProps, ModalState> {
136136

137137
return ReactDOM.createPortal(
138138
<AboutModalContainer
139-
ariaLabelledbyId={this.ariaLabelledBy}
140-
ariaDescribedById={this.ariaDescribedBy}
139+
aboutModalBoxHeaderId={this.ariaLabelledBy}
140+
aboutModalBoxContentId={this.ariaDescribedBy}
141141
{...props}
142142
/>,
143143
container

‎packages/react-core/src/components/AboutModal/AboutModalContainer.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ export interface AboutModalContainerProps extends React.HTMLProps<HTMLDivElement
3434
/** the URL of the image for the background. */
3535
backgroundImageSrc?: string;
3636
/** id to use for About Modal Box aria labeled by */
37-
ariaLabelledbyId: string;
37+
aboutModalBoxHeaderId: string;
3838
/** id to use for About Modal Box aria described by */
39-
ariaDescribedById: string;
39+
aboutModalBoxContentId: string;
4040
/** Set close button aria label */
4141
closeButtonAriaLabel?: string;
4242
}
@@ -51,9 +51,9 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
5151
brandImageSrc,
5252
brandImageAlt,
5353
backgroundImageSrc,
54-
ariaLabelledbyId,
55-
ariaDescribedById,
5654
closeButtonAriaLabel,
55+
aboutModalBoxHeaderId,
56+
aboutModalBoxContentId,
5757
...props
5858
}: AboutModalContainerProps) => {
5959
if (!isOpen) {
@@ -62,13 +62,17 @@ export const AboutModalContainer: React.FunctionComponent<AboutModalContainerPro
6262
return (
6363
<Backdrop>
6464
<FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }} className={css(styles.bullseye)}>
65-
<AboutModalBox className={className} aria-labelledby={ariaLabelledbyId} aria-describedby={ariaDescribedById}>
65+
<AboutModalBox
66+
className={className}
67+
aria-labelledby={aboutModalBoxHeaderId}
68+
aria-describedby={aboutModalBoxContentId}
69+
>
6670
<AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
67-
<AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
68-
{productName && <AboutModalBoxHeader id={ariaLabelledbyId} productName={productName} />}
71+
<AboutModalBoxCloseButton onClose={onClose} aria-label={closeButtonAriaLabel} />
72+
{productName && <AboutModalBoxHeader id={aboutModalBoxHeaderId} productName={productName} />}
6973
<AboutModalBoxContent
7074
trademark={trademark}
71-
id={ariaDescribedById}
75+
id={aboutModalBoxContentId}
7276
noAboutModalBoxContentContainer={false}
7377
{...props}
7478
>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ test('modal does not call onClose for esc key if it is not open', () => {
4848
expect(props.onClose).not.toBeCalled();
4949
});
5050

51-
test('Each modal is given new ariaDescribedById and ariaLabelledbyId', () => {
51+
test('Each modal is given new aria-describedby and aria-labelledby', () => {
5252
const first = new AboutModal(props);
5353
const second = new AboutModal(props);
5454
expect(first.ariaLabelledBy).not.toBe(second.ariaLabelledBy);

‎packages/react-core/src/components/AboutModal/__tests__/AboutModalContainer.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ const props = {
99
brandImageSrc: 'brandImg...',
1010
brandImageAlt: 'Brand Image',
1111
backgroundImageSrc: 'backgroundImageSrc...',
12-
ariaLabelledbyId: 'ariaLablledbyId',
13-
ariaDescribedById: 'ariaDescribedById'
12+
'aria-labelledby': 'ariaLablledbyId',
13+
'aria-describedby': 'ariaDescribedById'
1414
};
1515
test('About Modal Container Test simple', () => {
1616
const view = shallow(<AboutModalContainer {...props}>This is ModalBox content</AboutModalContainer>);

‎packages/react-core/src/components/AboutModal/__tests__/Generated/AboutModalContainer.test.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ it('AboutModalContainer should match snapshot (auto-generated)', () => {
1919
brandImageSrc={'string'}
2020
brandImageAlt={'string'}
2121
backgroundImageSrc={'string'}
22-
ariaLabelledbyId={'string'}
23-
ariaDescribedById={'string'}
22+
aria-labelledby={'string'}
23+
aria-describedby={'string'}
2424
/>
2525
);
2626
expect(view).toMatchSnapshot();

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ exports[`AboutModal should match snapshot (auto-generated) 1`] = `
55
containerInfo={<div />}
66
>
77
<AboutModalContainer
8-
ariaDescribedById="pf-about-modal-content-0"
9-
ariaLabelledbyId="pf-about-modal-title-0"
8+
aboutModalBoxContentId="pf-about-modal-content-0"
9+
aboutModalBoxHeaderId="pf-about-modal-title-0"
1010
backgroundImageSrc="''"
1111
brandImageAlt="string"
1212
brandImageSrc="string"

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ exports[`About Modal Container Test isOpen 1`] = `
1515
tag="div"
1616
>
1717
<AboutModalBox
18-
aria-describedby="ariaDescribedById"
19-
aria-labelledby="ariaLablledbyId"
2018
className=""
2119
>
2220
<AboutModalBoxBrand
@@ -27,11 +25,11 @@ exports[`About Modal Container Test isOpen 1`] = `
2725
onClose={[Function]}
2826
/>
2927
<AboutModalBoxHeader
30-
id="ariaLablledbyId"
3128
productName="Product Name"
3229
/>
3330
<AboutModalBoxContent
34-
id="ariaDescribedById"
31+
aria-describedby="ariaDescribedById"
32+
aria-labelledby="ariaLablledbyId"
3533
noAboutModalBoxContentContainer={false}
3634
title="Test Modal Container title"
3735
trademark="Trademark and copyright information here"

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

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -127,8 +127,8 @@ exports[`ApplicationLauncher custom icon 1`] = `
127127
data-ouia-safe={true}
128128
>
129129
<DropdownToggle
130+
aria-haspopup={true}
130131
aria-label="Application launcher"
131-
ariaHasPopup={true}
132132
iconComponent={null}
133133
id="pf-toggle-id-5"
134134
isDisabled={false}
@@ -257,8 +257,8 @@ exports[`ApplicationLauncher custom icon 1`] = `
257257
}
258258
>
259259
<Toggle
260+
aria-haspopup={true}
260261
aria-label="Application launcher"
261-
ariaHasPopup={true}
262262
bubbleEvent={false}
263263
className=""
264264
id="pf-toggle-id-5"
@@ -882,8 +882,8 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
882882
data-ouia-safe={true}
883883
>
884884
<DropdownToggle
885+
aria-haspopup={true}
885886
aria-label="Application launcher"
886-
ariaHasPopup={true}
887887
iconComponent={null}
888888
id="pf-toggle-id-3"
889889
isDisabled={false}
@@ -931,8 +931,8 @@ exports[`ApplicationLauncher dropup + right aligned 1`] = `
931931
}
932932
>
933933
<Toggle
934+
aria-haspopup={true}
934935
aria-label="Application launcher"
935-
ariaHasPopup={true}
936936
bubbleEvent={false}
937937
className=""
938938
id="pf-toggle-id-3"
@@ -1158,8 +1158,8 @@ exports[`ApplicationLauncher dropup 1`] = `
11581158
data-ouia-safe={true}
11591159
>
11601160
<DropdownToggle
1161+
aria-haspopup={true}
11611162
aria-label="Application launcher"
1162-
ariaHasPopup={true}
11631163
iconComponent={null}
11641164
id="pf-toggle-id-2"
11651165
isDisabled={false}
@@ -1207,8 +1207,8 @@ exports[`ApplicationLauncher dropup 1`] = `
12071207
}
12081208
>
12091209
<Toggle
1210+
aria-haspopup={true}
12101211
aria-label="Application launcher"
1211-
ariaHasPopup={true}
12121212
bubbleEvent={false}
12131213
className=""
12141214
id="pf-toggle-id-2"
@@ -1434,8 +1434,8 @@ exports[`ApplicationLauncher expanded 1`] = `
14341434
data-ouia-safe={true}
14351435
>
14361436
<DropdownToggle
1437+
aria-haspopup={true}
14371438
aria-label="Application launcher"
1438-
ariaHasPopup={true}
14391439
iconComponent={null}
14401440
id="pf-toggle-id-4"
14411441
isDisabled={false}
@@ -1563,8 +1563,8 @@ exports[`ApplicationLauncher expanded 1`] = `
15631563
}
15641564
>
15651565
<Toggle
1566+
aria-haspopup={true}
15661567
aria-label="Application launcher"
1567-
ariaHasPopup={true}
15681568
bubbleEvent={false}
15691569
className=""
15701570
id="pf-toggle-id-4"
@@ -2185,8 +2185,8 @@ exports[`ApplicationLauncher regular 1`] = `
21852185
data-ouia-safe={true}
21862186
>
21872187
<DropdownToggle
2188+
aria-haspopup={true}
21882189
aria-label="Application launcher"
2189-
ariaHasPopup={true}
21902190
iconComponent={null}
21912191
id="pf-toggle-id-0"
21922192
isDisabled={false}
@@ -2234,8 +2234,8 @@ exports[`ApplicationLauncher regular 1`] = `
22342234
}
22352235
>
22362236
<Toggle
2237+
aria-haspopup={true}
22372238
aria-label="Application launcher"
2238-
ariaHasPopup={true}
22392239
bubbleEvent={false}
22402240
className=""
22412241
id="pf-toggle-id-0"
@@ -2461,8 +2461,8 @@ exports[`ApplicationLauncher right aligned 1`] = `
24612461
data-ouia-safe={true}
24622462
>
24632463
<DropdownToggle
2464+
aria-haspopup={true}
24642465
aria-label="Application launcher"
2465-
ariaHasPopup={true}
24662466
iconComponent={null}
24672467
id="pf-toggle-id-1"
24682468
isDisabled={false}
@@ -2510,8 +2510,8 @@ exports[`ApplicationLauncher right aligned 1`] = `
25102510
}
25112511
>
25122512
<Toggle
2513+
aria-haspopup={true}
25132514
aria-label="Application launcher"
2514-
ariaHasPopup={true}
25152515
bubbleEvent={false}
25162516
className=""
25172517
id="pf-toggle-id-1"

‎packages/react-core/src/components/ChipGroup/Chip.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export class Chip extends React.Component<ChipProps & OUIAProps, ChipState> {
8888
{!isReadOnly && (
8989
<ChipButton
9090
onClick={onClick}
91-
ariaLabel={closeBtnAriaLabel}
91+
aria-label={closeBtnAriaLabel}
9292
id={`remove_${randomId}`}
9393
aria-labelledby={`remove_${randomId} ${randomId}`}
9494
>
@@ -110,7 +110,7 @@ export class Chip extends React.Component<ChipProps & OUIAProps, ChipState> {
110110
{!isReadOnly && (
111111
<ChipButton
112112
onClick={onClick}
113-
ariaLabel={closeBtnAriaLabel}
113+
aria-label={closeBtnAriaLabel}
114114
id={`remove_${randomId}`}
115115
aria-labelledby={`remove_${randomId} ${randomId}`}
116116
>

‎packages/react-core/src/components/ChipGroup/ChipButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Button, ButtonProps } from '../Button';
33

44
export interface ChipButtonProps extends ButtonProps {
55
/** Aria label for chip button */
6-
ariaLabel?: string;
6+
'aria-label'?: string;
77
/** Content rendered inside the chip item */
88
children?: React.ReactNode;
99
/** Additional classes added to the chip item */
@@ -13,7 +13,7 @@ export interface ChipButtonProps extends ButtonProps {
1313
}
1414

1515
export const ChipButton: React.FunctionComponent<ChipButtonProps> = ({
16-
ariaLabel = 'close',
16+
'aria-label': ariaLabel = 'close',
1717
children = null,
1818
className = '',
1919
onClick = () => undefined,

0 commit comments

Comments
 (0)