feat(a11y): Accessibility improvements for Dialog, Drawer, Progress I…

…ndicator and Radio

src/components/dialog/bl-dialog.ts

@@ -183,6 +183,7 @@ export default class BlDialog extends LitElement {
  ? html`<bl-button
  @click="${() => this.closeDialog("close-button")}"
  icon="close"
+ label="close"
  variant="tertiary"
  kind="neutral"
  size="small"

src/components/drawer/bl-drawer.ts

@@ -166,6 +166,7 @@ export default class BlDrawer extends LitElement {
  <bl-button
  @click="${this.closeDrawer}"
  icon="close"
+ label="close"
  size="small"
  variant="tertiary"
  kind="neutral"

src/components/progress-indicator/bl-progress-indicator.ts

@@ -70,6 +70,7 @@ export default class BlProgressIndicator extends LitElement {
  return html`<div
  class="progress-indicator"
  role="progressbar"
+ aria-label="progress indicator"
  aria-valuemax="${this._max}"
  aria-valuenow="${this._value}"
  ></div>`;

src/components/radio-group/radio/bl-radio.ts

@@ -91,6 +91,13 @@ export default class BlRadio extends LitElement {
  this.selected = newValue === this.value;
  };
 
+ private handleKeyDown = (event: KeyboardEvent) => {
+ if (event.key === "Enter" || event.key === " ") {
+ event.preventDefault();
+ this.select();
+ }
+ };
+
  private field: BlRadioGroup | null;
 
  connectedCallback(): void {
@@ -119,11 +126,14 @@ export default class BlRadio extends LitElement {
  return html`<div
  class=${classes}
  role="radio"
+ tabindex="1"
  aria-labelledby="label"
  aria-disabled=${this.disabled}
  aria-readonly=${this.disabled}
+ aria-checked=${this.selected}
  @blur=${this.blur}
  @click=${this.select}
+ @keydown=${this.handleKeyDown}
  >
  <p id="label"><slot></slot></p>
  </div>`;