Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 4 commits into from
Dec 11, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f621e7
fix(data-table): update menu to match visible and accessible labels
joshblack Dec 11, 2019
e51fa40
chore(react): update snapshots
joshblack Dec 11, 2019
6d22c56
Merge branch 'master' into 3743-update-toolbar-violations
joshblack Dec 11, 2019
4c134db
Merge branch 'master' into 3743-update-toolbar-violations
joshblack Dec 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/react/src/components/DataTable/TableToolbarMenu.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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