diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap index 9180cba86580..5489d9fcfdc5 100644 --- a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap +++ b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap @@ -3134,118 +3134,102 @@ exports[`Header handles visibility and lock changes 1`] = `
- - + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + data-test-subj="toggleNavButton" + onClick={[Function]} > - - - - - - - - - - , + "className": "euiButtonEmpty__text", } } - className="euiHeaderSectionItemButton" - color="text" - data-test-subj="toggleNavButton" - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} > - - - - - + + + + + +
- - + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + data-test-subj="toggleNavButton" + onClick={[Function]} > - - - - - - - - - - , + "className": "euiButtonEmpty__text", } } - className="euiHeaderSectionItemButton" - color="text" - data-test-subj="toggleNavButton" - onBlur={[Function]} - onClick={[Function]} - onFocus={[Function]} > - - - - - + + + + + + `; + +exports[`Header toggles primary navigation menu when clicked 1`] = ` +
+
+
+ +
+ +
+ +
+ + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + data-test-subj="toggleNavButton" + onClick={[Function]} + > + + + +
+
+ +
+ +
+
+ +
+ + + + + + + + +
+ +
+
+
+
+
+
+ , + } + } + className="euiHeaderSectionItemButton header__homeLoaderNavButton" + color="text" + data-test-subj="homeLoader" + href="/" + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + > + + + + + +
+ + + + + +
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + + + + + +
+ +
+
+ +
+ +
+ +
+ +
+ + +
+ +
+
+ +
+ +
+
+ +
+ + + + + + + + } + closePopover={[Function]} + data-test-subj="helpMenuButton" + display="inlineBlock" + hasArrow={true} + id="headerHelpMenu" + isOpen={false} + ownFocus={true} + panelPaddingSize="s" + repositionOnScroll={true} + > +
+
+ + + + + + + + + + + + , + } + } + className="euiHeaderSectionItemButton" + color="text" + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + > + + + + + +
+
+
+
+
+
+
+
+ +
+ +
+ + + +
+
+ +
+
+
+ +
+ +
+

+ No recently viewed items +

+
+
+
+
+
+
+
+
+
+ + + + +
+
+ +
+ + +
+
+ +
    + + + + Dock navigation + + , + } + } + color="subdued" + data-test-subj="collapsible-nav-lock" + iconType="lockOpen" + label="Dock navigation" + onClick={[Function]} + size="xs" + > +
  • + +
  • +
    +
+
+
+
+
+
+
+
+ + + + +
+
+`; diff --git a/src/core/public/chrome/ui/header/header.test.tsx b/src/core/public/chrome/ui/header/header.test.tsx index bef0f152c6a4..1cfcc84acee5 100644 --- a/src/core/public/chrome/ui/header/header.test.tsx +++ b/src/core/public/chrome/ui/header/header.test.tsx @@ -37,6 +37,7 @@ import { applicationServiceMock, chromeServiceMock } from '../../../mocks'; import { Header } from './header'; import { StubBrowserStorage } from 'test_utils/stub_browser_storage'; import { ISidecarConfig, SIDECAR_DOCKED_MODE } from '../../../overlays'; +import { EuiHeaderSectionItemButton } from '@elastic/eui'; jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({ htmlIdGenerator: () => () => 'mockId', @@ -205,4 +206,17 @@ describe('Header', () => { expect(component.find('.header__toggleNavButtonSection').exists()).toBeFalsy(); }); + + it('toggles primary navigation menu when clicked', () => { + const branding = { + useExpandedHeader: false, + }; + const props = { + ...mockProps(), + branding, + }; + const component = mountWithIntl(
); + component.find(EuiHeaderSectionItemButton).first().simulate('click'); + expect(component).toMatchSnapshot(); + }); }); diff --git a/src/core/public/chrome/ui/header/header.tsx b/src/core/public/chrome/ui/header/header.tsx index adcbba00fe8c..9c4ae18d4a39 100644 --- a/src/core/public/chrome/ui/header/header.tsx +++ b/src/core/public/chrome/ui/header/header.tsx @@ -37,7 +37,6 @@ import { EuiHideFor, EuiIcon, EuiShowFor, - EuiToolTip, htmlIdGenerator, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; @@ -208,27 +207,25 @@ export function Header({ {shouldHideExpandIcon ? null : ( - setIsNavOpen(!isNavOpen)} + aria-expanded={isNavOpen} + aria-pressed={isNavOpen} + aria-controls={navId} + ref={toggleCollapsibleNavRef} > - setIsNavOpen(!isNavOpen)} - aria-expanded={isNavOpen} - aria-pressed={isNavOpen} - aria-controls={navId} - ref={toggleCollapsibleNavRef} - > - - - + /> + )}