@dhis2-ui/menu 9.9.0-alpha.1 → 9.9.1

package/build/cjs/menu/__tests__/menu.test.js

@@ -0,0 +1,234 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _enzyme = require("enzyme");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _menuDivider = require("../../menu-divider/menu-divider.js");
+
+var _menuItem = require("../../menu-item/menu-item.js");
+
+var _menuSectionHeader = require("../../menu-section-header/menu-section-header.js");
+
+var _menu = require("../menu.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Menu Component', () => {
+  const menuDataTest = 'data-test-menu';
+  const menuItemDataTest = 'data-test-menu-item';
+  const dividerDataTest = 'data-test-menu-divider';
+  it('Menu and menu items have aria attributes', () => {
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/_react2.default.createElement(_menuSectionHeader.MenuSectionHeader, {
+      label: "Header"
+    }), /*#__PURE__*/_react2.default.createElement(_menuDivider.MenuDivider, {
+      dataTest: dividerDataTest
+    }), /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item"
+    })));
+    const menuElement = wrapper.find({
+      'data-test': menuDataTest
+    });
+    const menuItem = wrapper.find({
+      'data-test': menuItemDataTest
+    });
+    const menuDivider = wrapper.find({
+      'data-test': dividerDataTest
+    });
+    expect(menuElement.prop('role')).toBe('menu');
+    expect(menuItem.childAt(0).props().role).toBe('menuitem');
+    expect(menuItem.childAt(0).prop('aria-label')).toBe('Menu item');
+    expect(menuDivider.prop('role')).toBe('separator');
+  });
+  it('Empty menu has role menu', () => {
+    const menuDataTest = 'data-test-menu';
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }));
+    const menuElement = wrapper.find({
+      'data-test': menuDataTest
+    });
+    expect(menuElement.prop('role')).toBe('menu');
+  });
+  it('can handle focus of first focusable element when tabbed to', () => {
+    const {
+      getByRole,
+      getByText
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/_react2.default.createElement(_menuSectionHeader.MenuSectionHeader, {
+      label: "Header"
+    }), /*#__PURE__*/_react2.default.createElement(_menuDivider.MenuDivider, {
+      dataTest: dividerDataTest
+    }), /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 1"
+    }), /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 2"
+    })));
+    const menu = getByRole('menu');
+    const divider = getByRole('separator');
+    const header = getByText(/Header/i);
+    const menuItem1 = getByText(/Menu item 1/i);
+    const menuItem2 = getByText(/Menu item 2/i);
+    expect(menu).not.toHaveFocus();
+
+    _userEvent.default.tab(); // check if LI parent node has focus or not
+    // headers and dividers do not receive focus
+
+
+    expect(header.parentNode.parentNode).not.toHaveFocus();
+    expect(divider.parentNode.parentNode).not.toHaveFocus();
+    expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
+    expect(menuItem1.parentNode.parentNode).toHaveFocus();
+  });
+  it('can handle arrow down key navigation', async () => {
+    const {
+      getByText
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/_react2.default.createElement(_menuSectionHeader.MenuSectionHeader, {
+      label: "Header"
+    }), /*#__PURE__*/_react2.default.createElement(_menuDivider.MenuDivider, {
+      dataTest: dividerDataTest
+    }), /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 1"
+    }), /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 2"
+    })));
+    const menuItem1 = getByText(/Menu item 1/i);
+    const menuItem2 = getByText(/Menu item 2/i);
+
+    _userEvent.default.tab();
+
+    expect(menuItem1.parentNode.parentNode).toHaveFocus(); // simulate arrowDown press
+
+    _userEvent.default.keyboard('{ArrowDown}');
+
+    expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
+    expect(menuItem2.parentNode.parentNode).toHaveFocus();
+
+    _userEvent.default.keyboard('{ArrowDown}');
+
+    expect(menuItem1.parentNode.parentNode).toHaveFocus();
+    expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
+  });
+  it('can handle arrow up key navigation', async () => {
+    const {
+      getByText
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/_react2.default.createElement(_menuSectionHeader.MenuSectionHeader, {
+      label: "Header"
+    }), /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 1"
+    }), /*#__PURE__*/_react2.default.createElement(_menuDivider.MenuDivider, {
+      dataTest: dividerDataTest
+    }), /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 2"
+    })));
+    const menuItem1 = getByText(/Menu item 1/i);
+    const menuItem2 = getByText(/Menu item 2/i);
+
+    _userEvent.default.tab();
+
+    expect(menuItem1.parentNode.parentNode).toHaveFocus(); // simulate arrowUp press
+
+    _userEvent.default.keyboard('{ArrowUp}');
+
+    expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
+    expect(menuItem2.parentNode.parentNode).toHaveFocus();
+
+    _userEvent.default.keyboard('{ArrowUp}');
+
+    expect(menuItem1.parentNode.parentNode).toHaveFocus();
+    expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
+  });
+  it('can handle space and enter key presses for clickable menu items', async () => {
+    const onClick = jest.fn();
+    const {
+      getByText
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/_react2.default.createElement(_menuItem.MenuItem, {
+      onClick: onClick,
+      value: "myValue",
+      label: "Click menu item"
+    })));
+    const clickableItem = getByText(/Click menu item/i);
+
+    _userEvent.default.tab();
+
+    expect(clickableItem.parentNode.parentNode).toHaveFocus();
+
+    _userEvent.default.keyboard('[Space]');
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+
+    _userEvent.default.keyboard('{Enter}');
+
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
+  it('can handle non MenuItem components', () => {
+    const onClick = jest.fn();
+    const {
+      getByText
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_menu.Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/_react2.default.createElement("span", {
+      role: "menuitem",
+      onClick: onClick
+    }, "Span 1"), /*#__PURE__*/_react2.default.createElement("li", {
+      tabIndex: -1
+    }, /*#__PURE__*/_react2.default.createElement("a", {
+      href: "#",
+      role: "menuitem"
+    }, "Link 2")), /*#__PURE__*/_react2.default.createElement("li", null, /*#__PURE__*/_react2.default.createElement("span", {
+      onClick: onClick
+    }, "Span 2"))));
+    const nonListMenuItem = getByText(/span 1/i);
+    const listMenuItem = getByText(/link 2/i);
+    const plainListItem = getByText(/span 2/i); // all children must be list items
+
+    expect(nonListMenuItem.parentElement.nodeName).toBe('LI');
+
+    _userEvent.default.tab();
+
+    expect(nonListMenuItem.parentElement).toHaveFocus();
+    expect(nonListMenuItem.parentElement.tabIndex).toBe(0);
+    expect(onClick).toHaveBeenCalledTimes(0);
+
+    _userEvent.default.keyboard('[Space]');
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+
+    _userEvent.default.keyboard('{ArrowDown}');
+
+    expect(listMenuItem.parentElement).toHaveFocus();
+
+    _userEvent.default.keyboard('{ArrowDown}');
+
+    expect(nonListMenuItem.parentElement).toHaveFocus(); // non menu items do not receive focus
+
+    expect(plainListItem.parentElement).not.toHaveFocus();
+  });
+});

