♿ a11y(accordion): accordion not accessible (#1450)

* Create PR for #1419 * chore: fix nx scripts * fix(accordion): make it keyboard accessible * fix(list): make accordion accessible to the keyboard * chore: fix nx scripts --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Gery Hirschfeld <[email protected]>
baloise · Sep 6, 2024 · e2c48b0 · e2c48b0
1 parent 9570144
commit e2c48b0
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 12 deletions.
diff --git a/.changeset/pretty-pets-fix.md b/.changeset/pretty-pets-fix.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**accordion**: make it keyboard accessible
diff --git a/.changeset/six-readers-refuse.md b/.changeset/six-readers-refuse.md
@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**list**: make accordion accessible to the keyboard
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,16 +20,16 @@
     "angular": "npx nx run create-angular",
     "angular:start": "npx nx run start-angular"
   },
+  "nx": {
+    "includedScripts": []
+  },
   "private": true,
   "workspaces": [
     "packages/*",
     "libs/*",
     "docs",
     "e2e"
   ],
-  "nx": {
-    "includedScripts": []
-  },
   "devDependencies": {
     "@angular-devkit/build-angular": "~15.0.0",
     "@angular-devkit/core": "~15.0.0",
@@ -140,10 +140,5 @@
     "vue": "~3.4.15",
     "vue-tsc": "~1.8.8",
     "zone.js": "~0.11.4"
-  },
-  "executors": "./executors.json",
-  "dependencies": {
-    "@nx/devkit": "18.0.5"
-  },
-  "packageManager": "[email protected]+sha1.83c41fe4ebdb61e08446f8bb68a75fb48756b330"
+  }
 }
diff --git a/packages/core/src/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.sass b/packages/core/src/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.sass
@@ -2,5 +2,8 @@
 
 .bal-accordion__summary
   position: static
+  display: block
   &--trigger
     cursor: pointer
+    &:focus-visible
+      @extend %focus-shadow
diff --git a/packages/core/src/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.tsx b/packages/core/src/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.tsx
@@ -3,6 +3,7 @@ import { BEM } from '../../../utils/bem'
 import { Loggable, Logger, LogInstance } from '../../../utils/log'
 import { stopEventBubbling } from '../../../utils/form-input'
 import { AccordionState } from '../../../interfaces'
+import { isEnterKey, isSpaceKey } from '@baloise/web-app-utils'
 
 @Component({
   tag: 'bal-accordion-summary',
@@ -91,6 +92,13 @@ export class AccordionSummary implements ComponentInterface, Loggable {
     this.parentAccordionElement?.humanToggle()
   }
 
+  private onKeyDown = (ev: KeyboardEvent) => {
+    if (isEnterKey(ev) || isSpaceKey(ev)) {
+      stopEventBubbling(ev)
+      this.parentAccordionElement?.humanToggle()
+    }
+  }
+
   /**
    * RENDER
    * ------------------------------------------------------
@@ -109,9 +117,11 @@ export class AccordionSummary implements ComponentInterface, Loggable {
       attributes = {
         'aria-controls': `${this.parentAccordionId}-details-content`,
         'role': 'button',
+        'tabindex': 0,
         'part': buttonPart,
         'data-testid': 'bal-accordion-button',
         'onClick': this.onClick,
+        'onKeyDown': this.onKeyDown,
       }
     }
 
@@ -121,6 +131,8 @@ export class AccordionSummary implements ComponentInterface, Loggable {
         class={{
           ...block.class(),
           ...block.modifier('trigger').class(this.trigger),
+          ...block.modifier('inner-trigger').class(!this.trigger),
+          'bal-focused': this.trigger,
         }}
         {...attributes}
         data-testid="bal-accordion-summary"

diff --git a/packages/core/src/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.sass b/packages/core/src/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.sass
@@ -2,6 +2,7 @@
 
 .bal-accordion__trigger
   position: static
+  display: block
   &__button
     display: flex
     justify-content: center
@@ -12,3 +13,6 @@
     width: 3rem
     user-select: none
     cursor: pointer
+
+.bal-accordion__trigger__button.bal-focused:focus-visible
+  @extend %focus-shadow
diff --git a/packages/core/src/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.tsx b/packages/core/src/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.tsx
@@ -94,6 +94,10 @@ export class AccordionTrigger implements ComponentInterface, Loggable {
     return this.el?.closest('bal-accordion') || null
   }
 
+  private get parentAccordionSummaryElement(): HTMLBalAccordionSummaryElement | null {
+    return this.el?.closest('bal-accordion-summary') || null
+  }
+
   /**
    * PRIVATE METHODS
    * ------------------------------------------------------
@@ -133,6 +137,16 @@ export class AccordionTrigger implements ComponentInterface, Loggable {
     const expanded = this.state === AccordionState.Expanded || this.state === AccordionState.Expanding
     const buttonPart = expanded ? 'button expanded' : 'button'
 
+    const parentSummaryEl = this.parentAccordionSummaryElement
+    let triggerAttributes = {
+      tabindex: -1,
+    }
+    if (parentSummaryEl && !parentSummaryEl.trigger) {
+      triggerAttributes = {
+        tabindex: 0,
+      }
+    }
+
     return (
       <Host
         id={id}
@@ -159,13 +173,15 @@ export class AccordionTrigger implements ComponentInterface, Loggable {
           <button
             class={{
               ...block.element('button').class(),
+              'bal-focused': parentSummaryEl && !parentSummaryEl.trigger,
             }}
             id={`${id}-button`}
             aria-controls={`${this.parentAccordionId}-details-content`}
             aria-label="accordion trigger"
             part={buttonPart}
             data-testid="bal-accordion-trigger"
             onClick={this.onClick}
+            {...triggerAttributes}
           >
             <bal-icon turn={turn} name={icon}></bal-icon>
           </button>

diff --git a/...ore/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx b/...ore/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx
@@ -1,5 +1,6 @@
 import { Component, Host, h, Element, EventEmitter, Event, Prop, Watch, ComponentInterface } from '@stencil/core'
 import { Loggable, Logger, LogInstance } from '../../../utils/log'
+import { isEnterKey, isSpaceKey } from '@baloise/web-app-utils'
 
 @Component({
   tag: 'bal-list-item-accordion-head',
@@ -54,6 +55,12 @@ export class ListItemAccordionHead implements ComponentInterface, Loggable {
     }
   }
 
+  private onKeyDown = (ev: KeyboardEvent) => {
+    if (isSpaceKey(ev) || isEnterKey(ev)) {
+      this.onClick()
+    }
+  }
+
   /**
    * RENDER
    * ------------------------------------------------------
@@ -67,7 +74,10 @@ export class ListItemAccordionHead implements ComponentInterface, Loggable {
           'bal-list__item__accordion-head': true,
           'bal-list__item__accordion-head--open': this.accordionOpen,
         }}
+        role="button"
+        tabindex="0"
         onClick={this.onClick}
+        onKeyDown={this.onKeyDown}
       >
         <slot></slot>
         <bal-list-item-icon right>