@instructure/ui-menu 10.10.1-snapshot-9 → 10.10.1-snapshot-14

package/CHANGELOG.md

@@ -3,12 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.10.1-snapshot-9](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.10.1-snapshot-9) (2025-02-03)
+## [10.10.1-snapshot-14](https://github.com/instructure/instructure-ui/compare/v10.10.0...v10.10.1-snapshot-14) (2025-02-03)
 
 
 ### Bug Fixes
 
 * **ui-menu:** make Menu.Item apply target prop ([6c85b31](https://github.com/instructure/instructure-ui/commit/6c85b312212edf9f08317d0d6aeb7c28fe1eb3b3))
+* **ui-menu:** screenreaders should read the correct number of menu items ([0670648](https://github.com/instructure/instructure-ui/commit/06706488cd4b550594f7a5b2b52ea674c79b0530))
 
 
 

package/es/Menu/MenuItem/index.js

@@ -141,8 +141,6 @@ let MenuItem = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, g
         return 'menuitemcheckbox';
       case 'radio':
         return 'menuitemradio';
-      case 'flyout':
-        return 'button';
       default:
         return 'menuitem';
     }

package/es/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.js

@@ -1,4 +1,4 @@
-var _MenuItemGroup, _MenuItemGroup2, _MenuItemGroup3, _MenuItemGroup4, _MenuItemGroup5, _MenuItemGroup6, _MenuItem, _MenuItem2, _MenuItemSeparator, _MenuItem3, _MenuItem4, _MenuItemSeparator2, _MenuItem5, _MenuItem6, _MenuItem7, _MenuItem8, _MenuItemSeparator3, _MenuItem9, _MenuItem10, _MenuItemSeparator4;
+var _MenuItemGroup, _MenuItemGroup2, _MenuItemGroup3, _MenuItemGroup4, _MenuItem, _MenuItem2, _MenuItemSeparator, _MenuItem3, _MenuItem4, _MenuItemSeparator2, _MenuItem5, _MenuItem6, _MenuItem7, _MenuItem8, _MenuItemSeparator3, _MenuItem9, _MenuItem10, _MenuItemSeparator4;
 /*
  * The MIT License (MIT)
  *
@@ -36,40 +36,21 @@ describe('<MenuItemGroup />', () => {
         label: "Menu Label"
       }, /*#__PURE__*/React.createElement(MenuItem, null, "Item Text 1"), /*#__PURE__*/React.createElement(MenuItem, null, "Item Text 2"), /*#__PURE__*/React.createElement(MenuItemSeparator, null)))),
       container = _render.container;
-    const group = container.querySelector("[id*='MenuItemGroup_']");
-    const groupMenu = screen.getByRole('menu');
+    const group = container.querySelector("[class*='menuItemGroup']");
     expect(group).toBeInTheDocument();
     expect(group).toHaveTextContent('Menu Label');
