Skip to content

Commit

Permalink
fix(HeaderMenu): menu-item--current instead of submenu--current (carb…
Browse files Browse the repository at this point in the history
hannelevaltanen committed Oct 9, 2022
1 parent 20ba60a commit e57515f
Showing 1 changed file with 20 additions and 4 deletions.
24 changes: 20 additions & 4 deletions packages/react/src/components/UIShell/HeaderMenu.js
Original file line number Diff line number Diff line change
@@ -26,11 +26,21 @@ class HeaderMenu extends React.Component {
*/
...AriaLabelPropType,

/**
* Optionally provide a custom class to apply to the underlying `<li>` node
*/
className: PropTypes.string,

/**
* Provide a custom ref handler for the menu button
*/
focusRef: PropTypes.func,

/**
* Applies selected styles to the item if a user sets this to true and aria-current !== 'page'.
*/
isCurrentPage: PropTypes.bool,

/**
* Provide a label for the link text
*/
@@ -175,11 +185,17 @@ class HeaderMenu extends React.Component {
'aria-label': ariaLabel,
'aria-labelledby': ariaLabelledBy,
};
const className = cx({
const itemClassName = cx({
[`${prefix}--header__submenu`]: true,
[`${prefix}--header__submenu--current`]: isCurrentPage,
[customClassName]: !!customClassName,
});
const linkClassName = cx({
[`${prefix}--header__menu-item`]: true,
[`${prefix}--header__menu-title`]: true,
// We set the current class only if `isCurrentPage` is passed in and we do
// not have an `aria-current="page"` set for the breadcrumb item
[`${prefix}--header__menu-item--current`]: isCurrentPage,
});

// Notes on eslint comments and based on the examples in:
// https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
@@ -191,14 +207,14 @@ class HeaderMenu extends React.Component {
return (
<li // eslint-disable-line jsx-a11y/mouse-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
{...rest}
className={className}
className={itemClassName}
onKeyDown={this.handleMenuClose}
onClick={this.handleOnClick}
onBlur={this.handleOnBlur}>
<a // eslint-disable-line jsx-a11y/role-supports-aria-props,jsx-a11y/anchor-is-valid
aria-haspopup="menu" // eslint-disable-line jsx-a11y/aria-proptypes
aria-expanded={this.state.expanded}
className={`${prefix}--header__menu-item ${prefix}--header__menu-title`}
className={linkClassName}
href="#"
onKeyDown={this.handleOnKeyDown}
ref={this.handleMenuButtonRef}

0 comments on commit e57515f

Please sign in to comment.