package/build/cjs/menu/helpers.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.hasMenuItemRole = exports.getFocusableItemsIndices = void 0;
+
+const isMenuItem = role => {
+  return ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(role);
+};
+
+const isValidMenuItemNode = node => {
+  if (node.nodeName === 'LI' && node.firstElementChild) {
+    return isValidMenuItemNode(node.firstElementChild);
+  }
+
+  const role = node.getAttribute('role');
+  return role && isMenuItem(role);
+};
+
+const getFocusableItemsIndices = elements => {
+  const focusableIndices = [];
+  elements.forEach((node, index) => {
+    if (isValidMenuItemNode(node)) {
+      focusableIndices.push(index);
+    }
+  });
+  return focusableIndices;
+};
+
+exports.getFocusableItemsIndices = getFocusableItemsIndices;
+
+const hasMenuItemRole = component => {
+  var _component$props;
+
+  return isMenuItem(component === null || component === void 0 ? void 0 : (_component$props = component.props) === null || _component$props === void 0 ? void 0 : _component$props['role']);
+};
+
+exports.hasMenuItemRole = hasMenuItemRole;

package/build/cjs/menu/menu.js

@@ -11,6 +11,10 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _helpers = require("./helpers.js");
+
+var _useMenu = require("./use-menu.js");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,15 +28,55 @@ const Menu = _ref => {
     dataTest,
     dense
   } = _ref;
