From 74b39291d71d2e534298ccf19df8c39ee7ff2dee Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Fri, 6 Sep 2024 06:20:41 +0000 Subject: [PATCH 1/5] Create PR for #1419 From 223d55bc3ea789b8d051dd27546cb0b2c7179b75 Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Fri, 6 Sep 2024 09:55:43 +0200 Subject: [PATCH 2/5] chore: fix nx scripts --- package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/package.json b/package.json index 6ecff8ee7..582b75cb5 100644 --- a/package.json +++ b/package.json @@ -27,9 +27,6 @@ "docs", "e2e" ], - "nx": { - "includedScripts": [] - }, "devDependencies": { "@angular-devkit/build-angular": "~15.0.0", "@angular-devkit/core": "~15.0.0", From a79310fa81bde47a07cd376eb263a80faf7efe9f Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Fri, 6 Sep 2024 09:57:19 +0200 Subject: [PATCH 3/5] fix(accordion): make it keyboard accessible --- .changeset/pretty-pets-fix.md | 5 +++++ .../bal-accordion-summary.sass | 3 +++ .../bal-accordion-summary.tsx | 12 ++++++++++++ .../bal-accordion-trigger.sass | 4 ++++ .../bal-accordion-trigger.tsx | 16 ++++++++++++++++ 5 files changed, 40 insertions(+) create mode 100644 .changeset/pretty-pets-fix.md diff --git a/.changeset/pretty-pets-fix.md b/.changeset/pretty-pets-fix.md new file mode 100644 index 000000000..669f81976 --- /dev/null +++ b/.changeset/pretty-pets-fix.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': patch +--- + +**accordion**: make it keyboard accessible 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 index 0fabe72ea..8147ca759 100644 --- 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 index 129515bf8..dbbc894f7 100644 --- 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 index 0e416e6d8..f8c8c7c43 100644 --- 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 index 95aa6b37a..5d4e01263 100644 --- 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 ( From b07fec01532cfef12eeff4930ece24bfe1490509 Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Fri, 6 Sep 2024 10:07:39 +0200 Subject: [PATCH 4/5] fix(list): make accordion accessible to the keyboard --- .changeset/six-readers-refuse.md | 5 +++++ .../bal-list-item-accordion-head.tsx | 10 ++++++++++ 2 files changed, 15 insertions(+) create mode 100644 .changeset/six-readers-refuse.md diff --git a/.changeset/six-readers-refuse.md b/.changeset/six-readers-refuse.md new file mode 100644 index 000000000..556c69774 --- /dev/null +++ b/.changeset/six-readers-refuse.md @@ -0,0 +1,5 @@ +--- +'@baloise/ds-core': patch +--- + +**list**: make accordion accessible to the keyboard diff --git a/packages/core/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx b/packages/core/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx index 6a7a619be..1a68f8137 100644 --- a/packages/core/src/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.tsx +++ b/packages/core/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} > From b7846fded08a868a5c86bcff8f8bc7810e7ea30b Mon Sep 17 00:00:00 2001 From: Gery Hirschfeld Date: Fri, 6 Sep 2024 11:13:04 +0200 Subject: [PATCH 5/5] chore: fix nx scripts --- package-lock.json | 3 --- package.json | 10 ++++------ 2 files changed, 4 insertions(+), 9 deletions(-) diff --git a/package-lock.json b/package-lock.json index 73ac939da..48dddbb4b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,9 +14,6 @@ "docs", "e2e" ], - "dependencies": { - "@nx/devkit": "18.0.5" - }, "devDependencies": { "@angular-devkit/build-angular": "~15.0.0", "@angular-devkit/core": "~15.0.0", diff --git a/package.json b/package.json index 582b75cb5..3656add62 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,9 @@ "angular": "npx nx run create-angular", "angular:start": "npx nx run start-angular" }, + "nx": { + "includedScripts": [] + }, "private": true, "workspaces": [ "packages/*", @@ -137,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": "pnpm@8.5.0+sha1.83c41fe4ebdb61e08446f8bb68a75fb48756b330" + } }