@genesislcap/foundation-header 14.193.1 → 14.193.3

package/dist/custom-elements.json

@@ -31,6 +31,27 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/zero-components.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "registerCommonZeroComponents",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "registerCommonZeroComponents",
+          "declaration": {
+            "name": "registerCommonZeroComponents",
+            "module": "src/components/zero-components.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/config/config.ts",
@@ -151,27 +172,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/zero-components.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "registerCommonZeroComponents",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "registerCommonZeroComponents",
-          "declaration": {
-            "name": "registerCommonZeroComponents",
-            "module": "src/components/zero-components.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/main/index.ts",
@@ -237,7 +237,7 @@
         {
           "kind": "variable",
           "name": "NavTemplate",
-          "default": "html<Navigation>`\n  ${when((x) => !x.hideSideBar, sideNavTemplate)}\n  <div class=\"nav-listbox\" data-test-id=\"nav-bar\">\n    ${app.registerElementsTarget<HeaderTargetId>('header-start')}\n    <div class=\"nav-leftside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-start')}\n      ${when(\n        (x) => !x.hideSideBar,\n        html<Navigation>`\n          <div\n            class=\"bars-container\"\n            @click=${(x) => x.toggleNavVisibility()}\n            data-test-id=\"hamburger-menu\"\n          >\n            <${iconTag} name=\"bars\" part=\"nav-visibility-icon\" class=\"nav-visibility-icon\"></${iconTag}>\n          </div>\n        `,\n      )}\n      <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n        <img src=${(x) => x.logoSrc} class=\"logo\" part=\"logo\" />\n      </div>\n      <slot name=\"routes\" data-test-id=\"route-buttons\">\n        ${(x) => (x.routeNavItems ? routeNavItemsTemplate : defaultRouteNavItemsTemplate)}\n      </slot>\n      ${app.registerElementsTarget<NavTargetId>('nav')}\n    </div>\n    <div class=\"nav-rightside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-end')}\n      ${when(\n        (x) => x.showLuminanceToggleButton,\n        html<Navigation>`\n          <div\n            class=\"icon-container\"\n            data-test-id=\"luminance-toggle-button\"\n            part=\"luminance-button\"\n          >\n            <${iconTag}\n              @click=${(x) => x.luminanceIconEvent()}\n              variant=\"regular\"\n              name=\"moon\"\n              part=\"luminance-icon\"\n            ></${iconTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showMiscToggleButton,\n        html<Navigation>`\n          <div class=\"icon-container\" data-test-id=\"misc-toggle-button\" part=\"misc-button\">\n            <${iconTag} @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\"></${iconTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showConnectionIndicator,\n        html<Navigation>`\n          <div class=\"connection-indicator-container\" data-test-id=\"connection-indicator\">\n            <${connectionIndicatorTag} show-label=\"false\"></${connectionIndicatorTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showLanguageSelector && x.languageOptions,\n        html<Navigation>`\n          <${selectTag}\n            class=\"language-selector\"\n            position=\"below\"\n            data-test-id=\"language-selector\"\n            part=\"language-selector\"\n            @change=\"${(x, c) => x.changeLanguage(c.event as CustomEvent)}\"\n          >\n            ${repeat(\n              (x) => x.languageOptions.availableLanguages,\n              html`\n                <${optionTag}\n                  value=\"${(x) => x}\"\n                  ?selected=\"${(x, c) => x === c.parent.languageOptions.selectedLanguage}\"\n                >\n                  ${(x) => x.toUpperCase()}\n                </${optionTag}>\n              `,\n            )}\n          </${selectTag}>\n        `,\n      )}\n\n      <${buttonTag} appearance=\"neutral-grey\" data-test-id=\"user-button\" class=\"nav-button\">\n        <${iconTag} name=\"user-circle\"></${iconTag}>\n        ${(x) => x.userName}\n      </${buttonTag}>\n    </div>\n    ${app.registerElementsTarget<HeaderTargetId>(['header', 'header-end'])}\n  </div>\n`",
+          "default": "html<Navigation>`\n  ${when((x) => !x.hideSideBar, sideNavTemplate)}\n  <div class=\"nav-listbox\" data-test-id=\"nav-bar\" role=\"navigation\" aria-label=\"Main menu\">\n    ${app.registerElementsTarget<HeaderTargetId>('header-start')}\n    <div class=\"nav-leftside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-start')}\n      ${when(\n        (x) => !x.hideSideBar,\n        html<Navigation>`\n          <${buttonTag}\n            class=\"bars-container\"\n            @click=${(x) => x.toggleNavVisibility()}\n            data-test-id=\"hamburger-menu\"\n            aria-label=\"Toggle side menu\"\n            aria-controls=\"side-nav\"\n            aria-expanded=${(x) => x.sideNavOpen}\n            appearance=\"stealth\"\n            @focusin=${(x) => x.closeNav()}\n          >\n            <${iconTag} name=\"bars\" part=\"nav-visibility-icon\" class=\"nav-visibility-icon\"></${iconTag}>\n          </${buttonTag}>\n        `,\n      )}\n      <div class=\"logo-container\" data-test-id=\"nav-bar-logo\">\n        <img\n          src=${(x) => x.logoSrc}\n          class=\"logo\"\n          part=\"logo\"\n          data-test-id=\"logo\"\n          alt=\"${(x) => x.logoAltText}\"\n        />\n      </div>\n      <slot name=\"routes\" data-test-id=\"route-buttons\">\n        ${(x) => (x.routeNavItems ? routeNavItemsTemplate : defaultRouteNavItemsTemplate)}\n      </slot>\n      ${app.registerElementsTarget<NavTargetId>('nav')}\n    </div>\n    <div class=\"nav-rightside\">\n      ${app.registerElementsTarget<NavTargetId>('nav-end')}\n      ${when(\n        (x) => x.showLuminanceToggleButton,\n        html<Navigation>`\n          <div\n            class=\"icon-container\"\n            data-test-id=\"luminance-toggle-button\"\n            part=\"luminance-button\"\n            aria-label=\"Luminance toggle\"\n          >\n            <${iconTag}\n              @click=${(x) => x.luminanceIconEvent()}\n              variant=\"regular\"\n              name=\"moon\"\n              part=\"luminance-icon\"\n            ></${iconTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showMiscToggleButton,\n        html<Navigation>`\n          <div class=\"icon-container\" data-test-id=\"misc-toggle-button\" part=\"misc-button\" aria-label=\"Misc icon\">\n            <${iconTag} @click=${(x) => x.miscIconEvent()} name=\"th\" part=\"misc-icon\"></${iconTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showConnectionIndicator,\n        html<Navigation>`\n          <div class=\"connection-indicator-container\" data-test-id=\"connection-indicator\">\n            <${connectionIndicatorTag} show-label=\"false\"></${connectionIndicatorTag}>\n          </div>\n        `,\n      )}\n      ${when(\n        (x) => x.showLanguageSelector && x.languageOptions,\n        html<Navigation>`\n          <${selectTag}\n            class=\"language-selector\"\n            position=\"below\"\n            data-test-id=\"language-selector\"\n            part=\"language-selector\"\n            @change=\"${(x, c) => x.changeLanguage(c.event as CustomEvent)}\"\n            aria-label=\"Language selector\"\n          >\n            ${repeat(\n              (x) => x.languageOptions.availableLanguages,\n              html`\n                <${optionTag}\n                  value=\"${(x) => x}\"\n                  ?selected=\"${(x, c) => x === c.parent.languageOptions.selectedLanguage}\"\n                >\n                  ${(x) => x.toUpperCase()}\n                </${optionTag}>\n              `,\n            )}\n          </${selectTag}>\n        `,\n      )}\n\n      <${buttonTag} appearance=\"neutral-grey\" data-test-id=\"user-button\" class=\"nav-button\" aria-label=\"User button\">\n        <${iconTag} name=\"user-circle\"></${iconTag}>\n        ${(x) => x.userName}\n      </${buttonTag}>\n    </div>\n    ${app.registerElementsTarget<HeaderTargetId>(['header', 'header-end'])}\n  </div>\n`",
           "description": "Template for Navigation class",
           "return": {
             "type": {
@@ -329,6 +329,14 @@
               "default": "logo",
               "description": "Optional attribute which controls the icon to show on the navigation bar and flyout\nControl via `logo-src`"
             },
+            {
+              "kind": "field",
+              "name": "logoAltText",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Corporate Logo'"
+            },
             {
               "kind": "field",
               "name": "showLuminanceToggleButton",
@@ -493,6 +501,14 @@
               },
               "fieldName": "logoSrc"
             },
+            {
+              "name": "logo-alt-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Corporate Logo'",
+              "fieldName": "logoAltText"
+            },
             {
               "name": "show-luminance-toggle-button",
               "type": {
@@ -661,6 +677,18 @@
                 "module": "src/main/main.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "logoAltText",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Corporate Logo'",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showLuminanceToggleButton",
@@ -871,6 +899,18 @@
                 "module": "src/main/main.ts"
               }
             },
+            {
+              "name": "logo-alt-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Corporate Logo'",
+              "fieldName": "logoAltText",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
             {
               "name": "show-luminance-toggle-button",
               "type": {
@@ -1009,6 +1049,18 @@
                 "module": "src/main/main.ts"
               }
             },
+            {
+              "name": "logo-alt-text",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Corporate Logo'",
+              "fieldName": "logoAltText",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
             {
               "name": "show-luminance-toggle-button",
               "type": {
@@ -1180,6 +1232,18 @@
                 "module": "src/main/main.ts"
               }
             },
+            {
+              "kind": "field",
+              "name": "logoAltText",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Corporate Logo'",
+              "inheritedFrom": {
+                "name": "Navigation",
+                "module": "src/main/main.ts"
+              }
+            },
             {
               "kind": "field",
               "name": "showLuminanceToggleButton",

package/dist/dts/main/main.d.ts

@@ -65,7 +65,14 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly scrollHeight: number;
     scrollLeft: number;
     scrollTop: number;
-    readonly scrollWidth: number;
+    readonly scrollWidth: number; /**
+     * Optional attribute which controls the icon to show on the navigation bar and flyout
+     * Control via `logo-src`
+     *
+     * @remarks
+     *
+     * If this attribute is not set then the Genesis logo is shown instead
+     */
     readonly shadowRoot: ShadowRoot;
     slot: string;
     readonly tagName: string;
@@ -87,9 +94,6 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
     getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
     getElementsByTagNameNS(namespace: string, localName: string): HTMLCollectionOf<Element>;
-    /**
-     * @internal
-     */
     hasAttribute(qualifiedName: string): boolean;
     hasAttributeNS(namespace: string, localName: string): boolean;
     hasAttributes(): boolean;
@@ -134,7 +138,9 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     appendChild<T extends Node>(node: T): T;
     cloneNode(deep?: boolean): Node;
     compareDocumentPosition(other: Node): number;
-    contains(other: Node): boolean;
+    contains(other: Node): boolean; /**
+     * If present the defined {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} will be rendered in the header 'routes' slot
+     */
     getRootNode(options?: GetRootNodeOptions): Node;
     hasChildNodes(): boolean;
     insertBefore<T_1 extends Node>(node: T_1, child: Node): T_1;
@@ -191,6 +197,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     ariaPosInSet: string;
     ariaPressed: string;
     ariaReadOnly: string;
+    /**
+     * Opens the flyout menu on the left hand side
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the menu button on the navigation
+     * bar left hand side
+     *
+     * @internal
+     */
     ariaRequired: string;
     ariaRoleDescription: string;
     ariaRowCount: string;
@@ -211,20 +227,21 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     before(...nodes: (string | Node)[]): void;
     remove(): void;
     replaceWith(...nodes: (string | Node)[]): void;
-    innerHTML: string; /**
-     * Emits the event corresponding to the notification icon being clicked
+    innerHTML: string;
+    readonly nextElementSibling: Element;
+    readonly previousElementSibling: Element;
+    readonly childElementCount: number;
+    readonly children: HTMLCollection;
+    /**
+     * Emits the event corresponding to the miscellaneous icon being clicked
      *
      * @remarks
      *
-     * Activated when the user clicks on the bell icon on the navigation
+     * Activated when the user clicks on the menu icon on the navigation
      * bar right hand side
      *
      * @internal
      */
-    readonly nextElementSibling: Element;
-    readonly previousElementSibling: Element;
-    readonly childElementCount: number;
-    readonly children: HTMLCollection;
     readonly firstElementChild: Element;
     readonly lastElementChild: Element;
     append(...nodes: (string | Node)[]): void;
@@ -247,6 +264,22 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly isContentEditable: boolean;
     onabort: (this: GlobalEventHandlers, ev: UIEvent) => any;
     onanimationcancel: (this: GlobalEventHandlers, ev: AnimationEvent) => any;
+    /**
+     * FoundationHeader.
+     *
+     * @remarks
+     * Base MF export used by host application `configure` calls. It does not set up a design system or components. Both are
+     * expected to be registered in the host application, which should provide the details of which to the MF via
+     * TemplateOptions.
+     *
+     * See the {@link configure} hook for more information on how to set up and use this micro frontend in your application.
+     *
+     * @privateRemarks
+     * We will override loadRemotes to remove zero. This setup is the inverse of FoundationAuth.
+     * We're doing this to avoid a breaking change, so consumers can continue to use Navigation which bundles zero.
+     *
+     * @public
+     */
     onanimationend: (this: GlobalEventHandlers, ev: AnimationEvent) => any;
     onanimationiteration: (this: GlobalEventHandlers, ev: AnimationEvent) => any;
     onanimationstart: (this: GlobalEventHandlers, ev: AnimationEvent) => any;
@@ -360,6 +393,7 @@ declare const Navigation_base: abstract new (...args: any[]) => {
  * - The contents of the flyout menu.
  *
  * @param logo-src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.
+ * @param logo-alt-text -Descriptive logo text.
  * @param show-luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.
  * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.
  * @param notification-icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.
@@ -401,6 +435,7 @@ export declare class Navigation extends Navigation_base {
      * If this attribute is not set then the Genesis logo is shown instead
      */
     logoSrc: any;
+    logoAltText: string;
     /**
      * Boolean attribute which controls whether to show the luminance (moon) icon on the navigation bar
      * Control via`show-luminance-toggle-button`
@@ -529,6 +564,16 @@ export declare class Navigation extends Navigation_base {
      * @internal
      */
     toggleNavVisibility(): void;
+    /**
+     * Explicitly closes the flyout menu on the left
+     *
+     * @privateRemarks
+     * When the user tabs though and out of the flyout, the hamburger menu item will be re-focused and when that occurs we
+     * can close the menu to return to normal flow.
+     *
+     * @internal
+     */
+    closeNav(): void;
     /**
      * Emits the event corresponding to the luminance icon being clicked
      *

package/dist/dts/main/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/main/main.ts"],"names":[],"mappings":"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"}

package/dist/dts/main/main.template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAW5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAiFzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA6FvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,UAAU,CAEjD,CAAC"}
+{"version":3,"file":"main.template.d.ts","sourceRoot":"","sources":["../../../src/main/main.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAW5D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AA6FzC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,WAAW,+BA0GvB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAIpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,UAAU,CAEpD,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,EAAE,YAAY,CAAC,UAAU,CAEjD,CAAC"}

package/dist/esm/main/main.js

@@ -22,6 +22,7 @@ import { DynamicTemplate as template, LoadingTemplate, MainTemplate } from './ma
  * - The contents of the flyout menu.
  *
  * @param logo-src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.
+ * @param logo-alt-text -Descriptive logo text.
  * @param show-luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.
  * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.
  * @param notification-icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.
@@ -57,6 +58,7 @@ let Navigation = class Navigation extends EventEmitter(FASTElement) {
          * If this attribute is not set then the Genesis logo is shown instead
          */
         this.logoSrc = logo;
+        this.logoAltText = 'Corporate Logo';
         /**
          * Boolean attribute which controls whether to show the connection indicator on the navigation bar
          * Control via `show-connection-indicator`
@@ -205,6 +207,18 @@ let Navigation = class Navigation extends EventEmitter(FASTElement) {
     toggleNavVisibility() {
         this.sideNavOpen = !this.sideNavOpen;
     }
+    /**
+     * Explicitly closes the flyout menu on the left
+     *
+     * @privateRemarks
+     * When the user tabs though and out of the flyout, the hamburger menu item will be re-focused and when that occurs we
+     * can close the menu to return to normal flow.
+     *
+     * @internal
+     */
+    closeNav() {
+        this.sideNavOpen = false;
+    }
     /**
      * Emits the event corresponding to the luminance icon being clicked
      *
@@ -296,6 +310,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'logo-src' })
 ], Navigation.prototype, "logoSrc", void 0);
+__decorate([
+    attr({ attribute: 'logo-alt-text' })
+], Navigation.prototype, "logoAltText", void 0);
 __decorate([
     attr({ mode: 'boolean', attribute: 'show-luminance-toggle-button' })
 ], Navigation.prototype, "showLuminanceToggleButton", void 0);

package/dist/esm/main/main.template.js

@@ -7,7 +7,10 @@ const sideNavTemplate = html `
     position="left"
     ?closed=${(x) => !x.sideNavOpen}
     @closed=${(x) => x.toggleNavVisibility()}
+    id="side-nav"
     data-test-id="side-nav"
+    role="navigation"
+    aria-label="Side navigation"
   >
     <img
       slot="title"
@@ -15,34 +18,42 @@ const sideNavTemplate = html `
       class="logo"
       part="side-nav-logo"
       data-test-id="side-nav-logo"
+      alt="${(x) => x.logoAltText}"
     />
     <slot name="menu-contents"></slot>
-    <div
+    <${buttonTag}
       slot="footer"
       class="logout-container"
       data-test-id="logout-button"
       @click=${(x) => x.logout()}
+      aria-label="Sign out"
     >
       <${iconTag} name="sign-out-alt"></${iconTag}>
       Sign out
-    </div>
+    </${buttonTag}>
   </${flyoutTag}>
 `;
 const defaultRouteNavItemsTemplate = html `
   <${buttonTag}
     appearance="neutral-grey"
     class="nav-button"
-    value="1"
     @click=${(x) => x.navigateTo('protected')}
     data-test-id="home-button"
+    aria-label="Home"
   >
     <${iconTag} name="home"></${iconTag}>
     Home
   </${buttonTag}>
-  <${optionTag} @click=${(x) => x.navigateTo('not-found')} data-test-id="profiles-button">
+  <${buttonTag}
+    appearance="neutral-grey"
+    class="nav-button"
+    @click=${(x) => x.navigateTo('not-found')}
+    data-test-id="profiles-button"
+    aria-label="Profiles"
+  >
     <${iconTag} name="users"></${iconTag}>
     Profiles
-</${optionTag}>
+  </${buttonTag}>
 `;
 const routeNavItemsTemplate = html `
   <template>
@@ -54,6 +65,7 @@ const routeNavItemsTemplate = html `
               slot="routes"
               @click=${(x, c) => c.parent.navigateTo(x.routePath)}
               data-test-id="${(x) => `${x.routePath}-button`}"
+              aria-label=${(x) => x.title}
             >
               ${when((x) => x.icon, html `
                   <${iconTag}
@@ -82,21 +94,32 @@ const routeNavItemsTemplate = html `
  */
 export const NavTemplate = html `
   ${when((x) => !x.hideSideBar, sideNavTemplate)}
-  <div class="nav-listbox" data-test-id="nav-bar">
+  <div class="nav-listbox" data-test-id="nav-bar" role="navigation" aria-label="Main menu">
     ${app.registerElementsTarget('header-start')}
     <div class="nav-leftside">
       ${app.registerElementsTarget('nav-start')}
       ${when((x) => !x.hideSideBar, html `
-          <div
+          <${buttonTag}
             class="bars-container"
             @click=${(x) => x.toggleNavVisibility()}
             data-test-id="hamburger-menu"
+            aria-label="Toggle side menu"
+            aria-controls="side-nav"
+            aria-expanded=${(x) => x.sideNavOpen}
+            appearance="stealth"
+            @focusin=${(x) => x.closeNav()}
           >
             <${iconTag} name="bars" part="nav-visibility-icon" class="nav-visibility-icon"></${iconTag}>
-          </div>
+          </${buttonTag}>
         `)}
       <div class="logo-container" data-test-id="nav-bar-logo">
-        <img src=${(x) => x.logoSrc} class="logo" part="logo" />
+        <img
+          src=${(x) => x.logoSrc}
+          class="logo"
+          part="logo"
+          data-test-id="logo"
+          alt="${(x) => x.logoAltText}"
+        />
       </div>
       <slot name="routes" data-test-id="route-buttons">
         ${(x) => (x.routeNavItems ? routeNavItemsTemplate : defaultRouteNavItemsTemplate)}
@@ -110,6 +133,7 @@ export const NavTemplate = html `
             class="icon-container"
             data-test-id="luminance-toggle-button"
             part="luminance-button"
+            aria-label="Luminance toggle"
           >
             <${iconTag}
               @click=${(x) => x.luminanceIconEvent()}
@@ -120,7 +144,7 @@ export const NavTemplate = html `
           </div>
         `)}
       ${when((x) => x.showMiscToggleButton, html `
-          <div class="icon-container" data-test-id="misc-toggle-button" part="misc-button">
+          <div class="icon-container" data-test-id="misc-toggle-button" part="misc-button" aria-label="Misc icon">
             <${iconTag} @click=${(x) => x.miscIconEvent()} name="th" part="misc-icon"></${iconTag}>
           </div>
         `)}
@@ -136,6 +160,7 @@ export const NavTemplate = html `
             data-test-id="language-selector"
             part="language-selector"
             @change="${(x, c) => x.changeLanguage(c.event)}"
+            aria-label="Language selector"
           >
             ${repeat((x) => x.languageOptions.availableLanguages, html `
                 <${optionTag}
@@ -148,7 +173,7 @@ export const NavTemplate = html `
           </${selectTag}>
         `)}
 
-      <${buttonTag} appearance="neutral-grey" data-test-id="user-button" class="nav-button">
+      <${buttonTag} appearance="neutral-grey" data-test-id="user-button" class="nav-button" aria-label="User button">
         <${iconTag} name="user-circle"></${iconTag}>
         ${(x) => x.userName}
       </${buttonTag}>

package/dist/foundation-header.api.json

@@ -563,7 +563,7 @@
         {
           "kind": "Class",
           "canonicalReference": "@genesislcap/foundation-header!Navigation:class",
-          "docComment": "/**\n * Navigation micro-frontend includes navigation bar and flyout menu\n *\n * @remarks\n *\n * `foundation-header` micro-frontend can be added to the project to include a navigation bar and flyout menu. There are multiple ways that the behaviour of the component can be configured - the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default). - navigation links at the left-hand side of the navigation bar. - the control buttons on the right-hand side of the navigation bar can be shown or hidden, and their behaviour controlled via event listeners - The contents of the flyout menu.\n *\n * @param logo - src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.\n *\n * @param show - luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.\n *\n * @param show - misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.\n *\n * @param notification - icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.\n *\n * @param show - connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.\n *\n * @param show - language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.\n *\n * @param hide - side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.\n *\n * @param userName - String which defines the username to be displayed in the navigation bar.\n *\n * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.\n *\n * @param routeNavItems - Array of {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} which define the route buttons to be displayed in the navigation bar.\n *\n * @param languageOptions - Object which defines the language options to be displayed in the language selector.\n *\n * @fires\n *\n * luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.\n *\n * @fires\n *\n * misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.\n *\n * @fires\n *\n * notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.\n *\n * @fires\n *\n * language-changed - Dispatched when the user changes the language in the language selector.\n *\n * @public\n */\n",
+          "docComment": "/**\n * Navigation micro-frontend includes navigation bar and flyout menu\n *\n * @remarks\n *\n * `foundation-header` micro-frontend can be added to the project to include a navigation bar and flyout menu. There are multiple ways that the behaviour of the component can be configured - the icon shown on the navigation bar and flyout menu (this shows the Genesis logo by default). - navigation links at the left-hand side of the navigation bar. - the control buttons on the right-hand side of the navigation bar can be shown or hidden, and their behaviour controlled via event listeners - The contents of the flyout menu.\n *\n * @param logo - src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.\n *\n * @param logo - alt-text -Descriptive logo text.\n *\n * @param show - luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.\n *\n * @param show - misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.\n *\n * @param notification - icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.\n *\n * @param show - connection-indicator - Boolean attribute which controls whether the navigation bar will display the connection indicator.\n *\n * @param show - language-selector - Boolean attribute which controls whether the navigation bar will display the language selector.\n *\n * @param hide - side-bar - Boolean attribute which controls whether the navigation bar will display the side bar.\n *\n * @param userName - String which defines the username to be displayed in the navigation bar.\n *\n * @param routeButtons - Array of objects which define the route buttons to be displayed in the navigation bar.\n *\n * @param routeNavItems - Array of {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} which define the route buttons to be displayed in the navigation bar.\n *\n * @param languageOptions - Object which defines the language options to be displayed in the language selector.\n *\n * @fires\n *\n * luminance-icon-clicked - Dispatched when the user clicks on the luminance toggle icon in the navigation bar.\n *\n * @fires\n *\n * misc-icon-clicked - Dispatched when the user clicks on the miscellaneous behaviour icon in the navigation bar.\n *\n * @fires\n *\n * notification-icon-clicked - Dispatched when the user clicks on the notification icon in the navigation bar.\n *\n * @fires\n *\n * language-changed - Dispatched when the user changes the language in the language selector.\n *\n * @public\n */\n",
           "excerptTokens": [
             {
               "kind": "Content",
@@ -855,6 +855,36 @@
               "isProtected": false,
               "isAbstract": false
             },
+            {
+              "kind": "Property",
+              "canonicalReference": "@genesislcap/foundation-header!Navigation#logoAltText:member",
+              "docComment": "",
+              "excerptTokens": [
+                {
+                  "kind": "Content",
+                  "text": "logoAltText: "
+                },
+                {
+                  "kind": "Content",
+                  "text": "string"
+                },
+                {
+                  "kind": "Content",
+                  "text": ";"
+                }
+              ],
+              "isReadonly": false,
+              "isOptional": false,
+              "releaseTag": "Public",
+              "name": "logoAltText",
+              "propertyTypeTokenRange": {
+                "startIndex": 1,
+                "endIndex": 2
+              },
+              "isStatic": false,
+              "isProtected": false,
+              "isAbstract": false
+            },
             {
               "kind": "Property",
               "canonicalReference": "@genesislcap/foundation-header!Navigation#logoSrc:member",

package/dist/foundation-header.d.ts

@@ -191,6 +191,7 @@ export declare type NavEventDetailMap = {
  * - The contents of the flyout menu.
  *
  * @param logo-src - Option attribute which sets the source of the image in the navigation bar and flyout menu. The Genesis logo will be shown if this attribute is not provided.
+ * @param logo-alt-text -Descriptive logo text.
  * @param show-luminance-toggle-button - Boolean attribute which controls whether the navigation bar will display the luminance toggle icon.
  * @param show-misc-toggle-button - Boolean attribute which controls whether the navigation bar will display the miscellaneous behaviour icon.
  * @param notification-icon-clicked - Boolean attribute which controls whether the navigation bar will display the show notification icon.
@@ -232,6 +233,7 @@ export declare class Navigation extends Navigation_base {
      * If this attribute is not set then the Genesis logo is shown instead
      */
     logoSrc: any;
+    logoAltText: string;
     /**
      * Boolean attribute which controls whether to show the luminance (moon) icon on the navigation bar
      * Control via`show-luminance-toggle-button`
@@ -360,6 +362,16 @@ export declare class Navigation extends Navigation_base {
      * @internal
      */
     toggleNavVisibility(): void;
+    /**
+     * Explicitly closes the flyout menu on the left
+     *
+     * @privateRemarks
+     * When the user tabs though and out of the flyout, the hamburger menu item will be re-focused and when that occurs we
+     * can close the menu to return to normal flow.
+     *
+     * @internal
+     */
+    closeNav(): void;
     /**
      * Emits the event corresponding to the luminance icon being clicked
      *
@@ -460,7 +472,14 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly scrollHeight: number;
     scrollLeft: number;
     scrollTop: number;
-    readonly scrollWidth: number;
+    readonly scrollWidth: number; /**
+    * Optional attribute which controls the icon to show on the navigation bar and flyout
+    * Control via `logo-src`
+    *
+    * @remarks
+    *
+    * If this attribute is not set then the Genesis logo is shown instead
+    */
     readonly shadowRoot: ShadowRoot;
     slot: string;
     readonly tagName: string;
@@ -482,9 +501,6 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     getElementsByTagNameNS(namespaceURI: "http://www.w3.org/1999/xhtml", localName: string): HTMLCollectionOf<HTMLElement>;
     getElementsByTagNameNS(namespaceURI: "http://www.w3.org/2000/svg", localName: string): HTMLCollectionOf<SVGElement>;
     getElementsByTagNameNS(namespace: string, localName: string): HTMLCollectionOf<Element>;
-    /**
-     * @internal
-     */
     hasAttribute(qualifiedName: string): boolean;
     hasAttributeNS(namespace: string, localName: string): boolean;
     hasAttributes(): boolean;
@@ -529,7 +545,9 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     appendChild<T extends Node>(node: T): T;
     cloneNode(deep?: boolean): Node;
     compareDocumentPosition(other: Node): number;
-    contains(other: Node): boolean;
+    contains(other: Node): boolean; /**
+    * If present the defined {@link @genesislcap/foundation-ui#FoundationRouteNavItem | FoundationRouteNavItems} will be rendered in the header 'routes' slot
+    */
     getRootNode(options?: GetRootNodeOptions): Node;
     hasChildNodes(): boolean;
     insertBefore<T_1 extends Node>(node: T_1, child: Node): T_1;
@@ -586,6 +604,16 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     ariaPosInSet: string;
     ariaPressed: string;
     ariaReadOnly: string;
+    /**
+     * Opens the flyout menu on the left hand side
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the menu button on the navigation
+     * bar left hand side
+     *
+     * @internal
+     */
     ariaRequired: string;
     ariaRoleDescription: string;
     ariaRowCount: string;
@@ -606,20 +634,21 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     before(...nodes: (string | Node)[]): void;
     remove(): void;
     replaceWith(...nodes: (string | Node)[]): void;
-    innerHTML: string; /**
-    * Emits the event corresponding to the notification icon being clicked
-    *
-    * @remarks
-    *
-    * Activated when the user clicks on the bell icon on the navigation
-    * bar right hand side
-    *
-    * @internal
-    */
+    innerHTML: string;
     readonly nextElementSibling: Element;
     readonly previousElementSibling: Element;
     readonly childElementCount: number;
     readonly children: HTMLCollection;
+    /**
+     * Emits the event corresponding to the miscellaneous icon being clicked
+     *
+     * @remarks
+     *
+     * Activated when the user clicks on the menu icon on the navigation
+     * bar right hand side
+     *
+     * @internal
+     */
     readonly firstElementChild: Element;
     readonly lastElementChild: Element;
     append(...nodes: (string | Node)[]): void;
@@ -642,6 +671,22 @@ declare const Navigation_base: abstract new (...args: any[]) => {
     readonly isContentEditable: boolean;
     onabort: (this: GlobalEventHandlers, ev: UIEvent) => any;
     onanimationcancel: (this: GlobalEventHandlers, ev: AnimationEvent) => any;
+    /**
+     * FoundationHeader.
+     *
+     * @remarks
+     * Base MF export used by host application `configure` calls. It does not set up a design system or components. Both are
+     * expected to be registered in the host application, which should provide the details of which to the MF via
+     * TemplateOptions.
+     *
+     * See the {@link configure} hook for more information on how to set up and use this micro frontend in your application.
+     *
+     * @privateRemarks
+     * We will override loadRemotes to remove zero. This setup is the inverse of FoundationAuth.
+     * We're doing this to avoid a breaking change, so consumers can continue to use Navigation which bundles zero.
+     *
+     * @public
+     */
     onanimationend: (this: GlobalEventHandlers, ev: AnimationEvent) => any;
     onanimationiteration: (this: GlobalEventHandlers, ev: AnimationEvent) => any;
     onanimationstart: (this: GlobalEventHandlers, ev: AnimationEvent) => any;

package/docs/api/foundation-header.navigation.logoalttext.md

@@ -0,0 +1,11 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@genesislcap/foundation-header](./foundation-header.md) &gt; [Navigation](./foundation-header.navigation.md) &gt; [logoAltText](./foundation-header.navigation.logoalttext.md)
+
+## Navigation.logoAltText property
+
+**Signature:**
+
+```typescript
+logoAltText: string;
+```

package/docs/api/foundation-header.navigation.md

@@ -27,6 +27,7 @@ export declare class Navigation extends Navigation_base
 |  [hideSideBar](./foundation-header.navigation.hidesidebar.md) |  | boolean | Boolean attribute which controls whether to include the sideNav component Control via<code>hide-side-bar</code> |
 |  [i18next](./foundation-header.navigation.i18next.md) |  | I18next |  |
 |  [languageOptions](./foundation-header.navigation.languageoptions.md) |  | [LanguageOptions](./foundation-header.languageoptions.md) |  |
+|  [logoAltText](./foundation-header.navigation.logoalttext.md) |  | string |  |
 |  [logoSrc](./foundation-header.navigation.logosrc.md) |  | any | Optional attribute which controls the icon to show on the navigation bar and flyout Control via <code>logo-src</code> |
 |  [ready](./foundation-header.navigation.ready.md) |  | boolean |  |
 |  [routeButtons](./foundation-header.navigation.routebuttons.md) |  | Array&lt;{ index: number; path: string; title: string; icon: string; variant: string; }&gt; | If present the defined route buttons will be rendered in the header 'routes' slot |

package/docs/api-report.md

@@ -86,6 +86,8 @@ export class Navigation extends Navigation_base {
     // (undocumented)
     auth: Auth;
     changeLanguage(e: CustomEvent): void;
+    // @internal
+    closeNav(): void;
     // (undocumented)
     connectedCallback(): Promise<void>;
     // (undocumented)
@@ -101,6 +103,8 @@ export class Navigation extends Navigation_base {
     languageOptions: LanguageOptions;
     // @internal
     loadRemotes(): Promise<void>;
+    // (undocumented)
+    logoAltText: string;
     logoSrc: any;
     logout(): Promise<void>;
     // @internal

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-header",
   "description": "Genesis Foundation Header",
-  "version": "14.193.1",
+  "version": "14.193.3",
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
   "types": "dist/foundation-header.d.ts",
@@ -76,24 +76,24 @@
     }
   },
   "devDependencies": {
-    "@genesislcap/foundation-testing": "14.193.1",
-    "@genesislcap/genx": "14.193.1",
-    "@genesislcap/rollup-builder": "14.193.1",
-    "@genesislcap/ts-builder": "14.193.1",
-    "@genesislcap/uvu-playwright-builder": "14.193.1",
-    "@genesislcap/vite-builder": "14.193.1",
-    "@genesislcap/webpack-builder": "14.193.1",
+    "@genesislcap/foundation-testing": "14.193.3",
+    "@genesislcap/genx": "14.193.3",
+    "@genesislcap/rollup-builder": "14.193.3",
+    "@genesislcap/ts-builder": "14.193.3",
+    "@genesislcap/uvu-playwright-builder": "14.193.3",
+    "@genesislcap/vite-builder": "14.193.3",
+    "@genesislcap/webpack-builder": "14.193.3",
     "rimraf": "^5.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.193.1",
-    "@genesislcap/foundation-events": "14.193.1",
-    "@genesislcap/foundation-i18n": "14.193.1",
-    "@genesislcap/foundation-logger": "14.193.1",
-    "@genesislcap/foundation-shell": "14.193.1",
-    "@genesislcap/foundation-ui": "14.193.1",
-    "@genesislcap/foundation-utils": "14.193.1",
-    "@genesislcap/foundation-zero": "14.193.1",
+    "@genesislcap/foundation-comms": "14.193.3",
+    "@genesislcap/foundation-events": "14.193.3",
+    "@genesislcap/foundation-i18n": "14.193.3",
+    "@genesislcap/foundation-logger": "14.193.3",
+    "@genesislcap/foundation-shell": "14.193.3",
+    "@genesislcap/foundation-ui": "14.193.3",
+    "@genesislcap/foundation-utils": "14.193.3",
+    "@genesislcap/foundation-zero": "14.193.3",
     "@microsoft/fast-colors": "^5.3.1",
     "@microsoft/fast-element": "^1.12.0",
     "@microsoft/fast-foundation": "^2.49.4",
@@ -109,5 +109,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "83048f45bf5634a5c7e93d461eceb393610aee37"
+  "gitHead": "38840a2d88af7100ff4b38c9b1440885c67a0799"
 }