diff --git a/.changeset/heavy-days-provide.md b/.changeset/heavy-days-provide.md new file mode 100644 index 0000000000..db9ffe9db9 --- /dev/null +++ b/.changeset/heavy-days-provide.md @@ -0,0 +1,5 @@ +--- +'@baloise/design-system-components': patch +--- + +add a11y labels to accordion and pagination component diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index b74281b110..8d3f7b5bef 100644 --- a/packages/components/src/components.d.ts +++ b/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; /** * Defines the layout of the navigation controls. */ @@ -2025,6 +2026,7 @@ export namespace Components { "value"?: number; } interface BalPagination { + "configChanged": (state: BalConfigState1) => Promise; /** * Disables component */ diff --git a/packages/components/src/components/bal-carousel/bal-carousel.i18n.ts b/packages/components/src/components/bal-carousel/bal-carousel.i18n.ts new file mode 100644 index 0000000000..29789578b1 --- /dev/null +++ b/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 = { + 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', + }, +} diff --git a/packages/components/src/components/bal-carousel/bal-carousel.tsx b/packages/components/src/components/bal-carousel/bal-carousel.tsx index 580441fb8f..a621c1d373 100644 --- a/packages/components/src/components/bal-carousel/bal-carousel.tsx +++ b/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 { + 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()} > @@ -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()} > diff --git a/packages/components/src/components/bal-carousel/controls/large-control.tsx b/packages/components/src/components/bal-carousel/controls/large-control.tsx index b9f7865694..8d376db60f 100644 --- a/packages/components/src/components/bal-carousel/controls/large-control.tsx +++ b/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 = ({ areControlsHidden, onNextClick, onPreviousClick, + leftControlTitle, + rightControlTitle, }) => { const block = BEM.block('carousel') const controls = block.element('controls') @@ -43,6 +47,7 @@ export const LargeControl: FunctionalComponent = ({ onClick={() => onPreviousClick()} disabled={isFirst} data-testid="bal-carousel-control-left" + title={leftControlTitle} > = ({ onClick={() => onNextClick()} disabled={isLast} data-testid="bal-carousel-control-right" + title={rightControlTitle} > ) diff --git a/packages/components/src/components/bal-carousel/controls/small-control.tsx b/packages/components/src/components/bal-carousel/controls/small-control.tsx index d620ad9c8f..0e5662e050 100644 --- a/packages/components/src/components/bal-carousel/controls/small-control.tsx +++ b/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 = ({ isFirst, isLast, inverted, + leftControlTitle, + rightControlTitle, onNextClick, onPreviousClick, }) => { @@ -41,6 +45,7 @@ export const SmallControl: FunctionalComponent = ({ onClick={() => onPreviousClick()} disabled={isFirst} data-testid="bal-carousel-control-left" + title={leftControlTitle} > = ({ onClick={() => onNextClick()} disabled={isLast} data-testid="bal-carousel-control-right" + title={rightControlTitle} > ) diff --git a/packages/components/src/components/bal-pagination/bal-pagination.i18n.ts b/packages/components/src/components/bal-pagination/bal-pagination.i18n.ts new file mode 100644 index 0000000000..fe03f70f6e --- /dev/null +++ b/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 = { + 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', + }, +} diff --git a/packages/components/src/components/bal-pagination/bal-pagination.tsx b/packages/components/src/components/bal-pagination/bal-pagination.tsx index d14c79e43e..e51872d478 100644 --- a/packages/components/src/components/bal-pagination/bal-pagination.tsx +++ b/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 { + 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} > @@ -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} >