From 327119ce8a57a447bea6d8ac78b754735f18269c Mon Sep 17 00:00:00 2001 From: Matheus-de-Souza Date: Mon, 6 Dec 2021 15:37:16 -0300 Subject: [PATCH 01/12] fix: add aria label and tab index --- src/components/Header/Header.js | 2 +- src/components/Header/HeaderListItem.js | 1 + src/components/Header/HeaderLogo.js | 2 +- 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 3f7132f2..d293135c 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -258,7 +258,7 @@ class Header extends React.Component { {Array.isArray(navLinks) && navLinks.map((link, i) => (
  • - {link.name} + {link.name}
    • ))} diff --git a/src/components/Header/HeaderListItem.js b/src/components/Header/HeaderListItem.js index 744a4112..24fd968c 100644 --- a/src/components/Header/HeaderListItem.js +++ b/src/components/Header/HeaderListItem.js @@ -35,6 +35,7 @@ const HeaderListItem = (props) => { window.location.href.startsWith(href), })} href={href} + tabIndex="0" {...other} > {children} diff --git a/src/components/Header/HeaderLogo.js b/src/components/Header/HeaderLogo.js index d7a207fb..8abf2e88 100644 --- a/src/components/Header/HeaderLogo.js +++ b/src/components/Header/HeaderLogo.js @@ -9,7 +9,7 @@ const HeaderLogo = (props) => { return (
    - + {children}
    {(platformName || appName) && ( From 57f8b36f455a4687886212b39aa22e8131466477 Mon Sep 17 00:00:00 2001 From: Matheus-de-Souza Date: Wed, 8 Dec 2021 08:41:03 -0300 Subject: [PATCH 02/12] fix: add and update aria labels from header --- src/components/Header/Header.js | 5 +++++ src/components/Header/HeaderListItem.js | 1 - src/components/HeaderMenu/HeaderMenu.js | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index d293135c..f0e275fc 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -331,6 +331,7 @@ class Header extends React.Component { id="notification-icon" onClick={this.handleIconClick('Notification')} onKeyDown={this.handleIconKeypress('Notification')} + aria-label={`Notification button`} > {this.state.hasNewNotifications ? : } @@ -365,6 +367,7 @@ class Header extends React.Component { id="bmrg-header-profile-icon" onClick={this.handleIconClick('Profile')} onKeyDown={this.handleIconKeypress('Profile')} + aria-label={`Profile options button`} > @@ -381,6 +384,7 @@ class Header extends React.Component { className={`${prefix}--bmrg-header-list__item-Globalicon`} onClick={this.handleIconClick('Global')} onKeyDown={this.handleIconKeypress('Global')} + aria-label={`Global button`} > @@ -393,6 +397,7 @@ class Header extends React.Component { id="bmrg-header-right-panel-icon" onClick={this.handleIconClick('RightPanel')} onKeyDown={this.handleIconKeypress('RightPanel')} + aria-label={`Right panel button`} > {renderRightPanel.icon} diff --git a/src/components/Header/HeaderListItem.js b/src/components/Header/HeaderListItem.js index 24fd968c..f7bdd852 100644 --- a/src/components/Header/HeaderListItem.js +++ b/src/components/Header/HeaderListItem.js @@ -17,7 +17,6 @@ const HeaderListItem = (props) => {
      {React.Children.map(children, (child) => ( -
    • {child}
      • +
    • {child}
      • ))}
    From 1012749784ecb9ed3e917079a0a7ad7d07e3c3d2 Mon Sep 17 00:00:00 2001 From: Matheus-de-Souza Date: Wed, 8 Dec 2021 08:43:19 -0300 Subject: [PATCH 03/12] fix: new version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 94de59ed..6fe86161 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@boomerang-io/carbon-addons-boomerang-react", "description": "Carbon Addons for Boomerang apps", - "version": "1.4.0-beta.13", + "version": "1.4.0-beta.14", "author": { "name": "Tim Bula", "email": "timrbula@gmail.com" From e45f1b389124c6522732e8c2c221595b8a43c826 Mon Sep 17 00:00:00 2001 From: Matheus-de-Souza Date: Wed, 8 Dec 2021 09:33:51 -0300 Subject: [PATCH 04/12] fix: update package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6fe86161..86d827d4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@boomerang-io/carbon-addons-boomerang-react", "description": "Carbon Addons for Boomerang apps", - "version": "1.4.0-beta.14", + "version": "1.4.1-beta.1", "author": { "name": "Tim Bula", "email": "timrbula@gmail.com" From 2b822a126c3c9e0d96b7ca7e8c57897652f93f1f Mon Sep 17 00:00:00 2001 From: Matheus-de-Souza Date: Wed, 8 Dec 2021 10:37:41 -0300 Subject: [PATCH 05/12] fix: update yup version --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 86d827d4..03f51b89 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "react": "^16.8.6", "react-dom": "^16.8.6", "react-router-dom": "^5.1.2", - "yup": "^0.27.0" + "yup": "^0.32.11" }, "devDependencies": { "@babel/core": "^7.9.0", @@ -148,7 +148,7 @@ "stylelint-config-recommended-scss": "^3.3.0", "stylelint-scss": "^3.10.0", "whatwg-fetch": "^3.0.0", - "yup": "^0.27.0" + "yup": "^0.32.11" }, "browserslist": { "development": [ From e23b7a116f08290848a397b39a759c681dc7b776 Mon Sep 17 00:00:00 2001 From: Matheus-de-Souza Date: Wed, 8 Dec 2021 10:38:21 -0300 Subject: [PATCH 06/12] fix: update package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 03f51b89..5e4e705a 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@boomerang-io/carbon-addons-boomerang-react", "description": "Carbon Addons for Boomerang apps", - "version": "1.4.1-beta.1", + "version": "1.4.1-beta.2", "author": { "name": "Tim Bula", "email": "timrbula@gmail.com" From c05521f0cb54aae414dcb01f02ac1164a5e449ab Mon Sep 17 00:00:00 2001 From: Matheus-de-Souza Date: Thu, 9 Dec 2021 17:25:13 -0300 Subject: [PATCH 07/12] fix: yup version and aria label for two buttons --- package.json | 2 +- src/components/Header/Header.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 5e4e705a..24e02065 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,7 @@ "react": "^16.8.6", "react-dom": "^16.8.6", "react-router-dom": "^5.1.2", - "yup": "^0.32.11" + "yup": "^0.27.0" }, "devDependencies": { "@babel/core": "^7.9.0", diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index f0e275fc..4237840f 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -272,6 +272,7 @@ class Header extends React.Component { ariaExpanded={this.state.isMobileNavActive} onClick={this.handleIconClick('MobileNav')} onKeyDown={this.handleIconKeypress('MobileNav')} + aria-label={`Mobile navigation button`} > From 5418ab977cb32a1025a65e799ad30711516cba1e Mon Sep 17 00:00:00 2001 From: Matheus-de-Souza Date: Thu, 9 Dec 2021 17:28:09 -0300 Subject: [PATCH 08/12] fix: new publish version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 24e02065..04df95ae 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@boomerang-io/carbon-addons-boomerang-react", "description": "Carbon Addons for Boomerang apps", - "version": "1.4.1-beta.2", + "version": "1.4.1-beta.3", "author": { "name": "Tim Bula", "email": "timrbula@gmail.com" From 80403bc3200f465f7dd3cc6c85927a73df25886c Mon Sep 17 00:00:00 2001 From: Matheus-de-Souza Date: Fri, 10 Dec 2021 09:45:18 -0300 Subject: [PATCH 09/12] fix: add aria label and alt text --- package.json | 2 +- src/components/AboutPlatform/AboutPlatform.js | 1 + src/components/Header/Header.js | 14 +++++++------- src/components/HeaderMenuLink/HeaderMenuLink.js | 5 +++-- .../PlatformNotifications/PlatformNotifications.js | 3 ++- .../PlatformNotificationsContainer.js | 2 ++ 6 files changed, 16 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 04df95ae..524702a6 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@boomerang-io/carbon-addons-boomerang-react", "description": "Carbon Addons for Boomerang apps", - "version": "1.4.1-beta.3", + "version": "1.4.1-beta.4", "author": { "name": "Tim Bula", "email": "timrbula@gmail.com" diff --git a/src/components/AboutPlatform/AboutPlatform.js b/src/components/AboutPlatform/AboutPlatform.js index 3379a17b..02f8f766 100644 --- a/src/components/AboutPlatform/AboutPlatform.js +++ b/src/components/AboutPlatform/AboutPlatform.js @@ -76,6 +76,7 @@ const AboutPlatformContainer = ({ version, organization, isFlowApp }) => {
  • diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 4237840f..722a0d59 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -272,7 +272,7 @@ class Header extends React.Component { ariaExpanded={this.state.isMobileNavActive} onClick={this.handleIconClick('MobileNav')} onKeyDown={this.handleIconKeypress('MobileNav')} - aria-label={`Mobile navigation button`} + aria-label={`Mobile navigation menu`} > Navigation{' '} - {this.state.isMobileNavActive ? : } + {this.state.isMobileNavActive ? : } {this.state.isMobileNavActive && ( @@ -313,7 +313,7 @@ class Header extends React.Component { onKeyDown={this.handleIconKeypress('Requests')} aria-label={`Requests button`} > - + {this.state.isRequestsActive && ( @@ -335,7 +335,7 @@ class Header extends React.Component { onKeyDown={this.handleIconKeypress('Notification')} aria-label={`Notification button`} > - {this.state.hasNewNotifications ? : } + {this.state.hasNewNotifications ? : } - + {this.state.isHelpActive && {this.props.onHelpClick}}
    • @@ -371,7 +371,7 @@ class Header extends React.Component { onKeyDown={this.handleIconKeypress('Profile')} aria-label={`Profile options button`} > - + )} {this.state.isProfileActive && ( @@ -388,7 +388,7 @@ class Header extends React.Component { onKeyDown={this.handleIconKeypress('Global')} aria-label={`Global button`} > - + )} {renderRightPanel && Object.keys(renderRightPanel).length ? ( diff --git a/src/components/HeaderMenuLink/HeaderMenuLink.js b/src/components/HeaderMenuLink/HeaderMenuLink.js index 13a5633c..75dd16eb 100644 --- a/src/components/HeaderMenuLink/HeaderMenuLink.js +++ b/src/components/HeaderMenuLink/HeaderMenuLink.js @@ -92,7 +92,7 @@ function HeaderMenuLink({ className, external = true, href, iconName, style, tex return (
    -
    diff --git a/src/components/PlatformNotifications/PlatformNotificationsContainer.js b/src/components/PlatformNotifications/PlatformNotificationsContainer.js index c4fc638b..b1ec6cf0 100644 --- a/src/components/PlatformNotifications/PlatformNotificationsContainer.js +++ b/src/components/PlatformNotifications/PlatformNotificationsContainer.js @@ -190,6 +190,7 @@ export default class PlatformNotificationsContainer extends React.Component { className={`${prefix}--bmrg-notifications-header__clear`} disabled={!currentNotifications.length} onClick={this.handleReadAllNotifications.bind(this)} + aria-label="Mark all read" > Mark All Read @@ -209,6 +210,7 @@ export default class PlatformNotificationsContainer extends React.Component { Open Notification Center From 6594d7d845d4ff3388e815997ebe78febd02f472 Mon Sep 17 00:00:00 2001 From: Matheus-de-Souza Date: Fri, 10 Dec 2021 10:49:54 -0300 Subject: [PATCH 10/12] fix: alt text for icons --- package.json | 2 +- src/components/Header/Header.js | 2 +- src/components/PlatformNotifications/PlatformNotifications.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 524702a6..b5cb84dc 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@boomerang-io/carbon-addons-boomerang-react", "description": "Carbon Addons for Boomerang apps", - "version": "1.4.1-beta.4", + "version": "1.4.1-beta.5", "author": { "name": "Tim Bula", "email": "timrbula@gmail.com" diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 722a0d59..b29ee2ba 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -283,7 +283,7 @@ class Header extends React.Component { }} > Navigation{' '} - {this.state.isMobileNavActive ? : } + {this.state.isMobileNavActive ? : } {this.state.isMobileNavActive && ( diff --git a/src/components/PlatformNotifications/PlatformNotifications.js b/src/components/PlatformNotifications/PlatformNotifications.js index f16ba1b2..ab3249df 100644 --- a/src/components/PlatformNotifications/PlatformNotifications.js +++ b/src/components/PlatformNotifications/PlatformNotifications.js @@ -36,7 +36,7 @@ function Notification({ readNotification, notificationInfo }) { className={`${prefix}--bmrg-notification-content__close`} onClick={() => readNotification(notificationInfo.id)} > - +
    From 31dac4dcd1c102ee631ad6bc1aac72116b8340cf Mon Sep 17 00:00:00 2001 From: "Tim R. Bula" Date: Wed, 26 Jan 2022 13:09:11 -0600 Subject: [PATCH 11/12] feat: improve a11y, cleanup a few small things --- package.json | 2 +- .../ComboBoxMultiSelect.spec.js | 2 +- src/components/Error403/Error403.spec.js | 6 +- src/components/Error404/Error404.spec.js | 8 +- src/components/Header/Header.js | 218 ++- src/components/Header/HeaderMenuBmrg.js | 7 +- src/components/Header/_header.scss | 20 +- src/components/HeaderMenu/HeaderMenu.js | 23 +- .../PlatformNotificationsContainer.js | 86 +- .../ProfileSettings/ProfileSettings.js | 2 +- .../ProfileSettings/ProfileSettings.spec.js | 2 +- .../TooltipHover/TooltipHover.stories.js | 24 +- src/components/UIShell/UIShell.stories.js | 12 +- src/internal/HeaderMenuModalWrapper.js | 1 - yarn.lock | 1526 ++++++++++------- 15 files changed, 1124 insertions(+), 815 deletions(-) diff --git a/package.json b/package.json index 2332d044..45d05454 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,6 @@ }, "dependencies": { "@carbon/elements": "^10.21.0", - "@carbon/themes": "^10.21.0", "@stomp/stompjs": "^5.4.2", "@tippyjs/react": "^4.0.2", "carbon-icons": "^7.0.7", @@ -57,6 +56,7 @@ "date-fns": "^1.30.1", "dompurify": "^2.0.6", "downshift": "^5.2.1", + "focus-trap-react": "^8.9.1", "invariant": "^2.2.3", "js-file-download": "^0.4.7", "lodash.isequal": "^4.5.0", diff --git a/src/components/ComboBoxMultiSelect/ComboBoxMultiSelect.spec.js b/src/components/ComboBoxMultiSelect/ComboBoxMultiSelect.spec.js index 376dbcc0..5ee03c1f 100644 --- a/src/components/ComboBoxMultiSelect/ComboBoxMultiSelect.spec.js +++ b/src/components/ComboBoxMultiSelect/ComboBoxMultiSelect.spec.js @@ -50,7 +50,7 @@ test('select and remove items', async () => { expect(queryByLabelText(/Clear filter cat/i)).toBeInTheDocument(); }); - const clearButton = getByRole('button', { name: 'Clear Selection' }); + const clearButton = getByRole('button', { name: 'Clear selected item' }); fireEvent.click(clearButton); await waitFor(() => { expect(queryByLabelText(/Clear filter panda/i)).not.toBeInTheDocument(); diff --git a/src/components/Error403/Error403.spec.js b/src/components/Error403/Error403.spec.js index 5bc60d7e..4f05b500 100644 --- a/src/components/Error403/Error403.spec.js +++ b/src/components/Error403/Error403.spec.js @@ -4,8 +4,8 @@ import Error403 from './Error403'; test('render Error403 with defaults', async () => { const { getByText } = render(); - expect(getByText('403 - Access Forbidden')).toBeInTheDocument(); - expect(getByText('You’ve found yourself in deep water.')).toBeInTheDocument(); + expect(getByText('403 Access Forbidden')).toBeInTheDocument(); + expect(getByText(`Looks like you've taken a wrong turn.`)).toBeInTheDocument(); expect( getByText('You shouldn’t be here - contact the local authorities if you disagree.') ).toBeInTheDocument(); @@ -14,7 +14,7 @@ test('render Error403 with defaults', async () => { test('render Error403 without text', async () => { const { queryByText } = render(); expect(queryByText('403 - Access Forbidden')).not.toBeInTheDocument(); - expect(queryByText('You’ve found yourself in deep water.')).not.toBeInTheDocument(); + expect(queryByText(`Looks like you've taken a wrong turn.`)).not.toBeInTheDocument(); expect( queryByText('You shouldn’t be here - contact the local authorities if you disagree.') ).not.toBeInTheDocument(); diff --git a/src/components/Error404/Error404.spec.js b/src/components/Error404/Error404.spec.js index db241ee7..83e3cf12 100644 --- a/src/components/Error404/Error404.spec.js +++ b/src/components/Error404/Error404.spec.js @@ -5,15 +5,15 @@ import Error404 from './Error404'; test('render Error404 with defaults', async () => { const { getByText } = render(); - expect(getByText('404 - Page Not Found')).toBeInTheDocument(); - expect(getByText('Crikey. Something seems to have swam off with this page.')).toBeInTheDocument(); + expect(getByText('404 Page Not Found')).toBeInTheDocument(); + expect(getByText('We spaced out and couldn’t find your page.')).toBeInTheDocument(); expect(getByText('Try refreshing, or contact the local authorities.')).toBeInTheDocument(); }); test('render Error404 without text', async () => { const { queryByText } = render(); - expect(queryByText('403 - Access Forbidden')).not.toBeInTheDocument(); - expect(queryByText('You’ve found yourself in deep water.')).not.toBeInTheDocument(); + expect(queryByText('404 Page Not Found')).not.toBeInTheDocument(); + expect(queryByText('We spaced out and couldn’t find your page.')).not.toBeInTheDocument(); expect( queryByText('You shouldn’t be here - contact the local authorities if you disagree.') ).not.toBeInTheDocument(); diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index b29ee2ba..96ca5e42 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -2,7 +2,6 @@ import React from 'react'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { - AppSwitcher20, ChevronDown16, ChevronUp16, Collaborate24, @@ -12,9 +11,8 @@ import { NotificationNew24, } from '@carbon/icons-react'; import { settings } from 'carbon-components'; +import FocusTrap from 'focus-trap-react'; import { SkipToContent } from 'carbon-components-react/lib/components/UIShell'; - -// import PlatformBanner from '../PlatformBanner'; import PlatformNotificationsContainer from '../PlatformNotifications'; import HeaderMenu from '../HeaderMenu'; import NotificationsContainer from '../Notifications/NotificationsContainer'; @@ -30,6 +28,20 @@ import BoomerangLogo from './assets/BoomerangLogo'; const { prefix } = settings; +const stateToButtonElemIdMap = { + isHelpActive: 'navigation-help-menu-button', + isMobileNavActive: 'navigation-mobile-menu-button', + isNotificationActive: 'navigation-notification-menu-button', + isProfileActive: 'navigation-profile-menu-button', + isRequestsActive: 'navigation-requests-menu-button', + isRightPanelActive: 'navigation-right-panel-button', + isSidenavActive: 'navigation-sidenav-menu-button', +}; + +function transformToIsStateKey(key) { + return `is${key}Active`; +} + class Header extends React.Component { static propTypes = { appName: PropTypes.string, @@ -58,8 +70,6 @@ class Header extends React.Component { */ platformMessage: PropTypes.object, profileChildren: PropTypes.array, - - renderGlobalSwitcher: PropTypes.bool, renderLogo: PropTypes.bool, /** @@ -87,15 +97,14 @@ class Header extends React.Component { static defaultProps = {}; state = { - isMobileNavActive: false, + hasNewNotifications: false, isHelpActive: false, - isMenuActive: false, + isMobileNavActive: false, isNotificationActive: false, isProfileActive: false, - isGlobalActive: false, isRequestsActive: false, isRightPanelActive: false, - hasNewNotifications: false, + isSidenavActive: false, }; navRef = React.createRef(); @@ -104,22 +113,26 @@ class Header extends React.Component { sideNavButtonRef = React.createRef(); componentDidMount() { - document.addEventListener('mousedown', this.handleClickOutside); - document.addEventListener('keydown', this.handleClickOutside); + document.addEventListener('mousedown', this.handleClickoutsideEvent); + document.addEventListener('keydown', this.handleKeyEvent); } componentWillUnmount() { - document.removeEventListener('mousedown', this.handleClickOutside); - document.removeEventListener('keydown', this.handleClickOutside); + document.removeEventListener('mousedown', this.handleClickoutsideEvent); + document.removeEventListener('keydown', this.handleKeyEvent); } - handleClickOutside = (event) => { + /** + * Handle clicking outside a open menu and closing the appropriate one + * @param {object} event - mousedown event + */ + handleClickoutsideEvent = (event) => { if (this.navRef && !this.navRef.current?.contains(event.target)) { - this.handleClickOutsideHeaderState(); + this.handleCloseHeaderMenus(); } if (this.mobileNavRef && !this.mobileNavRef.current?.contains(event.target)) { - this.handleClickOutsideMobileNavState(); + this.handleCloseMobileNav(); } if ( @@ -127,37 +140,76 @@ class Header extends React.Component { !this.sideNavRef.current?.contains(event.target) && !this.sideNavButtonRef.current?.contains(event.target) ) { - this.handleClickOutsideSidenavState(); + this.handleCloseSidenav(); + } + }; + + /** + * Close the active menu and focus on the button that triggered it + * Close menu + * via the ESC key + * @param {object} event - keydown event + */ + handleKeyEvent = (event) => { + if (event.key === 'Escape') { + this.handleCloseViaEsc(); + return; + } + + if (event.key === 'Tab') { + // Only have to test for the right panel here bc other menus have a focus trap + if (this.state.isRightPanelActive && !this.navRef.current?.contains(event.target)) { + this.handleCloseHeaderMenus(); + return; + } } }; - handleClickOutsideHeaderState = () => { + handleCloseHeaderMenus = () => { this.setState({ isHelpActive: false, isNotificationActive: false, isProfileActive: false, - isGlobalActive: false, isRequestsActive: false, isRightPanelActive: false, }); }; - handleClickOutsideMobileNavState = () => { + handleCloseMobileNav = () => { this.setState({ isMobileNavActive: false, }); }; - handleClickOutsideSidenavState = () => { + handleCloseSidenav = () => { this.setState({ - isMenuActive: false, + isSidenavActive: false, }); }; + handleCloseViaEsc = () => { + const activeMenuStateKey = Object.keys(this.state).find( + (key) => key.startsWith('is') && this.state[key] + ); + + if (activeMenuStateKey) { + this.setState({ + [activeMenuStateKey]: false, + }); + + const elemToReceiveFocus = document.getElementById( + stateToButtonElemIdMap[activeMenuStateKey] + ); + if (elemToReceiveFocus) { + elemToReceiveFocus.focus(); + } + } + }; + /** * 13 - corresponds to return/enter key * 32 - corresponds to space key - * @param {string} type - Passes in the type of click (i.e. profile, notification, global) + * @param {string} type - Passes in the type of click (i.e. profile, notification) * @returns {Function} - if the appropriate type of click, calls handleIconClick with specified params */ handleIconKeypress = (type) => (evt) => { @@ -167,15 +219,16 @@ class Header extends React.Component { }; /** - * @param {string} type - Passes in the type of click (i.e. profile, notification, global) + * @param {string} type - Passes in the type of click (i.e. profile, notification) * @returns {Function} - finds the appropriate click type to trigger function, sets all other state items that have * 'is' prefix to false (in order to only have one active item at a time) */ handleIconClick = (type) => (evt) => { + console.log('running'); Object.keys(this.state) .filter((key) => key.startsWith('is')) .forEach((key) => { - const clickType = `is${type}Active`; + const clickType = transformToIsStateKey(type); if (key === clickType) { this.setState({ [clickType]: !this.state[clickType], @@ -207,7 +260,7 @@ class Header extends React.Component { onMenuClose = () => { this.setState({ - isMenuActive: false, + isSidenavActive: false, }); }; @@ -218,8 +271,6 @@ class Header extends React.Component { className, navLinks, platformName, - // platformMessage, - renderGlobalSwitcher, renderLogo, renderRightPanel, skipToContentProps, @@ -233,10 +284,11 @@ class Header extends React.Component { {skipToContentProps ? : null} {this.props.renderSidenav && ( )} -