🐛 fix(): add a11y labels to accordion and pagination component (#1001)

* chore(): add a11y labels to accordion and pagination component

* chore(): refactor

.changeset/heavy-days-provide.md

@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+add a11y labels to accordion and pagination component

packages/components/src/components.d.ts

@@ -377,6 +377,7 @@ export namespace Components {
           * If `true` a light border is shown at the bottom.
          */
         "border": boolean;
+        "configChanged": (state: BalConfigState1) => Promise<void>;
         /**
           * Defines the layout of the navigation controls.
          */
@@ -2025,6 +2026,7 @@ export namespace Components {
         "value"?: number;
     }
     interface BalPagination {
+        "configChanged": (state: BalConfigState1) => Promise<void>;
         /**
           * Disables component
          */

packages/components/src/components/bal-carousel/bal-carousel.i18n.ts

@@ -0,0 +1,49 @@
+import { I18n } from '../../interfaces'
+
+interface I18nCarouselLabel {
+  left: string
+  right: string
+}
+
+export const i18nControlLabel: I18n<I18nCarouselLabel> = {
+  de: {
+    left: 'vorherige',
+    right: 'nächste',
+  },
+  en: {
+    left: 'previous',
+    right: 'next',
+  },
+  fr: {
+    left: 'précédent',
+    right: 'suivant',
+  },
+  it: {
+    left: 'precedente',
+    right: 'successivo',
+  },
+  nl: {
+    left: 'vorige',
+    right: 'volgende',
+  },
+  es: {
+    left: 'anterior',
+    right: 'siguiente',
+  },
+  pl: {
+    left: 'poprzedni',
+    right: 'następny',
+  },
+  pt: {
+    left: 'anterior',
+    right: 'próximo',
+  },
+  sv: {
+    left: 'föregående',
+    right: 'nästa',
+  },
+  fi: {
+    left: 'edellinen',
+    right: 'seuraava',
+  },
+}

packages/components/src/components/bal-carousel/bal-carousel.tsx

@@ -25,6 +25,9 @@ import { BalSwipeInfo, BalSwipeObserver, ListenToSwipe } from '../../utils/swipe
 import { BalMutationObserver, ListenToMutation } from '../../utils/mutation'
 import { BalResizeObserver, ListenToResize } from '../../utils/resize'
 import { getComputedWidth } from '../../utils/style'
+import { BalConfigState } from '../../interfaces'
+import { BalLanguage, ListenToConfig, defaultConfig } from '../../utils/config'
+import { i18nControlLabel } from './bal-carousel.i18n'
 
 @Component({
   tag: 'bal-carousel',
@@ -42,6 +45,7 @@ export class Carousel
 
   @State() isLastSlideVisible = true
   @State() areControlsHidden = !balBreakpoints.isMobile
+  @State() language: BalLanguage = defaultConfig.language
 
   @Element() el!: HTMLElement
 
@@ -161,6 +165,15 @@ export class Carousel
     this.itemsChanged()
   }
 
+  /**
+   * @internal define config for the component
+   */
+  @Method()
+  @ListenToConfig()
+  async configChanged(state: BalConfigState): Promise<void> {
+    this.language = state.language
+  }
+
   /**
    * PUBLIC METHODS
    * ------------------------------------------------------
@@ -376,6 +389,8 @@ export class Carousel
     const block = BEM.block('carousel')
     const inner = block.element('inner')
     const container = inner.element('container')
+    const leftControlTitle = i18nControlLabel[this.language].left
+    const rightControlTitle = i18nControlLabel[this.language].right
 
     const controlItems = this.getAllControlItems()
     return (
@@ -449,6 +464,8 @@ export class Carousel
             isLast={this.isLast()}
             inverted={this.inverted}
             areControlsHidden={this.areControlsHidden}
+            leftControlTitle={leftControlTitle}
+            rightControlTitle={rightControlTitle}
             onNextClick={() => this.onNextButtonClick()}
             onPreviousClick={() => this.onPreviousButtonClick()}
           ></LargeControl>
@@ -461,6 +478,8 @@ export class Carousel
             isFirst={this.isFirst()}
             isLast={this.isLast()}
             inverted={this.inverted}
+            leftControlTitle={leftControlTitle}
+            rightControlTitle={rightControlTitle}
             onNextClick={() => this.onNextButtonClick()}
             onPreviousClick={() => this.onPreviousButtonClick()}
           ></SmallControl>

packages/components/src/components/bal-carousel/controls/large-control.tsx

@@ -6,6 +6,8 @@ export interface LargeControlProps {
   isLast: boolean
   inverted: boolean
   areControlsHidden: boolean
+  leftControlTitle: string
+  rightControlTitle: string
   onPreviousClick: () => void
   onNextClick: () => void
 }
@@ -17,6 +19,8 @@ export const LargeControl: FunctionalComponent<LargeControlProps> = ({
   areControlsHidden,
   onNextClick,
   onPreviousClick,
+  leftControlTitle,
+  rightControlTitle,
 }) => {
   const block = BEM.block('carousel')
   const controls = block.element('controls')
@@ -43,6 +47,7 @@ export const LargeControl: FunctionalComponent<LargeControlProps> = ({
         onClick={() => onPreviousClick()}
         disabled={isFirst}
         data-testid="bal-carousel-control-left"
+        title={leftControlTitle}
       ></bal-button>
       <bal-button
         class={{
@@ -57,6 +62,7 @@ export const LargeControl: FunctionalComponent<LargeControlProps> = ({
         onClick={() => onNextClick()}
         disabled={isLast}
         data-testid="bal-carousel-control-right"
+        title={rightControlTitle}
       ></bal-button>
     </div>
   )

packages/components/src/components/bal-carousel/controls/small-control.tsx

@@ -5,6 +5,8 @@ export interface SmallControlProps {
   isFirst: boolean
   isLast: boolean
   inverted: boolean
+  leftControlTitle: string
+  rightControlTitle: string
   onPreviousClick: () => void
   onNextClick: () => void
 }
@@ -13,6 +15,8 @@ export const SmallControl: FunctionalComponent<SmallControlProps> = ({
   isFirst,
   isLast,
   inverted,
+  leftControlTitle,
+  rightControlTitle,
   onNextClick,
   onPreviousClick,
 }) => {
@@ -41,6 +45,7 @@ export const SmallControl: FunctionalComponent<SmallControlProps> = ({
         onClick={() => onPreviousClick()}
         disabled={isFirst}
         data-testid="bal-carousel-control-left"
+        title={leftControlTitle}
       ></bal-button>
       <bal-button
         class={{
@@ -56,6 +61,7 @@ export const SmallControl: FunctionalComponent<SmallControlProps> = ({
         onClick={() => onNextClick()}
         disabled={isLast}
         data-testid="bal-carousel-control-right"
+        title={rightControlTitle}
       ></bal-button>
     </div>
   )

packages/components/src/components/bal-pagination/bal-pagination.i18n.ts

@@ -0,0 +1,49 @@
+import { I18n } from '../../interfaces'
+
+interface I18nPaginationContolLabel {
+  left: string
+  right: string
+}
+
+export const i18nControlLabel: I18n<I18nPaginationContolLabel> = {
+  de: {
+    left: 'Vorherige Seite',
+    right: 'Nächste Seite',
+  },
+  en: {
+    left: 'Previous Page',
+    right: 'Next Page',
+  },
+  fr: {
+    left: 'Page précédente',
+    right: 'Page suivante',
+  },
+  it: {
+    left: 'Pagina precedente',
+    right: 'Pagina successiva',
+  },
+  nl: {
+    left: 'Vorige pagina',
+    right: 'Volgende pagina',
+  },
+  es: {
+    left: 'Página anterior',
+    right: 'Página siguiente',
+  },
+  pl: {
+    left: 'Poprzednia strona',
+    right: 'Następna strona',
+  },
+  pt: {
+    left: 'Página anterior',
+    right: 'Próxima página',
+  },
+  sv: {
+    left: 'Föregående sida',
+    right: 'Nästa sida',
+  },
+  fi: {
+    left: 'Edellinen sivu',
+    right: 'Seuraava sivu',
+  },
+}

packages/components/src/components/bal-pagination/bal-pagination.tsx

@@ -14,6 +14,9 @@ import {
 } from '@stencil/core'
 import { BEM } from '../../utils/bem'
 import { BalBreakpointObserver, BalBreakpoints, ListenToBreakpoints, balBreakpoints } from '../../utils/breakpoints'
+import { BalConfigState } from '../../interfaces'
+import { BalLanguage, ListenToConfig, defaultConfig } from '../../utils/config'
+import { i18nControlLabel } from './bal-pagination.i18n'
 
 @Component({
   tag: 'bal-pagination',
@@ -25,6 +28,7 @@ export class Pagination implements ComponentInterface, BalBreakpointObserver {
   @Element() el!: HTMLBalPaginationElement
   @State() _value = 1
   @State() isMobile = balBreakpoints.isMobile
+  @State() language: BalLanguage = defaultConfig.language
 
   /**
    * Defines the layout of the pagination
@@ -110,6 +114,15 @@ export class Pagination implements ComponentInterface, BalBreakpointObserver {
     }
   }
 
+  /**
+   * @internal define config for the component
+   */
+  @Method()
+  @ListenToConfig()
+  async configChanged(state: BalConfigState): Promise<void> {
+    this.language = state.language
+  }
+
   selectPage(pageNumber: number) {
     this._value = pageNumber
     this.balChangeEventEmitter.emit(this._value)
@@ -215,6 +228,9 @@ export class Pagination implements ComponentInterface, BalBreakpointObserver {
     const buttonSize = isSmall ? 'small' : ''
     const flat = isSmall
 
+    const leftControlTitle = i18nControlLabel[this.language].left
+    const rightControlTitle = i18nControlLabel[this.language].right
+
     const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5)
 
     const SmallWithText: FunctionalComponent = () => (
@@ -284,6 +300,7 @@ export class Pagination implements ComponentInterface, BalBreakpointObserver {
             disabled={this._value < 2 || this.disabled}
             onClick={() => this.previous()}
             data-testid="bal-pagination-controls-left"
+            title={leftControlTitle}
           >
             <bal-icon name="nav-go-left" size="small" />
           </bal-button>
@@ -299,6 +316,7 @@ export class Pagination implements ComponentInterface, BalBreakpointObserver {
             disabled={this._value === this.totalPages || this.disabled}
             onClick={() => this.next()}
             data-testid="bal-pagination-controls-right"
+            title={rightControlTitle}
           >
             <bal-icon name="nav-go-right" size="small" />
           </bal-button>