+  const {
+    menuRef,
+    focusedIndex
+  } = (0, _useMenu.useMenuNavigation)(children);
+
+  const childrenToRender = _react.Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/(0, _react.isValidElement)(child)) {
+      return child;
+    }
+
+    const tabIndex = index === focusedIndex ? 0 : -1;
+    const childProps = { ...child.props
+    };
+
+    if (typeof child.type === 'string') {
+      // remove non-native props from native HTML elements
+      delete childProps.hideDivider;
+      delete childProps.dense;
+      delete childProps.active; // all ul children must be li elements
+      // add tabindex for focus to those elements that are/contain a menuitem
+
+      if (child.type === 'li') {
+        return (0, _helpers.hasMenuItemRole)(child.props.children[0]) ? /*#__PURE__*/(0, _react.cloneElement)(child, { ...childProps,
+          tabIndex
+        }) : /*#__PURE__*/(0, _react.cloneElement)(child, childProps);
+      } else {
+        return /*#__PURE__*/_react.default.createElement("li", {
+          tabIndex: (0, _helpers.hasMenuItemRole)(child) ? tabIndex : null
+        }, /*#__PURE__*/(0, _react.cloneElement)(child, childProps));
+      }
+    } else {
+      // assign non-native props to custom elements
+      childProps.dense = typeof child.props.dense === 'boolean' ? child.props.dense : dense;
+      childProps.hideDivider = typeof child.props.hideDivider !== 'boolean' && index === 0 ? true : child.props.hideDivider;
+      return /*#__PURE__*/(0, _react.cloneElement)(child, { ...childProps,
+        tabIndex
+      });
+    }
+  });
+
   return /*#__PURE__*/_react.default.createElement("ul", {
     "data-test": dataTest,
-    className: "jsx-3549878755" + " " + (className || "")
-  }, _react.Children.map(children, (child, index) => /*#__PURE__*/(0, _react.isValidElement)(child) ? /*#__PURE__*/(0, _react.cloneElement)(child, {
-    dense: typeof child.props.dense === 'boolean' ? child.props.dense : dense,
-    hideDivider: typeof child.props.hideDivider !== 'boolean' && index === 0 ? true : child.props.hideDivider
-  }) : child), /*#__PURE__*/_react.default.createElement(_style.default, {
-    id: "3549878755"
-  }, ["ul.jsx-3549878755{display:block;position:relative;width:100%;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]));
+    role: "menu",
+    ref: menuRef,
+    tabIndex: 0,
+    className: "jsx-1636612837" + " " + (className || "")
+  }, childrenToRender, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1636612837"
+  }, ["ul.jsx-1636612837{display:block;position:relative;width:100%;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]));
 };
 
 exports.Menu = Menu;

package/build/cjs/menu/use-menu.js

@@ -0,0 +1,96 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuNavigation = void 0;
+
+var _react = require("react");
+
+var _helpers = require("./helpers.js");
+
+const useMenuNavigation = children => {
+  const menuRef = (0, _react.useRef)(null);
+  const [focusableItemsIndices, setFocusableItemsIndices] = (0, _react.useState)(null);
+  const [activeItemIndex, setActiveItemIndex] = (0, _react.useState)(-1); // Initializes the indices for focusable items
+
+  (0, _react.useEffect)(() => {
+    if (menuRef) {
+      const menuItems = Array.from(menuRef.current.children);
+      const itemsIndices = (0, _helpers.getFocusableItemsIndices)(menuItems);
+      setFocusableItemsIndices(itemsIndices);
+    }
+  }, [children]); // Focus the active menu child
+
+  (0, _react.useEffect)(() => {
+    if (menuRef) {
+      if (focusableItemsIndices !== null && focusableItemsIndices !== void 0 && focusableItemsIndices.length && activeItemIndex > -1) {
+        const currentIndex = focusableItemsIndices[activeItemIndex];
+        menuRef.current.children[currentIndex].focus();
+      }
+    }
+  }, [activeItemIndex, focusableItemsIndices]); // Navigate through focusable children using arrow keys
+  // Trigger actionable items
+
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    const totalFocusablePositions = focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices.length;
+
+    if (totalFocusablePositions) {
+      const lastIndex = totalFocusablePositions - 1;
+
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          setActiveItemIndex(activeItemIndex > 0 ? activeItemIndex - 1 : lastIndex);
+          break;
+
+        case 'ArrowDown':
+          event.preventDefault();
+          setActiveItemIndex(activeItemIndex >= lastIndex ? 0 : activeItemIndex + 1);
+          break;
+
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+
+          if (event.target.nodeName === 'LI') {
+            event.target.children[0].click();
+          }
+
+          break;
+
+        default:
+          break;
+      }
+    }
+  }, [activeItemIndex, focusableItemsIndices]); // Event listeners for menu focus and key handling
+
+  (0, _react.useEffect)(() => {
+    if (!menuRef) {
+      return;
+    }
+
+    const menu = menuRef.current; // Focus the first menu item when the menu receives focus
+
+    const handleFocus = event => {
+      if (event.target === menuRef.current) {
+        const firstItemIndex = focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices[0];
+        firstItemIndex && menuRef.current.children[firstItemIndex].focus();
+        setActiveItemIndex(0);
+      }
+    };
+
+    menu.addEventListener('focus', handleFocus);
+    menu.addEventListener('keydown', handleKeyDown);
+    return () => {
+      menu.removeEventListener('focus', handleFocus);
+      menu.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [activeItemIndex, focusableItemsIndices, handleKeyDown]);
+  return {
+    menuRef,
+    focusedIndex: focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices[activeItemIndex]
+  };
+};
+
+exports.useMenuNavigation = useMenuNavigation;

package/build/cjs/menu-divider/menu-divider.js

@@ -25,6 +25,7 @@ const MenuDivider = _ref => {
   } = _ref;
   return /*#__PURE__*/_react.default.createElement("li", {
     "data-test": dataTest,
+    role: "separator",
     className: _style.default.dynamic([["591815244", [_uiConstants.colors.white]]]) + " " + (className || "")
   }, /*#__PURE__*/_react.default.createElement(_divider.Divider, {
     dense: dense

package/build/cjs/menu-item/__tests__/menu-item.test.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _enzyme = require("enzyme");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _menuItem = require("../menu-item.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('Menu Component', () => {
+  it('Default menu item has role', () => {
+    const menuItemDataTest = 'data-test-menu-item';
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item"
+    }));
+    const menuItem = wrapper.find({
+      'data-test': menuItemDataTest
+    });
+    expect(menuItem.childAt(0).prop('role')).toBe('menuitem');
+    expect(menuItem.childAt(0).prop('aria-disabled')).toBe(undefined);
+    expect(menuItem.childAt(0).prop('aria-label')).toBe('Menu item');
+  });
+  it('Disabled menu item has aria-disabled attribute', () => {
+    const menuItemDataTest = 'data-test-menu-item';
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Disabled menu item",
+      disabled: true
+    }));
+    const menuItem = wrapper.find({
+      'data-test': menuItemDataTest
+    });
+    expect(menuItem.childAt(0).prop('role')).toBe('menuitem');
+    expect(menuItem.childAt(0).prop('aria-disabled')).toBe(true);
+    expect(menuItem.childAt(0).prop('aria-label')).toBe('Disabled menu item');
+  });
+  it('Toggle-able menu item has menuitemcheckbox role', () => {
+    const menuItemDataTest = 'data-test-menu-item';
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Toggle-able menu item",
+      checkbox: true,
+      checked: false
+    }));
+    const menuItem = wrapper.find({
+      'data-test': menuItemDataTest
+    });
+    expect(menuItem.childAt(0).prop('role')).not.toBe('menuitem');
+    expect(menuItem.childAt(0).prop('role')).toBe('menuitemcheckbox');
+    expect(menuItem.childAt(0).prop('aria-checked')).toBe(false);
+    expect(menuItem.childAt(0).prop('aria-label')).toBe('Toggle-able menu item');
+  });
+  it('Submenu has relevant aria attributes', () => {
+    const showSubMenu = false;
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
+      showSubMenu: showSubMenu,
+      toggleSubMenu: () => jest.fn(),
+      label: "Parent of submenus"
+    }, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, {
+      label: "Test submenu child"
+    })));
+    const menuItem = wrapper.find({
+      role: 'menuitem'
+    });
+    expect(menuItem.prop('aria-haspopup')).toBe('menu');
+    expect(menuItem.prop('aria-expanded')).toBe(false);
+    expect(menuItem.prop('aria-label')).toBe('Parent of submenus');
+    expect(wrapper.find({
+      label: 'Test submenu child'
+    }).exists()).toBe(false);
+  });
+});

