Skip to content

Commit 835cd10

Browse files
ypatadia-eightfoldypatadia-eightfold
authored
Merge branch 'main' into ypatadia/ENG-132612/dropdown-accessibility-changes
2 parents 8c8acac + cb18460 commit 835cd10

File tree

7 files changed

+75
-33
lines changed

7 files changed

+75
-33
lines changed

‎src/components/Accordion/Accordion.tsx

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import React, {
77
useContext,
88
useEffect,
99
useState,
10+
useRef,
1011
} from 'react';
1112
import GradientContext, { Gradient } from '../ConfigProvider/GradientContext';
1213
import { OcThemeName } from '../ConfigProvider';
@@ -55,6 +56,14 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
5556
size,
5657
...rest
5758
}) => {
59+
const buttonRef = useRef<HTMLButtonElement>(null);
60+
61+
useEffect(() => {
62+
if (buttonRef.current) {
63+
buttonRef.current.removeAttribute('aria-disabled');
64+
}
65+
}, []);
66+
5867
const headerClassnames = mergeClasses([
5968
styles.accordionSummary,
6069
classNames,
@@ -88,7 +97,6 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
8897
<div className={headerClassnames} id={`${id}-header`} {...rest}>
8998
<div
9099
aria-controls={`${id}-content`}
91-
aria-label={expanded ? expandAriaLabelText : collapseAriaLabelText}
92100
aria-expanded={expanded}
93101
aria-describedby={expandButtonDescribedBy || `${id}-header-content`}
94102
className={styles.clickableArea}
@@ -108,10 +116,9 @@ export const AccordionSummary: FC<AccordionSummaryProps> = ({
108116
{badgeProps && <Badge classNames={styles.badge} {...badgeProps} />}
109117
</div>
110118
<Button
119+
ref={buttonRef}
111120
tabIndex={-1}
112-
aria-controls={`${id}-content`}
113-
ariaLabel={expanded ? expandAriaLabelText : collapseAriaLabelText}
114-
disabled={disabled}
121+
role="presentation"
115122
gradient={gradient}
116123
iconProps={{ classNames: iconButtonClassNames, ...expandIconProps }}
117124
onClick={onIconButtonClick}

‎src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

Lines changed: 7 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ exports[`Accordion Accordion is large 1`] = `
1414
aria-controls="myAccordionId-content"
1515
aria-describedby="myAccordionId-header-content"
1616
aria-expanded="false"
17-
aria-label="Accordion"
1817
class="clickable-area"
1918
role="button"
2019
tabindex="0"
@@ -53,10 +52,8 @@ exports[`Accordion Accordion is large 1`] = `
5352
</span>
5453
</div>
5554
<button
56-
aria-controls="myAccordionId-content"
57-
aria-disabled="false"
58-
aria-label="Accordion"
5955
class="button button-neutral button-medium round-shape icon-left"
56+
role="presentation"
6057
tabindex="-1"
6158
>
6259
<span
@@ -111,7 +108,6 @@ exports[`Accordion Accordion is medium 1`] = `
111108
aria-controls="myAccordionId-content"
112109
aria-describedby="myAccordionId-header-content"
113110
aria-expanded="false"
114-
aria-label="Accordion"
115111
class="clickable-area"
116112
role="button"
117113
tabindex="0"
@@ -150,10 +146,8 @@ exports[`Accordion Accordion is medium 1`] = `
150146
</span>
151147
</div>
152148
<button
153-
aria-controls="myAccordionId-content"
154-
aria-disabled="false"
155-
aria-label="Accordion"
156149
class="button button-neutral button-medium round-shape icon-left"
150+
role="presentation"
157151
tabindex="-1"
158152
>
159153
<span
@@ -208,7 +202,6 @@ exports[`Accordion Accordion is not bordered 1`] = `
208202
aria-controls="myAccordionId-content"
209203
aria-describedby="myAccordionId-header-content"
210204
aria-expanded="false"
211-
aria-label="Accordion"
212205
class="clickable-area"
213206
role="button"
214207
tabindex="0"
@@ -247,10 +240,8 @@ exports[`Accordion Accordion is not bordered 1`] = `
247240
</span>
248241
</div>
249242
<button
250-
aria-controls="myAccordionId-content"
251-
aria-disabled="false"
252-
aria-label="Accordion"
253243
class="button button-neutral button-medium round-shape icon-left"
244+
role="presentation"
254245
tabindex="-1"
255246
>
256247
<span
@@ -305,7 +296,6 @@ exports[`Accordion Accordion is pill shaped 1`] = `
305296
aria-controls="myAccordionId-content"
306297
aria-describedby="myAccordionId-header-content"
307298
aria-expanded="false"
308-
aria-label="Accordion"
309299
class="clickable-area"
310300
role="button"
311301
tabindex="0"
@@ -344,10 +334,8 @@ exports[`Accordion Accordion is pill shaped 1`] = `
344334
</span>
345335
</div>
346336
<button
347-
aria-controls="myAccordionId-content"
348-
aria-disabled="false"
349-
aria-label="Accordion"
350337
class="button button-neutral button-medium round-shape icon-left"
338+
role="presentation"
351339
tabindex="-1"
352340
>
353341
<span
@@ -402,7 +390,6 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
402390
aria-controls="myAccordionId-content"
403391
aria-describedby="myAccordionId-header-content"
404392
aria-expanded="false"
405-
aria-label="Accordion"
406393
class="clickable-area"
407394
role="button"
408395
tabindex="0"
@@ -441,10 +428,8 @@ exports[`Accordion Accordion is rectangle shaped 1`] = `
441428
</span>
442429
</div>
443430
<button
444-
aria-controls="myAccordionId-content"
445-
aria-disabled="false"
446-
aria-label="Accordion"
447431
class="button button-neutral button-medium round-shape icon-left"
432+
role="presentation"
448433
tabindex="-1"
449434
>
450435
<span
@@ -500,7 +485,6 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
500485
aria-controls="myAccordionId-content"
501486
aria-describedby="myAccordionId-header-content"
502487
aria-expanded="true"
503-
aria-label="Accordion"
504488
class="clickable-area"
505489
role="button"
506490
tabindex="0"
@@ -637,10 +621,8 @@ exports[`Accordion Accordion renders custom content and its buttons are clickabl
637621
</span>
638622
</div>
639623
<button
640-
aria-controls="myAccordionId-content"
641-
aria-disabled="false"
642-
aria-label="Accordion"
643624
class="button button-neutral button-medium round-shape icon-left"
625+
role="presentation"
644626
tabindex="-1"
645627
>
646628
<span
@@ -695,7 +677,6 @@ exports[`Accordion Renders without crashing 1`] = `
695677
aria-controls="myAccordionId-content"
696678
aria-describedby="myAccordionId-header-content"
697679
aria-expanded="false"
698-
aria-label="Accordion"
699680
class="clickable-area"
700681
role="button"
701682
tabindex="0"
@@ -734,10 +715,8 @@ exports[`Accordion Renders without crashing 1`] = `
734715
</span>
735716
</div>
736717
<button
737-
aria-controls="myAccordionId-content"
738-
aria-disabled="false"
739-
aria-label="Accordion"
740718
class="button button-neutral button-medium round-shape icon-left"
719+
role="presentation"
741720
tabindex="-1"
742721
>
743722
<span

‎src/components/Avatar/Avatar.tsx

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,6 +257,11 @@ const AvatarFallback: FC<AvatarFallbackProps> = React.forwardRef(
257257
style,
258258
theme,
259259
tabIndex = 0,
260+
id = 'avatar-id',
261+
ariaLabel,
262+
roleSet,
263+
ariaDescribedBy,
264+
ariaOwns,
260265
},
261266
ref: Ref<HTMLDivElement>
262267
) => {
@@ -290,6 +295,11 @@ const AvatarFallback: FC<AvatarFallbackProps> = React.forwardRef(
290295

291296
return (
292297
<div
298+
id={id}
299+
aria-label={ariaLabel}
300+
aria-owns={ariaOwns}
301+
aria-describedby={ariaDescribedBy}
302+
role={roleSet}
293303
ref={ref}
294304
className={avatarClasses}
295305
onClick={onClick}
@@ -369,6 +379,11 @@ export const Avatar: FC<AvatarProps> = React.forwardRef(
369379
tooltipProps = undefined,
370380
type = 'square',
371381
tabIndex = 0,
382+
id = 'avatar-id',
383+
ariaLabel,
384+
roleSet,
385+
ariaDescribedBy,
386+
ariaOwns,
372387
},
373388
ref: Ref<HTMLDivElement>
374389
) => {
@@ -582,6 +597,11 @@ export const Avatar: FC<AvatarProps> = React.forwardRef(
582597
)}
583598
>
584599
<AvatarFallback
600+
id={id}
601+
ariaLabel={ariaLabel}
602+
ariaOwns={ariaOwns}
603+
ariaDescribedBy={ariaDescribedBy}
604+
roleSet={roleSet}
585605
classNames={wrapperClassNames}
586606
hashingFunction={hashingFunction}
587607
onClick={onClick}

‎src/components/Avatar/Avatar.types.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -160,6 +160,10 @@ export interface BaseAvatarProps extends OcBaseProps<HTMLDivElement> {
160160
* @default 'square'
161161
*/
162162
type?: 'round' | 'square';
163+
ariaLabel?: string;
164+
roleSet?: string;
165+
ariaDescribedBy?: string;
166+
ariaOwns?: string;
163167
}
164168

165169
export interface AvatarPopupProps extends PopupProps {}
@@ -188,6 +192,10 @@ export interface AvatarProps
188192
* Hover tooltip
189193
*/
190194
tooltipProps?: TooltipProps;
195+
ariaLabel?: string;
196+
roleSet?: string;
197+
ariaDescribedBy?: string;
198+
ariaOwns?: string;
191199
}
192200

193201
interface MaxAvatarProps extends BaseAvatarProps {
@@ -267,4 +275,7 @@ export interface AvatarGroupProps extends OcBaseProps<HTMLDivElement> {
267275
* @default 'square'
268276
*/
269277
type?: 'round' | 'square';
278+
ariaLabel?: string;
279+
roleSet?: string;
280+
tooltipId?: string;
270281
}

‎src/components/Avatar/AvatarGroup.stories.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,9 @@ const sampleList: User[] = [
7272

7373
const Basic_Story: ComponentStory<typeof AvatarGroup> = (args) => (
7474
<AvatarGroup
75+
tooltipId="avatar-group-tooltip-id"
76+
ariaLabel="interviewers"
77+
roleSet="button"
7578
animateOnHover
7679
maxProps={{
7780
count: 4,
@@ -200,6 +203,9 @@ const Basic_Story: ComponentStory<typeof AvatarGroup> = (args) => (
200203

201204
const List_Story: ComponentStory<typeof AvatarGroup> = (args) => (
202205
<AvatarGroup
206+
tooltipId="avatar-group-tooltip-id"
207+
ariaLabel="interviewers"
208+
roleSet="button"
203209
animateOnHover
204210
avatarListProps={{
205211
items: sampleList,

‎src/components/Avatar/AvatarGroup.tsx

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client';
22

3-
import React, { Ref } from 'react';
3+
import React, { Ref, useEffect } from 'react';
44
import { Avatar } from './Avatar';
55
import { AvatarGroupProps, AvatarGroupVariant } from './Avatar.types';
66
import { List } from '../List';
@@ -27,6 +27,9 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = React.forwardRef(
2727
size,
2828
style,
2929
type,
30+
ariaLabel,
31+
roleSet,
32+
tooltipId,
3033
...rest
3134
},
3235
ref: Ref<HTMLDivElement>
@@ -69,6 +72,11 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = React.forwardRef(
6972
string | React.JSXElementConstructor<any>
7073
> = (
7174
<Avatar
75+
ariaLabel={`${numChildren - maxCount} more ${ariaLabel}`}
76+
ariaOwns={tooltipId}
77+
ariaDescribedBy={tooltipId}
78+
roleSet={roleSet}
79+
id="avatar-group-max-count"
7280
size={size}
7381
type={type}
7482
fontSize={styles.maxCountFontSize}
@@ -96,6 +104,8 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = React.forwardRef(
96104
>
97105
): JSX.Element => (
98106
<Tooltip
107+
tabIndex={-1}
108+
id={tooltipId}
99109
{...maxProps.tooltipProps}
100110
classNames={mergeClasses([
101111
styles.avatarGroupTooltip,

‎src/components/Avatar/__snapshots__/Avatar.test.tsx.snap

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ LoadedCheerio {
55
"0": Node {
66
"attribs": Object {
77
"class": "wrapper-style avatar image-style",
8+
"id": "avatar-id",
89
"style": "width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 18px;",
910
"tabindex": "0",
1011
},
@@ -34,11 +35,13 @@ LoadedCheerio {
3435
"type": "tag",
3536
"x-attribsNamespace": Object {
3637
"class": undefined,
38+
"id": undefined,
3739
"style": undefined,
3840
"tabindex": undefined,
3941
},
4042
"x-attribsPrefix": Object {
4143
"class": undefined,
44+
"id": undefined,
4245
"style": undefined,
4346
"tabindex": undefined,
4447
},
@@ -133,6 +136,7 @@ LoadedCheerio {
133136
"0": Node {
134137
"attribs": Object {
135138
"class": "wrapper-style avatar image-style round",
139+
"id": "avatar-id",
136140
"style": "width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 18px;",
137141
"tabindex": "0",
138142
},
@@ -162,11 +166,13 @@ LoadedCheerio {
162166
"type": "tag",
163167
"x-attribsNamespace": Object {
164168
"class": undefined,
169+
"id": undefined,
165170
"style": undefined,
166171
"tabindex": undefined,
167172
},
168173
"x-attribsPrefix": Object {
169174
"class": undefined,
175+
"id": undefined,
170176
"style": undefined,
171177
"tabindex": undefined,
172178
},
@@ -261,6 +267,7 @@ LoadedCheerio {
261267
"0": Node {
262268
"attribs": Object {
263269
"class": "wrapper-style avatar image-style",
270+
"id": "avatar-id",
264271
"style": "width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 18px;",
265272
"tabindex": "0",
266273
},
@@ -290,11 +297,13 @@ LoadedCheerio {
290297
"type": "tag",
291298
"x-attribsNamespace": Object {
292299
"class": undefined,
300+
"id": undefined,
293301
"style": undefined,
294302
"tabindex": undefined,
295303
},
296304
"x-attribsPrefix": Object {
297305
"class": undefined,
306+
"id": undefined,
298307
"style": undefined,
299308
"tabindex": undefined,
300309
},

0 commit comments

Comments
 (0)