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

* Create PR for #1419

* fix(accordion): improve a11y

* chore: adjust export types

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Gery Hirschfeld <[email protected]>

Author: github-actions[bot]

.changeset/quiet-maps-divide.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**list**: connect accordion head and body for a11y

.changeset/weak-pots-tickle.md

@@ -0,0 +1,5 @@
+---
+'@baloise/ds-core': patch
+---
+
+**accordion**: add a11y labels to the accordion trigger

packages/core/src/components.d.ts

@@ -11,6 +11,8 @@ import { BalCheckboxOption } from "./components/bal-checkbox/bal-checkbox.type";
 import { BalAriaForm } from "./utils/form";
 import { BalOption } from "./utils/dropdown";
 import { FooterLink } from "@baloise/web-app-utils";
+import { BalListItemAccordionBodyAria } from "./components/bal-list/bal-list-item-accordion-body/bal-list-item-accordion-body";
+import { BalListItemAccordionHeadAria } from "./components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head";
 import { OverlayEventDetail } from "./components/bal-modal/bal-modal.type";
 import { PopoverPresentOptions } from "./components/bal-popover/bal-popover";
 import { BalRadioOption } from "./components/bal-radio/bal-radio.type";
@@ -23,6 +25,8 @@ export { BalCheckboxOption } from "./components/bal-checkbox/bal-checkbox.type";
 export { BalAriaForm } from "./utils/form";
 export { BalOption } from "./utils/dropdown";
 export { FooterLink } from "@baloise/web-app-utils";
+export { BalListItemAccordionBodyAria } from "./components/bal-list/bal-list-item-accordion-body/bal-list-item-accordion-body";
+export { BalListItemAccordionHeadAria } from "./components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head";
 export { OverlayEventDetail } from "./components/bal-modal/bal-modal.type";
 export { PopoverPresentOptions } from "./components/bal-popover/bal-popover";
 export { BalRadioOption } from "./components/bal-radio/bal-radio.type";