package/build/cjs/menu-item/menu-item.js

@@ -70,17 +70,22 @@ const MenuItem = _ref2 => {
     label,
     showSubMenu,
     toggleSubMenu,
-    suffix
+    suffix,
+    checkbox,
+    checked,
+    tabIndex
   } = _ref2;
   const menuItemRef = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("li", {
     ref: menuItemRef,
     "data-test": dataTest,
+    role: "presentation",
+    tabIndex: tabIndex,
     className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + ((0, _classnames.default)(className, {
       destructive,
       disabled,
       dense,
-      active: active || showSubMenu,
+      active: active || showSubMenu || tabIndex === 0,
       'with-chevron': children || chevron
     }) || "")
   }, /*#__PURE__*/_react.default.createElement("a", {
@@ -92,6 +97,12 @@ const MenuItem = _ref2 => {
       isLink: !!href,
       value
     }) : undefined,
+    role: checkbox ? 'menuitemcheckbox' : 'menuitem',
+    "aria-checked": checkbox ? checked : null,
+    "aria-disabled": disabled,
+    "aria-haspopup": children && 'menu',
+    "aria-expanded": showSubMenu,
+    "aria-label": label,
     className: "jsx-".concat(_menuItemStyles.default.__hash)
   }, icon && /*#__PURE__*/_react.default.createElement("span", {
     className: "jsx-".concat(_menuItemStyles.default.__hash) + " " + "icon"
@@ -117,6 +128,8 @@ MenuItem.defaultProps = {
 };
 MenuItem.propTypes = {
   active: _propTypes.default.bool,
+  checkbox: _propTypes.default.bool,
+  checked: _propTypes.default.bool,
   chevron: _propTypes.default.bool,
 
   /**
@@ -144,6 +157,7 @@ MenuItem.propTypes = {
 
   /** A supporting element shown at the end of the menu item */
   suffix: _propTypes.default.node,
+  tabIndex: _propTypes.default.number,
 
   /** For using menu item as a link */
   target: _propTypes.default.string,

package/build/cjs/menu-item/menu-item.stories.js

@@ -168,7 +168,9 @@ const ToggleMenuItem = args => {
   return /*#__PURE__*/_react.default.createElement(_index.Menu, null, /*#__PURE__*/_react.default.createElement(_menuItem.MenuItem, _extends({}, args, {
     onClick: toggleOn,
     icon: icon,
-    label: "A toggle menu item"
+    label: "A toggle menu item",
+    checkbox: true,
+    checked: on
   })));
 };
 

package/build/es/menu/__tests__/menu.test.js

@@ -0,0 +1,196 @@
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { mount } from 'enzyme';
+import React from 'react';
+import { MenuDivider } from '../../menu-divider/menu-divider.js';
+import { MenuItem } from '../../menu-item/menu-item.js';
+import { MenuSectionHeader } from '../../menu-section-header/menu-section-header.js';
+import { Menu } from '../menu.js';
+describe('Menu Component', () => {
+  const menuDataTest = 'data-test-menu';
+  const menuItemDataTest = 'data-test-menu-item';
+  const dividerDataTest = 'data-test-menu-divider';
+  it('Menu and menu items have aria attributes', () => {
+    const wrapper = mount( /*#__PURE__*/React.createElement(Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/React.createElement(MenuSectionHeader, {
+      label: "Header"
+    }), /*#__PURE__*/React.createElement(MenuDivider, {
+      dataTest: dividerDataTest
+    }), /*#__PURE__*/React.createElement(MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item"
+    })));
+    const menuElement = wrapper.find({
+      'data-test': menuDataTest
+    });
+    const menuItem = wrapper.find({
+      'data-test': menuItemDataTest
+    });
+    const menuDivider = wrapper.find({
+      'data-test': dividerDataTest
+    });
+    expect(menuElement.prop('role')).toBe('menu');
+    expect(menuItem.childAt(0).props().role).toBe('menuitem');
+    expect(menuItem.childAt(0).prop('aria-label')).toBe('Menu item');
+    expect(menuDivider.prop('role')).toBe('separator');
+  });
+  it('Empty menu has role menu', () => {
+    const menuDataTest = 'data-test-menu';
+    const wrapper = mount( /*#__PURE__*/React.createElement(Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }));
+    const menuElement = wrapper.find({
+      'data-test': menuDataTest
+    });
+    expect(menuElement.prop('role')).toBe('menu');
+  });
+  it('can handle focus of first focusable element when tabbed to', () => {
+    const {
+      getByRole,
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/React.createElement(MenuSectionHeader, {
+      label: "Header"
+    }), /*#__PURE__*/React.createElement(MenuDivider, {
+      dataTest: dividerDataTest
+    }), /*#__PURE__*/React.createElement(MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 1"
+    }), /*#__PURE__*/React.createElement(MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 2"
+    })));
+    const menu = getByRole('menu');
+    const divider = getByRole('separator');
+    const header = getByText(/Header/i);
+    const menuItem1 = getByText(/Menu item 1/i);
+    const menuItem2 = getByText(/Menu item 2/i);
+    expect(menu).not.toHaveFocus();
+    userEvent.tab(); // check if LI parent node has focus or not
+    // headers and dividers do not receive focus
+
+    expect(header.parentNode.parentNode).not.toHaveFocus();
+    expect(divider.parentNode.parentNode).not.toHaveFocus();
+    expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
+    expect(menuItem1.parentNode.parentNode).toHaveFocus();
+  });
+  it('can handle arrow down key navigation', async () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/React.createElement(MenuSectionHeader, {
+      label: "Header"
+    }), /*#__PURE__*/React.createElement(MenuDivider, {
+      dataTest: dividerDataTest
+    }), /*#__PURE__*/React.createElement(MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 1"
+    }), /*#__PURE__*/React.createElement(MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 2"
+    })));
+    const menuItem1 = getByText(/Menu item 1/i);
+    const menuItem2 = getByText(/Menu item 2/i);
+    userEvent.tab();
+    expect(menuItem1.parentNode.parentNode).toHaveFocus(); // simulate arrowDown press
+
+    userEvent.keyboard('{ArrowDown}');
+    expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
+    expect(menuItem2.parentNode.parentNode).toHaveFocus();
+    userEvent.keyboard('{ArrowDown}');
+    expect(menuItem1.parentNode.parentNode).toHaveFocus();
+    expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
+  });
+  it('can handle arrow up key navigation', async () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/React.createElement(MenuSectionHeader, {
+      label: "Header"
+    }), /*#__PURE__*/React.createElement(MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 1"
+    }), /*#__PURE__*/React.createElement(MenuDivider, {
+      dataTest: dividerDataTest
+    }), /*#__PURE__*/React.createElement(MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item 2"
+    })));
+    const menuItem1 = getByText(/Menu item 1/i);
+    const menuItem2 = getByText(/Menu item 2/i);
+    userEvent.tab();
+    expect(menuItem1.parentNode.parentNode).toHaveFocus(); // simulate arrowUp press
+
+    userEvent.keyboard('{ArrowUp}');
+    expect(menuItem1.parentNode.parentNode).not.toHaveFocus();
+    expect(menuItem2.parentNode.parentNode).toHaveFocus();
+    userEvent.keyboard('{ArrowUp}');
+    expect(menuItem1.parentNode.parentNode).toHaveFocus();
+    expect(menuItem2.parentNode.parentNode).not.toHaveFocus();
+  });
+  it('can handle space and enter key presses for clickable menu items', async () => {
+    const onClick = jest.fn();
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/React.createElement(MenuItem, {
+      onClick: onClick,
+      value: "myValue",
+      label: "Click menu item"
+    })));
+    const clickableItem = getByText(/Click menu item/i);
+    userEvent.tab();
+    expect(clickableItem.parentNode.parentNode).toHaveFocus();
+    userEvent.keyboard('[Space]');
+    expect(onClick).toHaveBeenCalledTimes(1);
+    userEvent.keyboard('{Enter}');
+    expect(onClick).toHaveBeenCalledTimes(2);
+  });
+  it('can handle non MenuItem components', () => {
+    const onClick = jest.fn();
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(Menu, {
+      dataTest: menuDataTest,
+      dense: false
+    }, /*#__PURE__*/React.createElement("span", {
+      role: "menuitem",
+      onClick: onClick
+    }, "Span 1"), /*#__PURE__*/React.createElement("li", {
+      tabIndex: -1
+    }, /*#__PURE__*/React.createElement("a", {
+      href: "#",
+      role: "menuitem"
+    }, "Link 2")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", {
+      onClick: onClick
+    }, "Span 2"))));
+    const nonListMenuItem = getByText(/span 1/i);
+    const listMenuItem = getByText(/link 2/i);
+    const plainListItem = getByText(/span 2/i); // all children must be list items
+
+    expect(nonListMenuItem.parentElement.nodeName).toBe('LI');
+    userEvent.tab();
+    expect(nonListMenuItem.parentElement).toHaveFocus();
+    expect(nonListMenuItem.parentElement.tabIndex).toBe(0);
+    expect(onClick).toHaveBeenCalledTimes(0);
+    userEvent.keyboard('[Space]');
+    expect(onClick).toHaveBeenCalledTimes(1);
+    userEvent.keyboard('{ArrowDown}');
+    expect(listMenuItem.parentElement).toHaveFocus();
+    userEvent.keyboard('{ArrowDown}');
+    expect(nonListMenuItem.parentElement).toHaveFocus(); // non menu items do not receive focus
+
+    expect(plainListItem.parentElement).not.toHaveFocus();
+  });
+});

