Skip to content

Commit 818d5e1

Browse files
joshblackjoshblack
authored
fix(data-table): update menu to match visible and accessible labels (#4862)
* fix(data-table): update menu to match visible and accessible labels * chore(react): update snapshots
1 parent 91daabb commit 818d5e1

File tree

3 files changed

+29
-21
lines changed

3 files changed

+29
-21
lines changed

‎packages/react/src/components/DataTable/TableToolbarMenu.js

+2
Original file line numberDiff line numberDiff line change
@@ -27,9 +27,11 @@ const TableToolbarMenu = ({
2727
);
2828
return (
2929
<OverflowMenu
30+
ariaLabel={iconDescription}
3031
renderIcon={renderIcon}
3132
className={toolbarActionClasses}
3233
title={iconDescription}
34+
iconDescription={iconDescription}
3335
flipped
3436
{...rest}>
3537
{children}

‎packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

+18-14
Original file line numberDiff line numberDiff line change
@@ -2342,8 +2342,10 @@ exports[`DataTable should render 1`] = `
23422342
}
23432343
>
23442344
<ForwardRef(OverflowMenu)
2345+
ariaLabel="Settings"
23452346
className="bx--toolbar-action bx--overflow-menu"
23462347
flipped={true}
2348+
iconDescription="Settings"
23472349
renderIcon={
23482350
Object {
23492351
"$$typeof": Symbol(react.forward_ref),
@@ -2353,11 +2355,11 @@ exports[`DataTable should render 1`] = `
23532355
title="Settings"
23542356
>
23552357
<OverflowMenu
2356-
ariaLabel="Menu"
2358+
ariaLabel="Settings"
23572359
className="bx--toolbar-action bx--overflow-menu"
23582360
direction="bottom"
23592361
flipped={true}
2360-
iconDescription="open and close list of options"
2362+
iconDescription="Settings"
23612363
innerRef={null}
23622364
light={false}
23632365
menuOffset={[Function]}
@@ -2382,7 +2384,7 @@ exports[`DataTable should render 1`] = `
23822384
<button
23832385
aria-expanded={false}
23842386
aria-haspopup={true}
2385-
aria-label="Menu"
2387+
aria-label="Settings"
23862388
className="bx--toolbar-action bx--overflow-menu bx--overflow-menu"
23872389
onClick={[Function]}
23882390
onClose={[Function]}
@@ -2392,14 +2394,14 @@ exports[`DataTable should render 1`] = `
23922394
title="Settings"
23932395
>
23942396
<ForwardRef(Settings16)
2395-
aria-label="open and close list of options"
2397+
aria-label="Settings"
23962398
className="bx--overflow-menu__icon"
23972399
focusable="false"
23982400
onClick={[Function]}
23992401
onKeyDown={[Function]}
24002402
>
24012403
<Icon
2402-
aria-label="open and close list of options"
2404+
aria-label="Settings"
24032405
className="bx--overflow-menu__icon"
24042406
focusable="false"
24052407
height={16}
@@ -2411,7 +2413,7 @@ exports[`DataTable should render 1`] = `
24112413
xmlns="http://www.w3.org/2000/svg"
24122414
>
24132415
<svg
2414-
aria-label="open and close list of options"
2416+
aria-label="Settings"
24152417
className="bx--overflow-menu__icon"
24162418
focusable="false"
24172419
height={16}
@@ -2435,7 +2437,7 @@ exports[`DataTable should render 1`] = `
24352437
d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8 c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
24362438
/>
24372439
<title>
2438-
open and close list of options
2440+
Settings
24392441
</title>
24402442
</svg>
24412443
</Icon>
@@ -3317,8 +3319,10 @@ exports[`DataTable sticky header should render 1`] = `
33173319
}
33183320
>
33193321
<ForwardRef(OverflowMenu)
3322+
ariaLabel="Settings"
33203323
className="bx--toolbar-action bx--overflow-menu"
33213324
flipped={true}
3325+
iconDescription="Settings"
33223326
renderIcon={
33233327
Object {
33243328
"$$typeof": Symbol(react.forward_ref),
@@ -3328,11 +3332,11 @@ exports[`DataTable sticky header should render 1`] = `
33283332
title="Settings"
33293333
>
33303334
<OverflowMenu
3331-
ariaLabel="Menu"
3335+
ariaLabel="Settings"
33323336
className="bx--toolbar-action bx--overflow-menu"
33333337
direction="bottom"
33343338
flipped={true}
3335-
iconDescription="open and close list of options"
3339+
iconDescription="Settings"
33363340
innerRef={null}
33373341
light={false}
33383342
menuOffset={[Function]}
@@ -3357,7 +3361,7 @@ exports[`DataTable sticky header should render 1`] = `
33573361
<button
33583362
aria-expanded={false}
33593363
aria-haspopup={true}
3360-
aria-label="Menu"
3364+
aria-label="Settings"
33613365
className="bx--toolbar-action bx--overflow-menu bx--overflow-menu"
33623366
onClick={[Function]}
33633367
onClose={[Function]}
@@ -3367,14 +3371,14 @@ exports[`DataTable sticky header should render 1`] = `
33673371
title="Settings"
33683372
>
33693373
<ForwardRef(Settings16)
3370-
aria-label="open and close list of options"
3374+
aria-label="Settings"
33713375
className="bx--overflow-menu__icon"
33723376
focusable="false"
33733377
onClick={[Function]}
33743378
onKeyDown={[Function]}
33753379
>
33763380
<Icon
3377-
aria-label="open and close list of options"
3381+
aria-label="Settings"
33783382
className="bx--overflow-menu__icon"
33793383
focusable="false"
33803384
height={16}
@@ -3386,7 +3390,7 @@ exports[`DataTable sticky header should render 1`] = `
33863390
xmlns="http://www.w3.org/2000/svg"
33873391
>
33883392
<svg
3389-
aria-label="open and close list of options"
3393+
aria-label="Settings"
33903394
className="bx--overflow-menu__icon"
33913395
focusable="false"
33923396
height={16}
@@ -3410,7 +3414,7 @@ exports[`DataTable sticky header should render 1`] = `
34103414
d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8 c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"
34113415
/>
34123416
<title>
3413-
open and close list of options
3417+
Settings
34143418
</title>
34153419
</svg>
34163420
</Icon>

‎packages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap

+9-7
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,10 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
1212
}
1313
>
1414
<ForwardRef(OverflowMenu)
15+
ariaLabel="Add"
1516
className="custom-class bx--toolbar-action bx--overflow-menu"
1617
flipped={true}
18+
iconDescription="Add"
1719
renderIcon={
1820
Object {
1921
"$$typeof": Symbol(react.forward_ref),
@@ -23,11 +25,11 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
2325
title="Add"
2426
>
2527
<OverflowMenu
26-
ariaLabel="Menu"
28+
ariaLabel="Add"
2729
className="custom-class bx--toolbar-action bx--overflow-menu"
2830
direction="bottom"
2931
flipped={true}
30-
iconDescription="open and close list of options"
32+
iconDescription="Add"
3133
innerRef={null}
3234
light={false}
3335
menuOffset={[Function]}
@@ -52,7 +54,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
5254
<button
5355
aria-expanded={false}
5456
aria-haspopup={true}
55-
aria-label="Menu"
57+
aria-label="Add"
5658
className="custom-class bx--toolbar-action bx--overflow-menu bx--overflow-menu"
5759
onClick={[Function]}
5860
onClose={[Function]}
@@ -62,14 +64,14 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
6264
title="Add"
6365
>
6466
<ForwardRef(Download16)
65-
aria-label="open and close list of options"
67+
aria-label="Add"
6668
className="bx--overflow-menu__icon"
6769
focusable="false"
6870
onClick={[Function]}
6971
onKeyDown={[Function]}
7072
>
7173
<Icon
72-
aria-label="open and close list of options"
74+
aria-label="Add"
7375
className="bx--overflow-menu__icon"
7476
focusable="false"
7577
height={16}
@@ -81,7 +83,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
8183
xmlns="http://www.w3.org/2000/svg"
8284
>
8385
<svg
84-
aria-label="open and close list of options"
86+
aria-label="Add"
8587
className="bx--overflow-menu__icon"
8688
focusable="false"
8789
height={16}
@@ -102,7 +104,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
102104
d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"
103105
/>
104106
<title>
105-
open and close list of options
107+
Add
106108
</title>
107109
</svg>
108110
</Icon>

0 commit comments

Comments
 (0)