@@ -106,6 +110,7 @@ export namespace Components {
           * The color to use from your application's color palette.
          */
         "color": BalProps.BalButtonColor;
+        "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * If `true` the button is aligned over the whole width
          */
@@ -1807,16 +1812,19 @@ export namespace Components {
           * Sets space to content of the accordion body
          */
         "contentSpace": BalProps.BalListContentSpacing;
+        "setAria": (aria: BalListItemAccordionBodyAria) => Promise<void>;
     }
     interface BalListItemAccordionHead {
         /**
           * If `true` the list accordion is open
          */
         "accordionOpen": boolean;
+        "configChanged": (state: BalConfigState) => Promise<void>;
         /**
           * Icon name string with value 'plus' on default
          */
         "icon": BalProps.BalListItemAccordionHeadIcon;
+        "setAria": (aria: BalListItemAccordionHeadAria) => Promise<void>;
     }
     interface BalListItemContent {
         "contentAlignment"?: string;

packages/core/src/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.tsx

@@ -1,8 +1,11 @@
-import { Component, Host, h, Element, ComponentInterface, State, Prop } from '@stencil/core'
+import { Component, Host, h, Element, ComponentInterface, State, Prop, Method } from '@stencil/core'
 import { BEM } from '../../../utils/bem'
 import { Loggable, Logger, LogInstance } from '../../../utils/log'
 import { stopEventBubbling } from '../../../utils/form-input'
 import { AccordionState } from '../../../interfaces'
+import { BalConfigState, BalLanguage, defaultConfig, ListenToConfig } from '../../../utils/config'
+import { i18nBalAccordion } from '../bal-accordion.i18n'
+import { ariaBooleanToString } from 'packages/core/src/utils/aria'
 
 @Component({
   tag: 'bal-accordion-trigger',
@@ -14,6 +17,7 @@ export class AccordionTrigger implements ComponentInterface, Loggable {
   @Element() el?: HTMLElement
 
   @State() parentAccordionId?: string
+  @State() language: BalLanguage = defaultConfig.language
 
   log!: LogInstance
 
@@ -90,6 +94,20 @@ export class AccordionTrigger implements ComponentInterface, Loggable {
     this.updateAccordionId()
   }
 
+  /**
+   * LISTENERS
+   * ------------------------------------------------------
+   */
+
+  /**
+   * @internal define config for the component
+   */
+  @Method()
+  @ListenToConfig()
+  async configChanged(state: BalConfigState): Promise<void> {
+    this.language = state.language
+  }
+
   /**
    * GETTERS
    * ------------------------------------------------------
@@ -170,6 +188,9 @@ export class AccordionTrigger implements ComponentInterface, Loggable {
             iconTurn={turn}
             color={this.color}
             size={this.size}
+            title={this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open}
+            aria-label={this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open}
+            aria-expanded={ariaBooleanToString(this.active)}
             onClick={this.onClick}
           >
             {label}
@@ -182,9 +203,11 @@ export class AccordionTrigger implements ComponentInterface, Loggable {
             }}
             id={`${id}-button`}
             aria-controls={`${this.parentAccordionId}-details-content`}
-            aria-label="accordion trigger"
+            aria-expanded={ariaBooleanToString(this.active)}
             part={buttonPart}
             data-testid="bal-accordion-trigger"
+            title={this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open}
+            aria-label={this.active ? i18nBalAccordion[this.language].close : i18nBalAccordion[this.language].open}
             onClick={this.onClick}
             {...triggerAttributes}
           >

packages/core/src/components/bal-accordion/bal-accordion.i18n.ts

@@ -0,0 +1,49 @@
+import { I18n } from '../../interfaces'
+
+interface I18nBalAccordion {
+  open: string
+  close: string
+}
+
+export const i18nBalAccordion: I18n<I18nBalAccordion> = {
+  de: {
+    open: 'Öffnen',
+    close: 'Schließen',
+  },
+  en: {
+    open: 'Open',
+    close: 'Close',
+  },
+  fr: {
+    open: 'Ouvrir',
+    close: 'Fermer',
+  },
+  it: {
+    open: 'Apri',
+    close: 'Chiudi',
+  },
+  nl: {
+    open: 'Open',
+    close: 'Sluiten',
+  },
+  es: {
+    open: 'Abrir',
+    close: 'Cerrar',
+  },
+  pl: {
+    open: 'Otwórz',
+    close: 'Zamknij',
+  },
+  pt: {
+    open: 'Abrir',
+    close: 'Fechar',
+  },
+  sv: {
+    open: 'Öppna',
+    close: 'Stäng',
+  },
+  fi: {
+    open: 'Avaa',
+    close: 'Sulje',
+  },
+}

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

@@ -11,6 +11,7 @@ import {
   Listen,
 } from '@stencil/core'
 import { Attributes, inheritAttributes } from '../../utils/attributes'
+import { ariaBooleanToString } from '../../utils/aria'
 import { rOnLoad } from '../../utils/helpers'
 
 @Component({
@@ -335,7 +336,7 @@ export class Button implements ComponentInterface {
           onFocus={this.onFocus}
           onBlur={this.onBlur}
           onClick={this.onClick}
-          aria-disabled={this.disabled ? 'true' : null}
+          aria-disabled={ariaBooleanToString(this.disabled)}
           data-testid="bal-button"
           {...ariaAttributes}
         >

packages/core/src/components/bal-checkbox/bal-checkbox-group/bal-checkbox-group.tsx

@@ -22,6 +22,7 @@ import { Loggable, Logger, LogInstance } from '../../../utils/log'
 import { BalMutationObserver, ListenToMutation } from '../../../utils/mutation'
 import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../../utils/form'
 import { BalFocusObserver, ListenToFocus } from '../../../utils/focus'
+import { ariaBooleanToString } from 'packages/core/src/utils/aria'
 
 @Component({
   tag: 'bal-checkbox-group',
@@ -443,7 +444,7 @@ export class CheckboxGroup
           ...block.class(),
         }}
         role="group"
-        aria-disabled={this.disabled ? 'true' : null}
+        aria-disabled={ariaBooleanToString(this.disabled)}
         aria-labelledby={this.ariaForm.labelId}
         aria-describedby={this.ariaForm.messageId}
         onClick={this.onClick}

packages/core/src/components/bal-date/bal-date-calendar-cell/bal-date-calendar-cell.tsx

@@ -1,6 +1,7 @@
 import { Component, h, ComponentInterface, Host, Prop, Event, EventEmitter } from '@stencil/core'
 import { stopEventBubbling } from '../../../utils/form-input'
 import { BEM } from '../../../utils/bem'
+import { ariaBooleanToString } from 'packages/core/src/utils/aria'
 
 @Component({
   tag: 'bal-date-calendar-cell',
@@ -59,8 +60,8 @@ export class DateCalendarCell implements ComponentInterface {
         type="button"
         role="button"
         aria-label={this.fullDate}
-        aria-selected={this.selected ? 'true' : 'false'}
-        aria-disabled={this.disabled ? 'true' : 'false'}
+        aria-selected={ariaBooleanToString(this.selected)}
+        aria-disabled={ariaBooleanToString(this.disabled)}
         title={this.fullDate}
         onClick={(ev: MouseEvent) => this.onClick(ev, this.isoDate)}
       >

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

@@ -23,6 +23,7 @@ import { BalConfigState, BalLanguage, ListenToConfig, defaultConfig } from '../.
 import { debounceEvent } from '../../utils/helpers'
 import { BalAriaForm, defaultBalAriaForm, BalAriaFormLinking } from '../../utils/form'
 import { balFloatingUi } from '../../utils/floating-ui'
+import { ariaBooleanToString } from '../../utils/aria'
 
 @Component({
   tag: 'bal-date',
@@ -530,7 +531,7 @@ export class Date implements ComponentInterface, Loggable, BalAriaFormLinking {
               onClick={this.onIconClick}
               aria-label={i18nBalDate[this.language].toggleDatepicker}
               aria-haspopup="true"
-              aria-expanded={this.isExpanded ? 'true' : 'false'}
+              aria-expanded={ariaBooleanToString(this.isExpanded)}
             />
           ) : (
             ''

packages/core/src/components/bal-file-upload/bal-file-upload.tsx

@@ -14,6 +14,7 @@ import { FileListComponent } from './components/file-list'
 import { toFileArray, toFileList } from './utils/file-list.util'
 import { validateFileArray } from './utils/file-validation.util'
 import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
+import { ariaBooleanToString } from '../../utils/aria'
 
 @Component({
   tag: 'bal-file-upload',
@@ -376,7 +377,7 @@ export class FileUpload implements FormInput<File[]>, BalAriaFormLinking {
     return (
       <Host
         onClick={this.onHostClick}
-        aria-disabled={this.disabled ? 'true' : null}
+        aria-disabled={ariaBooleanToString(this.disabled)}
         class={{
           'bal-file-upload': true,
         }}
@@ -403,7 +404,7 @@ export class FileUpload implements FormInput<File[]>, BalAriaFormLinking {
               aria-labelledby={this.ariaForm.labelId}
               aria-describedby={this.ariaForm.messageId}
               aria-invalid={this.invalid === true ? 'true' : 'false'}
-              aria-disabled={this.disabled ? 'true' : null}
+              aria-disabled={ariaBooleanToString(this.disabled)}
               name={this.name}
               multiple={this.multiple}
               disabled={this.disabled || this.loading || this.readonly}

packages/core/src/components/bal-input-slider/bal-input-slider.tsx

@@ -4,6 +4,7 @@ import { debounceEvent } from '../../utils/helpers'
 import { stopEventBubbling } from '../../utils/form-input'
 import { BEM } from '../../utils/bem'
 import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
+import { ariaBooleanToString } from '../../utils/aria'
 
 @Component({
   tag: 'bal-input-slider',
@@ -271,7 +272,7 @@ export class InputSlider implements BalAriaFormLinking {
           ...block.modifier('disabled').class(this.disabled || this.readonly),
         }}
         onClick={this.handleClick}
-        aria-disabled={this.disabled || this.readonly ? 'true' : null}
+        aria-disabled={ariaBooleanToString(this.disabled || this.readonly)}
       >
         <div
           class={{
@@ -308,7 +309,7 @@ export class InputSlider implements BalAriaFormLinking {
             id={this.ariaForm.controlId || this.inputId}
             aria-labelledby={this.ariaForm.labelId}
             aria-describedby={this.ariaForm.messageId}
-            aria-disabled={this.disabled ? 'true' : null}
+            aria-disabled={ariaBooleanToString(this.disabled)}
             aria-invalid={this.invalid === true ? 'true' : 'false'}
             disabled={this.disabled}
             readonly={this.readonly}

packages/core/src/components/bal-input-stepper/bal-input-stepper.tsx

@@ -29,6 +29,7 @@ import { BEM } from '../../utils/bem'
 import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
 import { i18nBalInputStepper } from './bal-input-stepper.i18n'
 import { LogInstance, Loggable, Logger } from '../../utils/log'
+import { ariaBooleanToString } from '../../utils/aria'
 
 @Component({
   tag: 'bal-input-stepper',
@@ -263,7 +264,7 @@ export class InputStepper
 
     return (
       <Host
-        aria-disabled={this.disabled ? 'true' : null}
+        aria-disabled={ariaBooleanToString(this.disabled)}
         aria-focused={this.focused ? 'true' : null}
         class={{
           ...block.class(),
@@ -328,7 +329,7 @@ export class InputStepper
           aria-labelledby={this.ariaForm.labelId}
           aria-describedby={this.ariaForm.messageId}
           aria-invalid={this.invalid === true ? 'true' : 'false'}
-          aria-disabled={this.disabled ? 'true' : null}
+          aria-disabled={ariaBooleanToString(this.disabled)}
           data-testid="bal-input-stepper"
           type="text"
           value={this.value}

packages/core/src/components/bal-input/bal-input-date/bal-input-date.tsx

@@ -20,6 +20,7 @@ import { hasParent } from '../../../utils/helpers'
 import { DateMask, MaskComponentAdapter } from '../../../utils/mask'
 import { inputSetBlur, inputSetFocus } from '../../../utils/form-input'
 import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../../utils/form'
+import { ariaBooleanToString } from 'packages/core/src/utils/aria'
 
 @Component({
   tag: 'bal-input-date',
@@ -277,7 +278,7 @@ export class InputDate implements ComponentInterface, Loggable, BalConfigObserve
           aria-labelledby={this.ariaForm.labelId}
           aria-describedby={this.ariaForm.messageId}
           aria-invalid={this.invalid === true ? 'true' : 'false'}
-          aria-disabled={this.disabled ? 'true' : null}
+          aria-disabled={ariaBooleanToString(this.disabled)}
           required={this.required}
           disabled={this.disabled}
           readonly={this.readonly}

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

@@ -45,6 +45,7 @@ import { ACTION_KEYS, isCtrlOrCommandKey, NUMBER_KEYS } from '../../utils/consta
 import { BEM } from '../../utils/bem'
 import { Loggable, Logger, LogInstance } from '../../utils/log'
 import { BalAriaForm, BalAriaFormLinking, defaultBalAriaForm } from '../../utils/form'
+import { ariaBooleanToString } from '../../utils/aria'
 
 @Component({
   tag: 'bal-input',
@@ -548,7 +549,7 @@ export class Input implements ComponentInterface, FormInput<string | undefined>,
     return (
       <Host
         onClick={this.handleClick}
-        aria-disabled={this.disabled ? 'true' : null}
+        aria-disabled={ariaBooleanToString(this.disabled)}
         class={{
           ...block.class(),
         }}
@@ -570,7 +571,7 @@ export class Input implements ComponentInterface, FormInput<string | undefined>,
           aria-labelledby={this.ariaForm.labelId}
           aria-describedby={this.ariaForm.messageId}
           aria-invalid={this.invalid === true ? 'true' : 'false'}
-          aria-disabled={this.disabled ? 'true' : null}
+          aria-disabled={ariaBooleanToString(this.disabled)}
           disabled={this.disabled}
           accept={this.accept}
           inputMode={this.inputmode}