♿ a11y(bal-nav): button overlays not reachable via keyboard

.changeset/wise-swans-chew.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**a11y**: set aria-haspopup for popup buttons

packages/core/src/components/bal-button/bal-button.interfaces.ts

@@ -30,6 +30,7 @@ namespace BalProps {
     controls?: string
     title?: string
     label?: string
+    haspopup?: string
   }
 }
 

packages/core/src/components/bal-button/bal-button.tsx

@@ -114,6 +114,11 @@ export class Button implements ComponentInterface {
    */
   @Prop() rounded = false
 
+  /**
+   * If `true` the button is a popup.
+   */
+  @Prop() balPopup = undefined
+
   /**
    * Name of the left button icon
    */
@@ -179,6 +184,11 @@ export class Button implements ComponentInterface {
 
   componentDidLoad(): void {
     rOnLoad(() => (this.isLargestContentPaintDone = true))
+    if (this.el.getAttribute('bal-popup') && !this.aria?.haspopup) {
+      this.aria = {
+        haspopup: 'true',
+      }
+    }
   }
 
   componentWillLoad() {
@@ -188,9 +198,9 @@ export class Button implements ComponentInterface {
       'aria-controls',
       'aria-hidden',
       'tabindex',
+      'aria-haspopup',
     ])
   }
-
   componentDidRender() {
     this.balDidRender.emit()
   }
@@ -302,6 +312,7 @@ export class Button implements ComponentInterface {
       'aria-label':
         this.aria?.label || this.inheritAttributes['aria-label'] || this.aria?.title || this.inheritAttributes['title'],
       'aria-controls': this.aria?.controls || this.inheritAttributes['aria-controls'],
+      'aria-haspopup': this.aria?.haspopup || this.inheritAttributes['aria-haspopup'],
     }
 
     return (

packages/core/src/components/bal-popover/bal-popover.tsx

@@ -150,11 +150,11 @@ export class Popover implements ComponentInterface, Loggable, BalBreakpointObser
 
   componentWillLoad() {
     this.backdropHeight = this.getBackdropHeight()
+    this.triggerElement.setAttribute('aria-haspopup', 'true')
   }
 
   componentDidLoad() {
     this.isInMainNav = this.footMobileNav !== null
-
     if (this.triggerElement && this.menuElement) {
       this.popperInstance = createPopper(this.triggerElement, this.menuElement, {
         placement: this.tooltip ? 'bottom' : this.position,

packages/core/src/components/bal-popover/test/bal-popover.cy.html

@@ -15,7 +15,6 @@
             <bal-button
               bal-popover-trigger
               id="bal-popover-1-trigger"
-              aria-haspopup="true"
               aria-controls="popover-menu"
               color="is-info"
               outlined

packages/core/src/utils/attributes.ts

@@ -8,6 +8,7 @@ const trackingAttributes = ['data-tracking-style', 'data-tracking-topic', 'data-
  * the `title` attribute that developers set directly on `bal-input`. This
  * helper function should be called in componentWillLoad and assigned to a variable
  * that is later used in the render function.
+ * This function also removes the attribute from the parent when its set on child.
  *
  * This does not need to be reactive as changing attributes on the host element
  * does not trigger a re-render.