package/build/es/menu/helpers.js

@@ -0,0 +1,27 @@
+const isMenuItem = role => {
+  return ['menuitem', 'menuitemcheckbox', 'menuitemradio'].includes(role);
+};
+
+const isValidMenuItemNode = node => {
+  if (node.nodeName === 'LI' && node.firstElementChild) {
+    return isValidMenuItemNode(node.firstElementChild);
+  }
+
+  const role = node.getAttribute('role');
+  return role && isMenuItem(role);
+};
+
+export const getFocusableItemsIndices = elements => {
+  const focusableIndices = [];
+  elements.forEach((node, index) => {
+    if (isValidMenuItemNode(node)) {
+      focusableIndices.push(index);
+    }
+  });
+  return focusableIndices;
+};
+export const hasMenuItemRole = component => {
+  var _component$props;
+
+  return isMenuItem(component === null || component === void 0 ? void 0 : (_component$props = component.props) === null || _component$props === void 0 ? void 0 : _component$props['role']);
+};

package/build/es/menu/menu.js

@@ -1,6 +1,8 @@
 import _JSXStyle from "styled-jsx/style";
 import PropTypes from 'prop-types';
 import React, { Children, cloneElement, isValidElement } from 'react';
+import { hasMenuItemRole } from './helpers.js';
+import { useMenuNavigation } from './use-menu.js';
 
 const Menu = _ref => {
   let {
@@ -9,15 +11,53 @@ const Menu = _ref => {
     dataTest,
     dense
   } = _ref;
+  const {
+    menuRef,
+    focusedIndex
+  } = useMenuNavigation(children);
+  const childrenToRender = Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return child;
+    }
+
+    const tabIndex = index === focusedIndex ? 0 : -1;
+    const childProps = { ...child.props
+    };
+
+    if (typeof child.type === 'string') {
+      // remove non-native props from native HTML elements
+      delete childProps.hideDivider;
+      delete childProps.dense;
+      delete childProps.active; // all ul children must be li elements
+      // add tabindex for focus to those elements that are/contain a menuitem
+
+      if (child.type === 'li') {
+        return hasMenuItemRole(child.props.children[0]) ? /*#__PURE__*/cloneElement(child, { ...childProps,
+          tabIndex
+        }) : /*#__PURE__*/cloneElement(child, childProps);
+      } else {
+        return /*#__PURE__*/React.createElement("li", {
+          tabIndex: hasMenuItemRole(child) ? tabIndex : null
+        }, /*#__PURE__*/cloneElement(child, childProps));
+      }
+    } else {
+      // assign non-native props to custom elements
+      childProps.dense = typeof child.props.dense === 'boolean' ? child.props.dense : dense;
+      childProps.hideDivider = typeof child.props.hideDivider !== 'boolean' && index === 0 ? true : child.props.hideDivider;
+      return /*#__PURE__*/cloneElement(child, { ...childProps,
+        tabIndex
+      });
+    }
+  });
   return /*#__PURE__*/React.createElement("ul", {
     "data-test": dataTest,
-    className: "jsx-3549878755" + " " + (className || "")
-  }, Children.map(children, (child, index) => /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
-    dense: typeof child.props.dense === 'boolean' ? child.props.dense : dense,
-    hideDivider: typeof child.props.hideDivider !== 'boolean' && index === 0 ? true : child.props.hideDivider
-  }) : child), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3549878755"
-  }, ["ul.jsx-3549878755{display:block;position:relative;width:100%;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]));
+    role: "menu",
+    ref: menuRef,
+    tabIndex: 0,
+    className: "jsx-1636612837" + " " + (className || "")
+  }, childrenToRender, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1636612837"
+  }, ["ul.jsx-1636612837{display:block;position:relative;width:100%;margin:0;padding:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"]));
 };
 
 Menu.defaultProps = {

package/build/es/menu/use-menu.js

@@ -0,0 +1,85 @@
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { getFocusableItemsIndices } from './helpers.js';
+export const useMenuNavigation = children => {
+  const menuRef = useRef(null);
+  const [focusableItemsIndices, setFocusableItemsIndices] = useState(null);
+  const [activeItemIndex, setActiveItemIndex] = useState(-1); // Initializes the indices for focusable items
+
+  useEffect(() => {
+    if (menuRef) {
+      const menuItems = Array.from(menuRef.current.children);
+      const itemsIndices = getFocusableItemsIndices(menuItems);
+      setFocusableItemsIndices(itemsIndices);
+    }
+  }, [children]); // Focus the active menu child
+
+  useEffect(() => {
+    if (menuRef) {
+      if (focusableItemsIndices !== null && focusableItemsIndices !== void 0 && focusableItemsIndices.length && activeItemIndex > -1) {
+        const currentIndex = focusableItemsIndices[activeItemIndex];
+        menuRef.current.children[currentIndex].focus();
+      }
+    }
+  }, [activeItemIndex, focusableItemsIndices]); // Navigate through focusable children using arrow keys
+  // Trigger actionable items
+
+  const handleKeyDown = useCallback(event => {
+    const totalFocusablePositions = focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices.length;
+
+    if (totalFocusablePositions) {
+      const lastIndex = totalFocusablePositions - 1;
+
+      switch (event.key) {
+        case 'ArrowUp':
+          event.preventDefault();
+          setActiveItemIndex(activeItemIndex > 0 ? activeItemIndex - 1 : lastIndex);
+          break;
+
+        case 'ArrowDown':
+          event.preventDefault();
+          setActiveItemIndex(activeItemIndex >= lastIndex ? 0 : activeItemIndex + 1);
+          break;
+
+        case 'Enter':
+        case ' ':
+          event.preventDefault();
+
+          if (event.target.nodeName === 'LI') {
+            event.target.children[0].click();
+          }
+
+          break;
+
+        default:
+          break;
+      }
+    }
+  }, [activeItemIndex, focusableItemsIndices]); // Event listeners for menu focus and key handling
+
+  useEffect(() => {
+    if (!menuRef) {
+      return;
+    }
+
+    const menu = menuRef.current; // Focus the first menu item when the menu receives focus
+
+    const handleFocus = event => {
+      if (event.target === menuRef.current) {
+        const firstItemIndex = focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices[0];
+        firstItemIndex && menuRef.current.children[firstItemIndex].focus();
+        setActiveItemIndex(0);
+      }
+    };
+
+    menu.addEventListener('focus', handleFocus);
+    menu.addEventListener('keydown', handleKeyDown);
+    return () => {
+      menu.removeEventListener('focus', handleFocus);
+      menu.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [activeItemIndex, focusableItemsIndices, handleKeyDown]);
+  return {
+    menuRef,
+    focusedIndex: focusableItemsIndices === null || focusableItemsIndices === void 0 ? void 0 : focusableItemsIndices[activeItemIndex]
+  };
+};

package/build/es/menu-divider/menu-divider.js

@@ -12,6 +12,7 @@ const MenuDivider = _ref => {
   } = _ref;
   return /*#__PURE__*/React.createElement("li", {
     "data-test": dataTest,
+    role: "separator",
     className: _JSXStyle.dynamic([["591815244", [colors.white]]]) + " " + (className || "")
   }, /*#__PURE__*/React.createElement(Divider, {
     dense: dense

package/build/es/menu-item/__tests__/menu-item.test.js

@@ -0,0 +1,67 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import { MenuItem } from '../menu-item.js';
+describe('Menu Component', () => {
+  it('Default menu item has role', () => {
+    const menuItemDataTest = 'data-test-menu-item';
+    const wrapper = mount( /*#__PURE__*/React.createElement(MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Menu item"
+    }));
+    const menuItem = wrapper.find({
+      'data-test': menuItemDataTest
+    });
+    expect(menuItem.childAt(0).prop('role')).toBe('menuitem');
+    expect(menuItem.childAt(0).prop('aria-disabled')).toBe(undefined);
+    expect(menuItem.childAt(0).prop('aria-label')).toBe('Menu item');
+  });
+  it('Disabled menu item has aria-disabled attribute', () => {
+    const menuItemDataTest = 'data-test-menu-item';
+    const wrapper = mount( /*#__PURE__*/React.createElement(MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Disabled menu item",
+      disabled: true
+    }));
+    const menuItem = wrapper.find({
+      'data-test': menuItemDataTest
+    });
+    expect(menuItem.childAt(0).prop('role')).toBe('menuitem');
+    expect(menuItem.childAt(0).prop('aria-disabled')).toBe(true);
+    expect(menuItem.childAt(0).prop('aria-label')).toBe('Disabled menu item');
+  });
+  it('Toggle-able menu item has menuitemcheckbox role', () => {
+    const menuItemDataTest = 'data-test-menu-item';
+    const wrapper = mount( /*#__PURE__*/React.createElement(MenuItem, {
+      dataTest: menuItemDataTest,
+      label: "Toggle-able menu item",
+      checkbox: true,
+      checked: false
+    }));
+    const menuItem = wrapper.find({
+      'data-test': menuItemDataTest
+    });
+    expect(menuItem.childAt(0).prop('role')).not.toBe('menuitem');
+    expect(menuItem.childAt(0).prop('role')).toBe('menuitemcheckbox');
+    expect(menuItem.childAt(0).prop('aria-checked')).toBe(false);
+    expect(menuItem.childAt(0).prop('aria-label')).toBe('Toggle-able menu item');
+  });
+  it('Submenu has relevant aria attributes', () => {
+    const showSubMenu = false;
+    const wrapper = mount( /*#__PURE__*/React.createElement(MenuItem, {
+      showSubMenu: showSubMenu,
+      toggleSubMenu: () => jest.fn(),
+      label: "Parent of submenus"
+    }, /*#__PURE__*/React.createElement(MenuItem, {
+      label: "Test submenu child"
+    })));
+    const menuItem = wrapper.find({
+      role: 'menuitem'
+    });
+    expect(menuItem.prop('aria-haspopup')).toBe('menu');
+    expect(menuItem.prop('aria-expanded')).toBe(false);
+    expect(menuItem.prop('aria-label')).toBe('Parent of submenus');
+    expect(wrapper.find({
+      label: 'Test submenu child'
+    }).exists()).toBe(false);
+  });
+});

package/build/es/menu-item/menu-item.js

@@ -49,17 +49,22 @@ const MenuItem = _ref2 => {
     label,
     showSubMenu,
     toggleSubMenu,
-    suffix
+    suffix,
+    checkbox,
+    checked,
+    tabIndex
   } = _ref2;
   const menuItemRef = useRef();
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("li", {
     ref: menuItemRef,
     "data-test": dataTest,
+    role: "presentation",
+    tabIndex: tabIndex,
     className: "jsx-".concat(styles.__hash) + " " + (cx(className, {
       destructive,
       disabled,
       dense,
-      active: active || showSubMenu,
+      active: active || showSubMenu || tabIndex === 0,
       'with-chevron': children || chevron
     }) || "")
   }, /*#__PURE__*/React.createElement("a", {
@@ -71,6 +76,12 @@ const MenuItem = _ref2 => {
       isLink: !!href,
       value
     }) : undefined,
+    role: checkbox ? 'menuitemcheckbox' : 'menuitem',
+    "aria-checked": checkbox ? checked : null,
+    "aria-disabled": disabled,
+    "aria-haspopup": children && 'menu',
+    "aria-expanded": showSubMenu,
+    "aria-label": label,
     className: "jsx-".concat(styles.__hash)
   }, icon && /*#__PURE__*/React.createElement("span", {
     className: "jsx-".concat(styles.__hash) + " " + "icon"
@@ -95,6 +106,8 @@ MenuItem.defaultProps = {
 };
 MenuItem.propTypes = {
   active: PropTypes.bool,
+  checkbox: PropTypes.bool,
+  checked: PropTypes.bool,
   chevron: PropTypes.bool,
 
   /**
@@ -122,6 +135,7 @@ MenuItem.propTypes = {
 
   /** A supporting element shown at the end of the menu item */
   suffix: PropTypes.node,
+  tabIndex: PropTypes.number,
 
   /** For using menu item as a link */
   target: PropTypes.string,

package/build/es/menu-item/menu-item.stories.js

@@ -134,7 +134,9 @@ export const ToggleMenuItem = args => {
   return /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem, _extends({}, args, {
     onClick: toggleOn,
     icon: icon,
-    label: "A toggle menu item"
+    label: "A toggle menu item",
+    checkbox: true,
+    checked: on
   })));
 };
 ToggleMenuItem.parameters = {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/menu",
-    "version": "9.9.0-alpha.1",
+    "version": "9.9.1",
     "description": "UI Menu",
     "repository": {
         "type": "git",
@@ -33,13 +33,13 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/card": "9.9.0-alpha.1",
-        "@dhis2-ui/divider": "9.9.0-alpha.1",
-        "@dhis2-ui/layer": "9.9.0-alpha.1",
-        "@dhis2-ui/popper": "9.9.0-alpha.1",
-        "@dhis2-ui/portal": "9.9.0-alpha.1",
-        "@dhis2/ui-constants": "9.9.0-alpha.1",
-        "@dhis2/ui-icons": "9.9.0-alpha.1",
+        "@dhis2-ui/card": "9.9.1",
+        "@dhis2-ui/divider": "9.9.1",
+        "@dhis2-ui/layer": "9.9.1",
+        "@dhis2-ui/popper": "9.9.1",
+        "@dhis2-ui/portal": "9.9.1",
+        "@dhis2/ui-constants": "9.9.1",
+        "@dhis2/ui-icons": "9.9.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },

package/types/index.d.ts

@@ -42,6 +42,14 @@ export const MenuDivider: React.FC<MenuDividerProps>
 
 export interface MenuItemProps {
     active?: boolean
+    /**
+     * Specifies if menu item is a checkbox
+     */
+    checkbox?: boolean
+    /**
+     * checkbox state for toggleable menu items
+     */
+    checked?: boolean
     chevron?: boolean
     /**
      * Nested menu items can become submenus.
@@ -69,6 +77,11 @@ export interface MenuItemProps {
      * When true, nested menu items are shown in a Popper
      */
     showSubMenu?: boolean
+    /**
+     * A supporting element shown at the end of the menu item
+     */
+    suffix: React.ReactNode
+    tabIndex?: number
     /**
      * For using menu item as a link
      */