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

* Create PR for #1415 * fix(a11y): add aria-haspop prop on buttons triggering a popup/popover * fix(a11y): add aria-haspop prop on buttons triggering a popup/popover * fix(a11y): set aria-haspopup on button * fix(a11y): set aria-haspopup when bal-popup button * fix(a11y): reformat * fix(a11y): try to fix lint * fix(a11y): adapt changeset --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Marinkov, Magdalena <[email protected]> Co-authored-by: Marco Zirkenbach <[email protected]>
baloise · Jan 23, 2025 · f939d0e · f939d0e
1 parent 0a5cb2d
commit f939d0e
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 3 deletions.
diff --git a/.changeset/wise-swans-chew.md b/.changeset/wise-swans-chew.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**button**: set aria-haspopup for popup buttons
diff --git a/packages/core/src/components/bal-button/bal-button.interfaces.ts b/packages/core/src/components/bal-button/bal-button.interfaces.ts
@@ -30,6 +30,7 @@ namespace BalProps {
     controls?: string
     title?: string
     label?: string
+    haspopup?: string
   }
 }
 

diff --git a/packages/core/src/components/bal-button/bal-button.tsx b/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 (

diff --git a/packages/core/src/components/bal-popover/bal-popover.tsx b/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,

diff --git a/packages/core/src/components/bal-popover/test/bal-popover.cy.html b/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

diff --git a/packages/core/src/utils/attributes.ts b/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.