From d8c6e81f63ef632c289a4f60e9d1fc86064e7195 Mon Sep 17 00:00:00 2001 From: mryunt02 Date: Tue, 22 Oct 2024 00:01:31 +0300 Subject: [PATCH 1/3] feat(dialog, drawer, progress-indicator): Add accessibility labels to close buttons and progress indicator --- src/components/dialog/bl-dialog.test.ts | 1 + src/components/dialog/bl-dialog.ts | 1 + src/components/drawer/bl-drawer.test.ts | 2 ++ src/components/drawer/bl-drawer.ts | 1 + src/components/progress-indicator/bl-progress-indicator.test.ts | 1 + src/components/progress-indicator/bl-progress-indicator.ts | 1 + 6 files changed, 7 insertions(+) diff --git a/src/components/dialog/bl-dialog.test.ts b/src/components/dialog/bl-dialog.test.ts index 81ef3866..6496ab4e 100644 --- a/src/components/dialog/bl-dialog.test.ts +++ b/src/components/dialog/bl-dialog.test.ts @@ -100,6 +100,7 @@ describe("bl-dialog", () => {
{
{ > {
diff --git a/src/components/progress-indicator/bl-progress-indicator.ts b/src/components/progress-indicator/bl-progress-indicator.ts index 2ff2cd09..d54cb43b 100644 --- a/src/components/progress-indicator/bl-progress-indicator.ts +++ b/src/components/progress-indicator/bl-progress-indicator.ts @@ -70,6 +70,7 @@ export default class BlProgressIndicator extends LitElement { return html`
`; From 527af16da77b5ba4248803f1f704d0c72589fa31 Mon Sep 17 00:00:00 2001 From: mryunt02 Date: Tue, 22 Oct 2024 00:15:15 +0300 Subject: [PATCH 2/3] feat(radio,radio-group): Enhance accessibility with arrow key navigation and aria attributes --- src/components/radio-group/bl-radio-group.ts | 15 ++++++++------- src/components/radio-group/radio/bl-radio.test.ts | 2 +- src/components/radio-group/radio/bl-radio.ts | 2 +- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/radio-group/bl-radio-group.ts b/src/components/radio-group/bl-radio-group.ts index 839edff4..ac5da598 100644 --- a/src/components/radio-group/bl-radio-group.ts +++ b/src/components/radio-group/bl-radio-group.ts @@ -76,10 +76,18 @@ export default class BlRadioGroup extends FormControlMixin(LitElement) { // Next option if (["ArrowDown", "ArrowRight"].includes(event.key)) { this.focusedOptionIndex++; + if (this.focusedOptionIndex >= this.availableOptions.length) { + this.focusedOptionIndex = 0; // Wrap around to the first option + } + this.availableOptions[this.focusedOptionIndex].select(); // Previous option } else if (["ArrowUp", "ArrowLeft"].includes(event.key)) { this.focusedOptionIndex--; + if (this.focusedOptionIndex < 0) { + this.focusedOptionIndex = this.availableOptions.length - 1; // Wrap around to the last option + } + this.availableOptions[this.focusedOptionIndex].select(); // Select option } else if ([" "].includes(event.key)) { @@ -90,17 +98,10 @@ export default class BlRadioGroup extends FormControlMixin(LitElement) { return; } - // Don't exceed array indexes - this.focusedOptionIndex = Math.max( - 0, - Math.min(this.focusedOptionIndex, this.availableOptions.length - 1) - ); - this.availableOptions[this.focusedOptionIndex].focus(); event.preventDefault(); } - connectedCallback(): void { super.connectedCallback(); diff --git a/src/components/radio-group/radio/bl-radio.test.ts b/src/components/radio-group/radio/bl-radio.test.ts index fc1afef1..54c4ca1b 100644 --- a/src/components/radio-group/radio/bl-radio.test.ts +++ b/src/components/radio-group/radio/bl-radio.test.ts @@ -19,7 +19,7 @@ describe("bl-radio", () => { `