fix(nav): seo improvement (#1335)

baloise · Feb 13, 2024 · d78e2a6 · d78e2a6
1 parent 70efd13
commit d78e2a6
Show file tree

Hide file tree

Showing 9 changed files with 65 additions and 144 deletions.
diff --git a/.changeset/clever-frogs-kiss.md b/.changeset/clever-frogs-kiss.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+**nav**: reset active link items on options changed and always render the active meta link tree, but hide it visually.
diff --git a/docs/stories/components/bal-nav/bal-nav.mdx b/docs/stories/components/bal-nav/bal-nav.mdx
@@ -203,7 +203,7 @@ The overviewLink property is used in the Main Navigation Flyout section as an ov
 | Property    | Type                     | Description                                                                                                                                                                              |
 | :---------- | :----------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | \`label\`     | String                   | The label or text for the link item.                                                                                                                                                     |
-| \`value\`     | String                   | The value for the link item.                                                                                                                                                             |
+| \`value\`     | String                   | (optional) The value for the link item.                                                                                                                                                             |
 | \`active\`    | boolean                  | The active property is used to indicate the active state of a link within the Navigation component.                                                                                      |
 | \`htmlTitle\` | String                   | The alternative text for the link item, used for accessibility purposes.                                                                                                                 |
 | \`ariaLabel\` | String                   | This label is used to describe the component to assistive technologies, such as screen readers, enabling users with disabilities to navigate and interact with the component effectively |

diff --git a/packages/components/src/components/bal-nav/bal-nav.sass b/packages/components/src/components/bal-nav/bal-nav.sass
@@ -1,16 +1,6 @@
 @import '@baloise/design-system-css/sass/mixins'
 @import './bal-nav.vars'
 
-=visually-hidden
-  position: absolute !important
-  height: 0.01em !important
-  width: 0.01em !important
-  padding: 0 !important
-  overflow: hidden !important
-  clip: rect(1px, 1px, 1px, 1px) !important
-  border: none !important
-  white-space: nowrap !important
-
 // Navigation
 // --------------------------------------------------
 
@@ -58,7 +48,7 @@
       max-width: var(--bal-container-size-normal)
 
 .bal-nav__flyout:not(.bal-nav__flyout--visible)
-  +visually-hidden
+  +invisible
 
 .bal-nav .bal-nav-meta-bar,
 .bal-nav .bal-nav-menu-bar
@@ -191,12 +181,19 @@
   padding-top: 1rem
   padding-bottom: 1rem
 
+.bal-nav__mobile-section-list--invisible,
+.bal-nav__mobile-service-list--invisible
+  +invisible
+
 .bal-nav__mobile-overview-link
   font-family: var(--bal-font-family-text)
   font-weight: var(--bal-weight-bold)
   font-size: var(--bal-size-x-small)
   line-height: var(--bal-line-height-x-small)
 
+.bal-nav__mobile-overview-link--invisible
+  +invisible
+
 .bal-nav__mobile-overview-link--menu
   padding: 0 0 0 1rem
 

diff --git a/packages/components/src/components/bal-nav/bal-nav.tsx b/packages/components/src/components/bal-nav/bal-nav.tsx
@@ -102,7 +102,7 @@ export class NavMetaBar
 
   @Watch('buttons')
   protected async buttonChanged() {
-    this.onOptionChange()
+    this.onMetaButtonChange()
   }
 
   /**
@@ -122,6 +122,7 @@ export class NavMetaBar
 
   componentWillLoad() {
     this.onOptionChange()
+    this.onMetaButtonChange()
     this.updateTabs()
   }
 
@@ -176,9 +177,9 @@ export class NavMetaBar
 
   mutationObserverActive = true
 
-  @ListenToMutation({ tags: ['bal-popup'] })
+  @ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true })
   mutationListener(): void {
-    this.onOptionChange()
+    this.onMetaButtonChange()
   }
 
   @ListenToBreakpoints()
@@ -305,7 +306,12 @@ export class NavMetaBar
    */
 
   private onOptionChange = async () => {
+    this.activeMetaLinkValue = undefined
+    this.activeMenuLinkValue = undefined
     this.linkItems = this.options.map(option => new NavMetaLinkItem(option, this))
+  }
+
+  private onMetaButtonChange = async () => {
     this.metaButtons = this.buttons.map(button => new NavMetaButton(button, this))
   }
 

diff --git a/packages/components/src/components/bal-nav/components/overview-link.tsx b/packages/components/src/components/bal-nav/components/overview-link.tsx
@@ -5,10 +5,11 @@ import { NavLinkItem } from '../models/bal-nav-link-item'
 export interface OverviewLinkProps {
   item: NavLinkItem | undefined
   isMenu?: boolean
+  isVisible?: boolean
   onClick: (ev: MouseEvent) => void
 }
 
-export const OverviewLink: FunctionalComponent<OverviewLinkProps> = ({ item, isMenu, onClick }) => {
+export const OverviewLink: FunctionalComponent<OverviewLinkProps> = ({ item, isMenu, onClick, isVisible }) => {
   const block = BEM.block('nav')
 
   if (!item) {
@@ -20,6 +21,10 @@ export const OverviewLink: FunctionalComponent<OverviewLinkProps> = ({ item, isM
       class={{
         ...block.element('mobile-overview-link').class(),
         ...block.element('mobile-overview-link').modifier('menu').class(!!isMenu),
+        ...block
+          .element('mobile-overview-link')
+          .modifier('invisible')
+          .class(isVisible === false),
       }}
       href={item.href}
       target={item.target}

diff --git a/packages/components/src/components/bal-nav/models/bal-nav-menu-link-item.tsx b/packages/components/src/components/bal-nav/models/bal-nav-menu-link-item.tsx
@@ -46,26 +46,35 @@ export class NavMenuLinkItem extends NavLinkItem implements BalProps.BalNavMenuL
           open={isSelected}
           onClick={ev => this.onAccordionClick(ev)}
         ></AccordionButton>
-        {isSelected ? (
-          <OverviewLink item={this.overviewLink} onClick={ev => this.onClick(ev)} isMenu></OverviewLink>
-        ) : (
-          ''
-        )}
-        {isSelected && hasSectionLinkItems ? (
+        <OverviewLink
+          item={this.overviewLink}
+          onClick={ev => this.onClick(ev)}
+          isMenu
+          isVisible={isSelected}
+        ></OverviewLink>
+        {hasSectionLinkItems ? (
           <ul
             class={{
               ...block.element('mobile-section-list').class(),
+              ...block
+                .element('mobile-section-list')
+                .modifier('invisible')
+                .class(isSelected === false),
             }}
           >
             {this.sectionLinkItems.map(item => item.renderTouch())}
           </ul>
         ) : (
           ''
         )}
-        {isSelected && hasServiceLinkItems ? (
+        {hasServiceLinkItems ? (
           <ul
             class={{
               ...block.element('mobile-service-list').class(),
+              ...block
+                .element('mobile-service-list')
+                .modifier('invisible')
+                .class(isSelected === false),
             }}
           >
             {this.serviceLinkItems.map(item => item.renderTouch())}