feat(select): accessibility improvement on select and option component

fix(select): role and ari-label attribute

fix(select): style issue

src/components/select/bl-select.test.ts

@@ -18,7 +18,12 @@ describe('bl-select', () => {
  assert.shadowDom.equal(
  el,
  `
- <div class="select-wrapper">
+ <div
+ class="select-wrapper"
+ role="list-box"
+ aria-multiselectable="true"
+ aria-labelledby="label"
+ >
  <fieldset
  class="select-input"
  tabindex="0"

src/components/select/bl-select.ts

@@ -332,7 +332,7 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
 
  const helpMessage = this.helpText ? html`<p class="help-text">${this.helpText}</p>` : '';
 
- const label = this.label ? html`<label>${this.label}</label>` : '';
+ const label = this.label ? html`<label id="label">${this.label}</label>` : '';
 
  return html`<div
  class=${classMap({
@@ -343,6 +343,9 @@ export default class BlSelect<ValueType extends FormValue = string> extends Form
  'dirty': this.dirty,
  })}
  @keydown=${this.handleKeydown}
+ aria-labelledby="label"
+ role="list-box"
+ aria-multiselectable="true"
  >
  ${label} ${this.inputTemplate()}
  <div

src/components/select/option/bl-select-option.test.ts

@@ -8,6 +8,34 @@ describe('bl-select', () => {
  assert.instanceOf(el, BlSelectOption);
  });
 
+ it('renders with default values', async () => {
+ const el = await fixture<BlSelectOption>(html`<bl-select-option></bl-select-option>`);
+
+ expect(el).shadowDom.equal(
+ `<div
+ aria-selected="false"
+ class="option-container"
+ role="option"
+ >
+ <div class="focus-target single-option">
+ <slot>
+ </slot>
+ </div>
+ </div>
+ `
+ );
+ });
+
+ it('should have aria-selected attribute set to true if the option is selected', async function () {
+ const el = await fixture<BlSelectOption>(
+ html`<bl-select-option value="basketball" selected>Basketball</bl-select-option>`
+ );
+
+ const option = el.shadowRoot?.querySelector<HTMLButtonElement>('.option-container');
+
+ expect(option).has.attribute('aria-selected', 'true');
+ });
+
  describe('keyboard navigation', () => {
  it('should get focus', async () => {
  //when

src/components/select/option/bl-select-option.ts

@@ -102,7 +102,7 @@ export default class BlSelectOption<ValueType extends FormValue = string> extend
  }
 
  render() {
- return html`<div class="option-container">
+ return html`<div class="option-container" role="option" aria-selected="${this.selected}">
  ${this.multiple ? this.checkboxOptionTemplate() : this.singleOptionTemplate()}
  </div>`;
  }