-    expect(groupMenu).toBeInTheDocument();
-    expect(groupMenu).toHaveTextContent('Item Text 1');
-    expect(groupMenu).toHaveTextContent('Item Text 2');
-  });
-  it('should set the role to "menu"', () => {
-    const _render2 = render(_MenuItemGroup2 || (_MenuItemGroup2 = /*#__PURE__*/React.createElement(MenuItemGroup, {
-        label: "Select one"
-      }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null)))),
-      container = _render2.container;
-    const menuItemGroup = container.querySelector("[class*='menuItemGroup__items']");
-    expect(menuItemGroup).toHaveAttribute('role', 'menu');
-  });
-  it('should set the list item role to "none"', () => {
-    render(_MenuItemGroup3 || (_MenuItemGroup3 = /*#__PURE__*/React.createElement(MenuItemGroup, {
-      label: "Select one"
-    }, /*#__PURE__*/React.createElement(MenuItem, null, "Food"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"))));
-    const menu = screen.getByRole('menu');
-    const menuListItem = menu.firstChild;
-    expect(menuListItem.tagName).toBe('LI');
-    expect(menuListItem).toHaveAttribute('role', 'none');
+    expect(group).toHaveTextContent('Item Text 1');
+    expect(group).toHaveTextContent('Item Text 2');
   });
   it('should default to children with type "radio"', () => {
-    render(_MenuItemGroup4 || (_MenuItemGroup4 = /*#__PURE__*/React.createElement(MenuItemGroup, {
+    render(_MenuItemGroup2 || (_MenuItemGroup2 = /*#__PURE__*/React.createElement(MenuItemGroup, {
       label: "Select one"
     }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
     const menuItems = screen.getAllByRole('menuitemradio');
     expect(menuItems).toHaveLength(2);
   });
   it('should render children with type "checkbox" if allowMultiple is true', () => {
-    render(_MenuItemGroup5 || (_MenuItemGroup5 = /*#__PURE__*/React.createElement(MenuItemGroup, {
+    render(_MenuItemGroup3 || (_MenuItemGroup3 = /*#__PURE__*/React.createElement(MenuItemGroup, {
       label: "Select a few",
       allowMultiple: true
     }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
@@ -77,13 +58,11 @@ describe('<MenuItemGroup />', () => {
     expect(menuItems).toHaveLength(2);
   });
   it('should set aria-disabled', () => {
-    render(_MenuItemGroup6 || (_MenuItemGroup6 = /*#__PURE__*/React.createElement(MenuItemGroup, {
+    render(_MenuItemGroup4 || (_MenuItemGroup4 = /*#__PURE__*/React.createElement(MenuItemGroup, {
       label: "Select one",
       disabled: true
     }, /*#__PURE__*/React.createElement(MenuItem, null, "Foo"), /*#__PURE__*/React.createElement(MenuItem, null, "Bar"), /*#__PURE__*/React.createElement(MenuItemSeparator, null))));
-    const menu = screen.getByRole('menu');
     const menuItems = screen.getAllByRole('menuitemradio');
-    expect(menu).toHaveAttribute('aria-disabled', 'true');
     expect(menuItems).toHaveLength(2);
     expect(menuItems[0]).toHaveAttribute('aria-disabled', 'true');
     expect(menuItems[1]).toHaveAttribute('aria-disabled', 'true');

package/es/Menu/MenuItemGroup/index.js

@@ -42,7 +42,6 @@ id: Menu.Group
 let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_MenuItemGroup = class MenuItemGroup extends Component {
   constructor(props) {
     super(props);
-    this._labelId = void 0;
     this.ref = null;
     this.handleRef = el => {
       this.ref = el;
@@ -84,7 +83,6 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
         selected: this.selectedFromChildren(props) || props.defaultSelected
       };
     }
-    this._labelId = props.deterministicId('MenuItemGroup');
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -135,9 +133,7 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
       if (matchComponentTypes(child, [MenuItem])) {
         ++index;
         const value = child.props.value || index;
-        return jsx("li", {
-          role: "none"
-        }, ' ', safeCloneElement(child, {
+        return safeCloneElement(child, {
           tabIndex: isTabbable && index === 0 ? 0 : -1,
           controls,
           value,
@@ -148,7 +144,7 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
           selected: this.selected.indexOf(value) > -1,
           onSelect: this.handleSelect,
           onMouseOver
-        }), ' ');
+        });
       } else {
         return child;
       }
@@ -159,15 +155,10 @@ let MenuItemGroup = (_dec = withDeterministicId(), _dec2 = withStyle(generateSty
     const props = omitProps(this.props, MenuItemGroup.allowedProps);
     return jsx("span", Object.assign({}, props, {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
-      role: "presentation",
       ref: this.handleRef
-    }), jsx("span", {
-      id: this._labelId
-    }, this.renderLabel()), jsx("ul", {
-      role: "menu",
+    }), this.renderLabel(), jsx("div", {
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
-      "aria-disabled": this.props.disabled ? 'true' : void 0,
-      "aria-labelledby": this._labelId
+      "aria-disabled": this.props.disabled ? 'true' : void 0
     }, this.renderChildren()));
   }
 }, _MenuItemGroup.displayName = "MenuItemGroup", _MenuItemGroup.componentId = 'Menu.Group', _MenuItemGroup.propTypes = propTypes, _MenuItemGroup.allowedProps = allowedProps, _MenuItemGroup.defaultProps = {

package/es/Menu/MenuItemSeparator/index.js

@@ -57,6 +57,8 @@ let MenuItemSeparator = (_dec = withStyle(generateStyle, generateComponentTheme)
   render() {
     var _this$props$styles;
     const props = omitProps(this.props, MenuItemSeparator.allowedProps);
+    // role="separator" would fit better here, but it causes NVDA to stop the
+    // MenuItem count after it
     return jsx("div", Object.assign({}, props, {
       role: "presentation",
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator,

package/es/Menu/index.js

@@ -235,16 +235,12 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
       count += 1;
       const isTabbable = !this.state.hasFocus && count === 1;
       if (matchComponentTypes(child, ['MenuItemSeparator'])) {
-        return jsx("li", {
-          role: "none"
-        }, child);
+        return child;
       }
       const menuItemChild = child;
       const controls = menuItemChild.props['aria-controls'] || menuItemChild.props.controls || this.props['aria-controls'] || this.props.controls;
       if (matchComponentTypes(child, ['MenuItem'])) {
-        return jsx("li", {
-          role: "none"
-        }, safeCloneElement(child, {
+        return safeCloneElement(child, {
           controls,
           children: child.props.children,
           disabled: disabled || child.props.disabled,
@@ -253,12 +249,10 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
           onSelect: this.handleMenuItemSelect,
           onMouseOver: this.handleMenuItemMouseOver,
           tabIndex: isTabbable ? 0 : -1
-        }));
+        });
       }
       if (matchComponentTypes(child, ['MenuItemGroup'])) {
-        return jsx("li", {
-          role: "none"
-        }, safeCloneElement(child, {
+        return safeCloneElement(child, {
           label: child.props.label,
           controls,
           disabled: disabled || child.props.disabled,
@@ -267,13 +261,11 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
           onSelect: this.handleMenuItemSelect,
           onMouseOver: this.handleMenuItemMouseOver,
           isTabbable
-        }));
+        });
       }
       if (matchComponentTypes(child, ['Menu'])) {
         const submenuDisabled = disabled || child.props.disabled;
-        return jsx("li", {
-          role: "none"
-        }, safeCloneElement(child, {
+        return safeCloneElement(child, {
           type: 'flyout',
           controls,
           disabled: submenuDisabled,
@@ -293,7 +285,7 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
             disabled: submenuDisabled,
             renderLabelInfo: child.props.renderLabelInfo
           }, child.props.title || child.props.label)
-        }));
+        });
       }
       return;
     });
@@ -312,7 +304,7 @@ let Menu = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, gener
         removeMenuItem: this.removeMenuItem,
         registerMenuItem: this.registerMenuItem
       }
-    }, jsx("ul", {
+    }, jsx("div", {
       role: "menu",
       "aria-label": label,
       tabIndex: 0,

package/lib/Menu/MenuItem/index.js

@@ -154,8 +154,6 @@ let MenuItem = exports.MenuItem = (_dec = (0, _withDeterministicId.withDetermini
         return 'menuitemcheckbox';
       case 'radio':
         return 'menuitemradio';
-      case 'flyout':
-        return 'button';
       default:
         return 'menuitem';
     }

package/lib/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.js

@@ -8,7 +8,7 @@ require("@testing-library/jest-dom");
 var _MenuItem11 = require("../../MenuItem");
 var _MenuItemSeparator5 = require("../../MenuItemSeparator");
 var _index = require("../index");
-var _MenuItemGroup, _MenuItemGroup2, _MenuItemGroup3, _MenuItemGroup4, _MenuItemGroup5, _MenuItemGroup6, _MenuItem, _MenuItem2, _MenuItemSeparator, _MenuItem3, _MenuItem4, _MenuItemSeparator2, _MenuItem5, _MenuItem6, _MenuItem7, _MenuItem8, _MenuItemSeparator3, _MenuItem9, _MenuItem10, _MenuItemSeparator4;
+var _MenuItemGroup, _MenuItemGroup2, _MenuItemGroup3, _MenuItemGroup4, _MenuItem, _MenuItem2, _MenuItemSeparator, _MenuItem3, _MenuItem4, _MenuItemSeparator2, _MenuItem5, _MenuItem6, _MenuItem7, _MenuItem8, _MenuItemSeparator3, _MenuItem9, _MenuItem10, _MenuItemSeparator4;
 /*
  * The MIT License (MIT)
  *
@@ -38,40 +38,21 @@ describe('<MenuItemGroup />', () => {
         label: "Menu Label"
       }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item Text 1"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Item Text 2"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null)))),
       container = _render.container;
-    const group = container.querySelector("[id*='MenuItemGroup_']");
-    const groupMenu = _react2.screen.getByRole('menu');
+    const group = container.querySelector("[class*='menuItemGroup']");
     expect(group).toBeInTheDocument();
     expect(group).toHaveTextContent('Menu Label');
-    expect(groupMenu).toBeInTheDocument();
-    expect(groupMenu).toHaveTextContent('Item Text 1');
-    expect(groupMenu).toHaveTextContent('Item Text 2');
-  });
-  it('should set the role to "menu"', () => {
-    const _render2 = (0, _react2.render)(_MenuItemGroup2 || (_MenuItemGroup2 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
-        label: "Select one"
-      }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null)))),
-      container = _render2.container;
-    const menuItemGroup = container.querySelector("[class*='menuItemGroup__items']");
-    expect(menuItemGroup).toHaveAttribute('role', 'menu');
-  });
-  it('should set the list item role to "none"', () => {
-    (0, _react2.render)(_MenuItemGroup3 || (_MenuItemGroup3 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
-      label: "Select one"
-    }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Food"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"))));
-    const menu = _react2.screen.getByRole('menu');
-    const menuListItem = menu.firstChild;
-    expect(menuListItem.tagName).toBe('LI');
-    expect(menuListItem).toHaveAttribute('role', 'none');
+    expect(group).toHaveTextContent('Item Text 1');
+    expect(group).toHaveTextContent('Item Text 2');
   });
   it('should default to children with type "radio"', () => {
-    (0, _react2.render)(_MenuItemGroup4 || (_MenuItemGroup4 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+    (0, _react2.render)(_MenuItemGroup2 || (_MenuItemGroup2 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
       label: "Select one"
     }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
     const menuItems = _react2.screen.getAllByRole('menuitemradio');
     expect(menuItems).toHaveLength(2);
   });
   it('should render children with type "checkbox" if allowMultiple is true', () => {
-    (0, _react2.render)(_MenuItemGroup5 || (_MenuItemGroup5 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+    (0, _react2.render)(_MenuItemGroup3 || (_MenuItemGroup3 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
       label: "Select a few",
       allowMultiple: true
     }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
@@ -79,13 +60,11 @@ describe('<MenuItemGroup />', () => {
     expect(menuItems).toHaveLength(2);
   });
   it('should set aria-disabled', () => {
-    (0, _react2.render)(_MenuItemGroup6 || (_MenuItemGroup6 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
+    (0, _react2.render)(_MenuItemGroup4 || (_MenuItemGroup4 = /*#__PURE__*/_react.default.createElement(_index.MenuItemGroup, {
       label: "Select one",
       disabled: true
     }, /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Foo"), /*#__PURE__*/_react.default.createElement(_MenuItem11.MenuItem, null, "Bar"), /*#__PURE__*/_react.default.createElement(_MenuItemSeparator5.MenuItemSeparator, null))));
-    const menu = _react2.screen.getByRole('menu');
     const menuItems = _react2.screen.getAllByRole('menuitemradio');
-    expect(menu).toHaveAttribute('aria-disabled', 'true');
     expect(menuItems).toHaveLength(2);
     expect(menuItems[0]).toHaveAttribute('aria-disabled', 'true');
     expect(menuItems[1]).toHaveAttribute('aria-disabled', 'true');

package/lib/Menu/MenuItemGroup/index.js

@@ -52,7 +52,6 @@ id: Menu.Group
 let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_MenuItemGroup = class MenuItemGroup extends _react.Component {
   constructor(props) {
     super(props);
-    this._labelId = void 0;
     this.ref = null;
     this.handleRef = el => {
       this.ref = el;
@@ -94,7 +93,6 @@ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.wit
         selected: this.selectedFromChildren(props) || props.defaultSelected
       };
     }
-    this._labelId = props.deterministicId('MenuItemGroup');
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props;
@@ -145,9 +143,7 @@ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.wit
       if ((0, _matchComponentTypes.matchComponentTypes)(child, [_MenuItem.MenuItem])) {
         ++index;
         const value = child.props.value || index;
-        return (0, _emotion.jsx)("li", {
-          role: "none"
-        }, ' ', (0, _safeCloneElement.safeCloneElement)(child, {
+        return (0, _safeCloneElement.safeCloneElement)(child, {
           tabIndex: isTabbable && index === 0 ? 0 : -1,
           controls,
           value,
@@ -158,7 +154,7 @@ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.wit
           selected: this.selected.indexOf(value) > -1,
           onSelect: this.handleSelect,
           onMouseOver
-        }), ' ');
+        });
       } else {
         return child;
       }
@@ -169,15 +165,10 @@ let MenuItemGroup = exports.MenuItemGroup = (_dec = (0, _withDeterministicId.wit
     const props = (0, _omitProps.omitProps)(this.props, MenuItemGroup.allowedProps);
     return (0, _emotion.jsx)("span", Object.assign({}, props, {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.menuItemGroup,
-      role: "presentation",
       ref: this.handleRef
-    }), (0, _emotion.jsx)("span", {
-      id: this._labelId
-    }, this.renderLabel()), (0, _emotion.jsx)("ul", {
-      role: "menu",
+    }), this.renderLabel(), (0, _emotion.jsx)("div", {
       css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.items,
-      "aria-disabled": this.props.disabled ? 'true' : void 0,
-      "aria-labelledby": this._labelId
+      "aria-disabled": this.props.disabled ? 'true' : void 0
     }, this.renderChildren()));
   }
 }, _MenuItemGroup.displayName = "MenuItemGroup", _MenuItemGroup.componentId = 'Menu.Group', _MenuItemGroup.propTypes = _props.propTypes, _MenuItemGroup.allowedProps = _props.allowedProps, _MenuItemGroup.defaultProps = {

package/lib/Menu/MenuItemSeparator/index.js

@@ -63,6 +63,8 @@ let MenuItemSeparator = exports.MenuItemSeparator = (_dec = (0, _emotion.withSty
   render() {
     var _this$props$styles;
     const props = (0, _omitProps.omitProps)(this.props, MenuItemSeparator.allowedProps);
+    // role="separator" would fit better here, but it causes NVDA to stop the
+    // MenuItem count after it
     return (0, _emotion.jsx)("div", Object.assign({}, props, {
       role: "presentation",
       css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.menuItemSeparator,

package/lib/Menu/index.js

@@ -264,16 +264,12 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
       count += 1;
       const isTabbable = !this.state.hasFocus && count === 1;
       if ((0, _matchComponentTypes.matchComponentTypes)(child, ['MenuItemSeparator'])) {
-        return (0, _emotion.jsx)("li", {
-          role: "none"
-        }, child);
+        return child;
       }
       const menuItemChild = child;
       const controls = menuItemChild.props['aria-controls'] || menuItemChild.props.controls || this.props['aria-controls'] || this.props.controls;
       if ((0, _matchComponentTypes.matchComponentTypes)(child, ['MenuItem'])) {
-        return (0, _emotion.jsx)("li", {
-          role: "none"
-        }, (0, _safeCloneElement.safeCloneElement)(child, {
+        return (0, _safeCloneElement.safeCloneElement)(child, {
           controls,
           children: child.props.children,
           disabled: disabled || child.props.disabled,
@@ -282,12 +278,10 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
           onSelect: this.handleMenuItemSelect,
           onMouseOver: this.handleMenuItemMouseOver,
           tabIndex: isTabbable ? 0 : -1
-        }));
+        });
       }
       if ((0, _matchComponentTypes.matchComponentTypes)(child, ['MenuItemGroup'])) {
-        return (0, _emotion.jsx)("li", {
-          role: "none"
-        }, (0, _safeCloneElement.safeCloneElement)(child, {
+        return (0, _safeCloneElement.safeCloneElement)(child, {
           label: child.props.label,
           controls,
           disabled: disabled || child.props.disabled,
@@ -296,13 +290,11 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
           onSelect: this.handleMenuItemSelect,
           onMouseOver: this.handleMenuItemMouseOver,
           isTabbable
-        }));
+        });
       }
       if ((0, _matchComponentTypes.matchComponentTypes)(child, ['Menu'])) {
         const submenuDisabled = disabled || child.props.disabled;
-        return (0, _emotion.jsx)("li", {
-          role: "none"
-        }, (0, _safeCloneElement.safeCloneElement)(child, {
+        return (0, _safeCloneElement.safeCloneElement)(child, {
           type: 'flyout',
           controls,
           disabled: submenuDisabled,
@@ -322,7 +314,7 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
             disabled: submenuDisabled,
             renderLabelInfo: child.props.renderLabelInfo
           }, child.props.title || child.props.label)
-        }));
+        });
       }
       return;
     });
@@ -341,7 +333,7 @@ let Menu = exports.Menu = (_dec = (0, _withDeterministicId.withDeterministicId)(
         removeMenuItem: this.removeMenuItem,
         registerMenuItem: this.registerMenuItem
       }
-    }, (0, _emotion.jsx)("ul", {
+    }, (0, _emotion.jsx)("div", {
       role: "menu",
       "aria-label": label,
       tabIndex: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-menu",
-  "version": "10.10.1-snapshot-9",
+  "version": "10.10.1-snapshot-14",
   "description": "A dropdown menu component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,11 +23,11 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.10.1-snapshot-9",
-    "@instructure/ui-babel-preset": "10.10.1-snapshot-9",
-    "@instructure/ui-color-utils": "10.10.1-snapshot-9",
-    "@instructure/ui-test-utils": "10.10.1-snapshot-9",
-    "@instructure/ui-themes": "10.10.1-snapshot-9",
+    "@instructure/ui-axe-check": "10.10.1-snapshot-14",
+    "@instructure/ui-babel-preset": "10.10.1-snapshot-14",
+    "@instructure/ui-color-utils": "10.10.1-snapshot-14",
+    "@instructure/ui-test-utils": "10.10.1-snapshot-14",
+    "@instructure/ui-themes": "10.10.1-snapshot-14",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -35,19 +35,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.10.1-snapshot-9",
-    "@instructure/emotion": "10.10.1-snapshot-9",
-    "@instructure/shared-types": "10.10.1-snapshot-9",
-    "@instructure/ui-a11y-utils": "10.10.1-snapshot-9",
-    "@instructure/ui-dom-utils": "10.10.1-snapshot-9",
-    "@instructure/ui-icons": "10.10.1-snapshot-9",
-    "@instructure/ui-popover": "10.10.1-snapshot-9",
-    "@instructure/ui-position": "10.10.1-snapshot-9",
-    "@instructure/ui-prop-types": "10.10.1-snapshot-9",
-    "@instructure/ui-react-utils": "10.10.1-snapshot-9",
-    "@instructure/ui-testable": "10.10.1-snapshot-9",
-    "@instructure/ui-utils": "10.10.1-snapshot-9",
-    "@instructure/ui-view": "10.10.1-snapshot-9",
+    "@instructure/console": "10.10.1-snapshot-14",
+    "@instructure/emotion": "10.10.1-snapshot-14",
+    "@instructure/shared-types": "10.10.1-snapshot-14",
+    "@instructure/ui-a11y-utils": "10.10.1-snapshot-14",
+    "@instructure/ui-dom-utils": "10.10.1-snapshot-14",
+    "@instructure/ui-icons": "10.10.1-snapshot-14",
+    "@instructure/ui-popover": "10.10.1-snapshot-14",
+    "@instructure/ui-position": "10.10.1-snapshot-14",
+    "@instructure/ui-prop-types": "10.10.1-snapshot-14",
+    "@instructure/ui-react-utils": "10.10.1-snapshot-14",
+    "@instructure/ui-testable": "10.10.1-snapshot-14",
+    "@instructure/ui-utils": "10.10.1-snapshot-14",
+    "@instructure/ui-view": "10.10.1-snapshot-14",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/Menu/MenuItem/index.tsx

@@ -187,8 +187,6 @@ class MenuItem extends Component<MenuItemProps, MenuItemState> {
         return 'menuitemcheckbox'
       case 'radio':
         return 'menuitemradio'
-      case 'flyout':
-        return 'button'
       default:
         return 'menuitem'
     }

package/src/Menu/MenuItemGroup/__new-tests__/MenuItemGroup.test.tsx

@@ -40,44 +40,11 @@ describe('<MenuItemGroup />', () => {
         <MenuItemSeparator />
       </MenuItemGroup>
     )
-    const group = container.querySelector("[id*='MenuItemGroup_']")
-    const groupMenu = screen.getByRole('menu')
-
+    const group = container.querySelector("[class*='menuItemGroup']")
     expect(group).toBeInTheDocument()
     expect(group).toHaveTextContent('Menu Label')
-
-    expect(groupMenu).toBeInTheDocument()
-    expect(groupMenu).toHaveTextContent('Item Text 1')
-    expect(groupMenu).toHaveTextContent('Item Text 2')
-  })
-
-  it('should set the role to "menu"', () => {
-    const { container } = render(
-      <MenuItemGroup label="Select one">
-        <MenuItem>Foo</MenuItem>
-        <MenuItem>Bar</MenuItem>
-        <MenuItemSeparator />
-      </MenuItemGroup>
-    )
-    const menuItemGroup = container.querySelector(
-      "[class*='menuItemGroup__items']"
-    )
-
-    expect(menuItemGroup).toHaveAttribute('role', 'menu')
-  })
-
-  it('should set the list item role to "none"', () => {
-    render(
-      <MenuItemGroup label="Select one">
-        <MenuItem>Food</MenuItem>
-        <MenuItem>Bar</MenuItem>
-      </MenuItemGroup>
-    )
-    const menu = screen.getByRole('menu')
-    const menuListItem = menu.firstChild as HTMLElement
-
-    expect(menuListItem.tagName).toBe('LI')
-    expect(menuListItem).toHaveAttribute('role', 'none')
+    expect(group).toHaveTextContent('Item Text 1')
+    expect(group).toHaveTextContent('Item Text 2')
   })
 
   it('should default to children with type "radio"', () => {
@@ -114,10 +81,8 @@ describe('<MenuItemGroup />', () => {
         <MenuItemSeparator />
       </MenuItemGroup>
     )
-    const menu = screen.getByRole('menu')
     const menuItems = screen.getAllByRole('menuitemradio')
 
-    expect(menu).toHaveAttribute('aria-disabled', 'true')
     expect(menuItems).toHaveLength(2)
     expect(menuItems[0]).toHaveAttribute('aria-disabled', 'true')
     expect(menuItems[1]).toHaveAttribute('aria-disabled', 'true')

package/src/Menu/MenuItemGroup/index.tsx

@@ -82,11 +82,8 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
         selected: this.selectedFromChildren(props) || props.defaultSelected!
       }
     }
-
-    this._labelId = props.deterministicId!('MenuItemGroup')
   }
 
-  private _labelId: string
   ref: Element | null = null
 
   handleRef = (el: Element | null) => {
@@ -210,23 +207,18 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
         ++index
         const value = child.props.value || index
 
-        return (
-          <li role="none">
-            {' '}
-            {safeCloneElement(child, {
-              tabIndex: isTabbable && index === 0 ? 0 : -1,
-              controls,
-              value,
-              children: child.props.children,
-              type: allowMultiple ? 'checkbox' : 'radio',
-              ref: this.props.itemRef,
-              disabled: disabled || child.props.disabled,
-              selected: this.selected.indexOf(value) > -1,
-              onSelect: this.handleSelect,
-              onMouseOver
-            })}{' '}
-          </li>
-        )
+        return safeCloneElement(child, {
+          tabIndex: isTabbable && index === 0 ? 0 : -1,
+          controls,
+          value,
+          children: child.props.children,
+          type: allowMultiple ? 'checkbox' : 'radio',
+          ref: this.props.itemRef,
+          disabled: disabled || child.props.disabled,
+          selected: this.selected.indexOf(value) > -1,
+          onSelect: this.handleSelect,
+          onMouseOver
+        })
       } else {
         return child
       }
@@ -239,18 +231,15 @@ class MenuItemGroup extends Component<MenuGroupProps, MenuGroupState> {
       <span
         {...props}
         css={this.props.styles?.menuItemGroup}
-        role="presentation"
         ref={this.handleRef}
       >
-        <span id={this._labelId}>{this.renderLabel()}</span>
-        <ul
-          role="menu"
+        {this.renderLabel()}
+        <div
           css={this.props.styles?.items}
           aria-disabled={this.props.disabled ? 'true' : undefined}
-          aria-labelledby={this._labelId}
         >
           {this.renderChildren()}
-        </ul>
+        </div>
       </span>
     )
   }

package/src/Menu/MenuItemSeparator/index.tsx

@@ -66,6 +66,8 @@ class MenuItemSeparator extends Component<MenuSeparatorProps> {
 
   render() {
     const props = omitProps(this.props, MenuItemSeparator.allowedProps)
+    // role="separator" would fit better here, but it causes NVDA to stop the
+    // MenuItem count after it
     return (
       <div
         {...props}