Skip to content

Commit

Permalink
fix(data-table): update menu to match visible and accessible labels (#…
Browse files Browse the repository at this point in the history 
…4862)

* fix(data-table): update menu to match visible and accessible labels

* chore(react): update snapshots
  • Loading branch information
@joshblack
joshblack committed Jan 6, 2020
1 parent ca15c78 commit 7663fe6
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 21 deletions.
2 changes: 2 additions & 0 deletions packages/react/src/components/DataTable/TableToolbarMenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,11 @@ const TableToolbarMenu = ({
);
return (
<OverflowMenu
ariaLabel={iconDescription}
renderIcon={renderIcon}
className={toolbarActionClasses}
title={iconDescription}
iconDescription={iconDescription}
flipped
{...rest}>
{children}
Expand Down
32 changes: 18 additions & 14 deletions packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2342,8 +2342,10 @@ exports[`DataTable should render 1`] = `
}
>
<ForwardRef(OverflowMenu)
ariaLabel="Settings"
className="bx--toolbar-action bx--overflow-menu"
flipped={true}
iconDescription="Settings"
renderIcon={
Object {
"$$typeof": Symbol(react.forward_ref),
Expand All @@ -2353,11 +2355,11 @@ exports[`DataTable should render 1`] = `
title="Settings"
>
<OverflowMenu
ariaLabel="Menu"
ariaLabel="Settings"
className="bx--toolbar-action bx--overflow-menu"
direction="bottom"
flipped={true}
iconDescription="open and close list of options"
iconDescription="Settings"
innerRef={null}
light={false}
menuOffset={[Function]}
Expand All @@ -2382,7 +2384,7 @@ exports[`DataTable should render 1`] = `
<button
aria-expanded={false}
aria-haspopup={true}
aria-label="Menu"
aria-label="Settings"
className="bx--toolbar-action bx--overflow-menu bx--overflow-menu"
onClick={[Function]}
onClose={[Function]}
Expand All @@ -2392,14 +2394,14 @@ exports[`DataTable should render 1`] = `
title="Settings"
>
<ForwardRef(Settings16)
aria-label="open and close list of options"
aria-label="Settings"
className="bx--overflow-menu__icon"
focusable="false"
onClick={[Function]}
onKeyDown={[Function]}
>
<Icon
aria-label="open and close list of options"
aria-label="Settings"
className="bx--overflow-menu__icon"
focusable="false"
height={16}
Expand All @@ -2411,7 +2413,7 @@ exports[`DataTable should render 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-label="open and close list of options"
aria-label="Settings"
className="bx--overflow-menu__icon"
focusable="false"
height={16}
Expand All @@ -2435,7 +2437,7 @@ exports[`DataTable should render 1`] = `
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"
/>
<title>
open and close list of options
Settings
</title>
</svg>
</Icon>
Expand Down Expand Up @@ -3317,8 +3319,10 @@ exports[`DataTable sticky header should render 1`] = `
}
>
<ForwardRef(OverflowMenu)
ariaLabel="Settings"
className="bx--toolbar-action bx--overflow-menu"
flipped={true}
iconDescription="Settings"
renderIcon={
Object {
"$$typeof": Symbol(react.forward_ref),
Expand All @@ -3328,11 +3332,11 @@ exports[`DataTable sticky header should render 1`] = `
title="Settings"
>
<OverflowMenu
ariaLabel="Menu"
ariaLabel="Settings"
className="bx--toolbar-action bx--overflow-menu"
direction="bottom"
flipped={true}
iconDescription="open and close list of options"
iconDescription="Settings"
innerRef={null}
light={false}
menuOffset={[Function]}
Expand All @@ -3357,7 +3361,7 @@ exports[`DataTable sticky header should render 1`] = `
<button
aria-expanded={false}
aria-haspopup={true}
aria-label="Menu"
aria-label="Settings"
className="bx--toolbar-action bx--overflow-menu bx--overflow-menu"
onClick={[Function]}
onClose={[Function]}
Expand All @@ -3367,14 +3371,14 @@ exports[`DataTable sticky header should render 1`] = `
title="Settings"
>
<ForwardRef(Settings16)
aria-label="open and close list of options"
aria-label="Settings"
className="bx--overflow-menu__icon"
focusable="false"
onClick={[Function]}
onKeyDown={[Function]}
>
<Icon
aria-label="open and close list of options"
aria-label="Settings"
className="bx--overflow-menu__icon"
focusable="false"
height={16}
Expand All @@ -3386,7 +3390,7 @@ exports[`DataTable sticky header should render 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-label="open and close list of options"
aria-label="Settings"
className="bx--overflow-menu__icon"
focusable="false"
height={16}
Expand All @@ -3410,7 +3414,7 @@ exports[`DataTable sticky header should render 1`] = `
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"
/>
<title>
open and close list of options
Settings
</title>
</svg>
</Icon>
Expand Down
16 changes: 9 additions & 7 deletions ...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
}
>
<ForwardRef(OverflowMenu)
ariaLabel="Add"
className="custom-class bx--toolbar-action bx--overflow-menu"
flipped={true}
iconDescription="Add"
renderIcon={
Object {
"$$typeof": Symbol(react.forward_ref),
Expand All @@ -23,11 +25,11 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
title="Add"
>
<OverflowMenu
ariaLabel="Menu"
ariaLabel="Add"
className="custom-class bx--toolbar-action bx--overflow-menu"
direction="bottom"
flipped={true}
iconDescription="open and close list of options"
iconDescription="Add"
innerRef={null}
light={false}
menuOffset={[Function]}
Expand All @@ -52,7 +54,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
<button
aria-expanded={false}
aria-haspopup={true}
aria-label="Menu"
aria-label="Add"
className="custom-class bx--toolbar-action bx--overflow-menu bx--overflow-menu"
onClick={[Function]}
onClose={[Function]}
Expand All @@ -62,14 +64,14 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
title="Add"
>
<ForwardRef(Download16)
aria-label="open and close list of options"
aria-label="Add"
className="bx--overflow-menu__icon"
focusable="false"
onClick={[Function]}
onKeyDown={[Function]}
>
<Icon
aria-label="open and close list of options"
aria-label="Add"
className="bx--overflow-menu__icon"
focusable="false"
height={16}
Expand All @@ -81,7 +83,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-label="open and close list of options"
aria-label="Add"
className="bx--overflow-menu__icon"
focusable="false"
height={16}
Expand All @@ -102,7 +104,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
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"
/>
<title>
open and close list of options
Add
</title>
</svg>
</Icon>
Expand Down

0 comments on commit 7663fe6

Please sign in to comment.