From e3990a758c9564586cc5e17f4ec3c2078af11930 Mon Sep 17 00:00:00 2001 From: Rian Tavares Date: Thu, 30 Sep 2021 20:29:02 -0300 Subject: [PATCH 1/2] feat(HeaderMenu): include isCurrentPage props to HeaderMenu component set HeaderMenu as active when selected, contribute to the UX and accessibility --- .all-contributorsrc | 10 ++++++++++ README.md | 1 + .../src/components/ui-shell/_header.scss | 19 +++++++++++++++++++ .../src/components/UIShell/HeaderMenu.js | 8 +++++++- .../components/ui-shell/header/_header.scss | 19 +++++++++++++++++++ 5 files changed, 56 insertions(+), 1 deletion(-) diff --git a/.all-contributorsrc b/.all-contributorsrc index 444d90530529..bd2fb43a5a28 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -801,6 +801,16 @@ "contributions": [ "code" ] + }, + { + "login": "RianTavares", + "name": "@RianTavaresOn", + "avatar_url": "https://avatars.githubusercontent.com/u/8935295?v=4", + "profile": "https://riantavares.github.io/", + "contributions": [ + "code", + "design" + ] } ], "commitConvention": "none" diff --git a/README.md b/README.md index 1cd859141ab4..76884336c886 100644 --- a/README.md +++ b/README.md @@ -187,6 +187,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
Adam Alston
📖
Krithika S Udupa
📖
Eshin Griffith
💻 +
@RianTavaresOn
💻 🎨 diff --git a/packages/components/src/components/ui-shell/_header.scss b/packages/components/src/components/ui-shell/_header.scss index 22e5f21f5b34..77118b94f71b 100644 --- a/packages/components/src/components/ui-shell/_header.scss +++ b/packages/components/src/components/ui-shell/_header.scss @@ -245,6 +245,25 @@ position: relative; } + .#{$prefix}--header__submenu--current::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + border-bottom: 3px solid $border-interactive; + content: ''; + } + + .#{$prefix}--header__submenu--current:focus { + border: 2px solid $focus; + } + + .#{$prefix}--header__submenu--current:focus::after { + border: 0; + } + .#{$prefix}--header__menu-title[aria-haspopup='true'] { position: relative; } diff --git a/packages/react/src/components/UIShell/HeaderMenu.js b/packages/react/src/components/UIShell/HeaderMenu.js index ac49ec9d930f..0f7792aec7c7 100644 --- a/packages/react/src/components/UIShell/HeaderMenu.js +++ b/packages/react/src/components/UIShell/HeaderMenu.js @@ -160,6 +160,7 @@ class HeaderMenu extends React.Component { render() { const prefix = this.context; const { + isCurrentPage, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className: customClassName, @@ -174,7 +175,12 @@ class HeaderMenu extends React.Component { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, }; - const className = cx(`${prefix}--header__submenu`, customClassName); + const className = cx({ + [`${prefix}--header__submenu`]: true, + [customClassName]: true, + [`${prefix}--header__submenu--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# // - The focus is handled by the menuitem, onMouseOver is for mouse diff --git a/packages/styles/scss/components/ui-shell/header/_header.scss b/packages/styles/scss/components/ui-shell/header/_header.scss index 3809b2602699..b88dcda6f355 100644 --- a/packages/styles/scss/components/ui-shell/header/_header.scss +++ b/packages/styles/scss/components/ui-shell/header/_header.scss @@ -269,6 +269,25 @@ position: relative; } + .#{$prefix}--header__submenu--current::after { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + border-bottom: 3px solid $border-interactive; + content: ''; + } + + .#{$prefix}--header__submenu--current:focus { + border: 2px solid $focus; + } + + .#{$prefix}--header__submenu--current:focus::after { + border: 0; + } + .#{$prefix}--header__menu-title[aria-haspopup='true'] { position: relative; } From 51161b2c40c94403e53c934b204c27fc070c96db Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Wed, 20 Oct 2021 16:27:31 -0500 Subject: [PATCH 2/2] chore: update storybook to show example of isCurrentPage on sub-link --- packages/react/src/components/UIShell/UIShell-story.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js index f202fbce11f6..abf309dcb68c 100644 --- a/packages/react/src/components/UIShell/UIShell-story.js +++ b/packages/react/src/components/UIShell/UIShell-story.js @@ -203,14 +203,14 @@ export const HeaderBaseWNavigation = withReadme(readme, () => ( [Platform] - - Link 1 - + Link 1 Link 2 Link 3 - + Sub-link 1 - Sub-link 2 + + Sub-link 2 + Sub-link 3