fix(overflow-menu): update aria-label and roles, made ul a sibling (c…

…arbon-design-system#2906) * fix(overflow-menu): updated aria-label and roles, made ul a sibling * fix(overflow-menu): removing unused var * fix(overflow-menu): update snapshots * chore(project): use yarn policies to set version to 1.16.0 (carbon-design-system#2902) * chore(project): use yarn policies to set version to 1.16.0 * chore(project): update prettier to ignore .yarn folder * fix(modal): support different numbers of buttons (carbon-design-system#2900) Fixes carbon-design-system#2325. * chore(examples): build examples based on whitelist (carbon-design-system#2903) * chore(release): v10.3.0-rc.2 (carbon-design-system#2908) * fix(overflow-menu): update defaultprops for Menu * fix(overflow-menu): removed add'l this.props * fix(overflow-menu): update snapshots * fix(radio-button): group-level label/button alignment (carbon-design-system#2914) Fixes carbon-design-system#2286. * Fix sass error (carbon-design-system#2905) * chore(deps): bump sshpk in /packages/react/examples/create-react-app (carbon-design-system#2915) Bumps [sshpk](https://github.com/joyent/node-sshpk) from 1.13.1 to 1.16.1. - [Release notes](https://github.com/joyent/node-sshpk/releases) - [Commits](TritonDataCenter/node-sshpk@v1.13.1...v1.16.1) * fix(overflow-menu): rollback ul changes * fix(tooltip): set width to content max (carbon-design-system#2923) * chore(deps): bump safer-eval (carbon-design-system#2930) Bumps [safer-eval](https://github.com/commenthol/safer-eval) from 1.2.3 to 1.3.3. - [Release notes](https://github.com/commenthol/safer-eval/releases) - [Commits](commenthol/safer-eval@v1.2.3...v1.3.3) Signed-off-by: dependabot[bot] <[email protected]> * chore(deps): bump safer-eval in /packages/colors/examples/preview (carbon-design-system#2931) Bumps [safer-eval](https://github.com/commenthol/safer-eval) from 1.2.3 to 1.3.3. - [Release notes](https://github.com/commenthol/safer-eval/releases) - [Commits](commenthol/safer-eval@v1.2.3...v1.3.3) Signed-off-by: dependabot[bot] <[email protected]> * fix(button): require iconDescription for icon-only (carbon-design-system#2929) * fix(Button): require iconDescription for icon-only Fixes carbon-design-system#2884. * chore(test): update snapshots * fix(overflow-menu): update snapshots * Revert "fix(overflow-menu): update snapshots" This reverts commit 1015db6. * fix(overflow-menu): update snapshots * `Revert "fix(overflow-menu): update snapshots" This reverts commit 6fe35a6. * fix(overflow-menu): update snapshots * chore(react): remove redundant version field
joshblack · Jun 12, 2019 · 5cc00bb · 5cc00bb
1 parent 13213de
commit 5cc00bb
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 25 deletions.
diff --git a/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -2593,7 +2593,7 @@ exports[`DataTable should render 1`] = `
                   title="Settings"
                 >
                   <OverflowMenu
-                    ariaLabel="list of options"
+                    ariaLabel="Menu"
                     className="bx--toolbar-action bx--overflow-menu"
                     direction="bottom"
                     flipped={true}
@@ -2642,13 +2642,13 @@ exports[`DataTable should render 1`] = `
                       <div
                         aria-expanded={false}
                         aria-haspopup={true}
-                        aria-label="list of options"
+                        aria-label="Menu"
                         className="bx--toolbar-action bx--overflow-menu bx--overflow-menu"
                         onClick={[Function]}
                         onClose={[Function]}
                         onKeyDown={[Function]}
                         open={false}
-                        role="menu"
+                        role="button"
                         tabIndex={0}
                         title="Settings"
                       >

diff --git a/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap b/...ages/react/src/components/DataTable/__tests__/__snapshots__/TableToolbarMenu-test.js.snap
@@ -65,7 +65,7 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
     title="Add"
   >
     <OverflowMenu
-      ariaLabel="list of options"
+      ariaLabel="Menu"
       className="custom-class bx--toolbar-action bx--overflow-menu"
       direction="bottom"
       flipped={true}
@@ -114,13 +114,13 @@ exports[`DataTable.TableToolbarMenu should render 1`] = `
         <div
           aria-expanded={false}
           aria-haspopup={true}
-          aria-label="list of options"
+          aria-label="Menu"
           className="custom-class bx--toolbar-action bx--overflow-menu bx--overflow-menu"
           onClick={[Function]}
           onClose={[Function]}
           onKeyDown={[Function]}
           open={false}
-          role="menu"
+          role="button"
           tabIndex={0}
           title="Add"
         >

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
@@ -20,7 +20,7 @@ const directions = {
 const props = {
   menu: () => ({
     direction: select('Menu direction (direction)', directions, 'bottom'),
-    ariaLabel: text('ARIA label (ariaLabel)', ''),
+    ariaLabel: text('ARIA label (ariaLabel)', 'Menu'),
     iconDescription: text('Icon description (iconDescription)', ''),
     flipped: boolean('Flipped (flipped)', false),
     onClick: action('onClick'),

diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.js b/packages/react/src/components/OverflowMenu/OverflowMenu.js
@@ -206,7 +206,7 @@ class OverflowMenu extends Component {
   };
 
   static defaultProps = {
-    ariaLabel: 'list of options',
+    ariaLabel: 'Menu',
     iconDescription: 'open and close list of options',
     open: false,
     direction: DIRECTION_BOTTOM,
@@ -493,27 +493,29 @@ class OverflowMenu extends Component {
     );
 
     const menuBody = (
-      <ul className={overflowMenuOptionsClasses} tabIndex="-1" role="menu">
+      <ul
+        className={overflowMenuOptionsClasses}
+        tabIndex="-1"
+        role="menu"
+        aria-label={ariaLabel}>
         {childrenWithProps}
       </ul>
     );
 
     const wrappedMenuBody = (
-      <div role="menuitem">
-        <FloatingMenu
-          menuPosition={this.state.menuPosition}
-          menuDirection={direction}
-          menuOffset={flipped ? menuOffsetFlip : menuOffset}
-          menuRef={this._bindMenuBody}
-          menuEl={this.menuEl}
-          flipped={this.props.flipped}
-          target={this._getTarget}
-          onPlace={this._handlePlace}>
-          {React.cloneElement(menuBody, {
-            'data-floating-menu-direction': direction,
-          })}
-        </FloatingMenu>
-      </div>
+      <FloatingMenu
+        menuPosition={this.state.menuPosition}
+        menuDirection={direction}
+        menuOffset={flipped ? menuOffsetFlip : menuOffset}
+        menuRef={this._bindMenuBody}
+        menuEl={this.menuEl}
+        flipped={this.props.flipped}
+        target={this._getTarget}
+        onPlace={this._handlePlace}>
+        {React.cloneElement(menuBody, {
+          'data-floating-menu-direction': direction,
+        })}
+      </FloatingMenu>
     );
 
     const iconProps = {
@@ -528,7 +530,7 @@ class OverflowMenu extends Component {
       <ClickListener onClickOutside={this.handleClickOutside}>
         <div
           {...other}
-          role="menu"
+          role="button"
           aria-haspopup
           aria-expanded={this.state.open}
           className={overflowMenuClasses}