html-combobox-element 0.0.4 → 0.0.5

package/dist/cjs/combobox/Combobox.markup.js

@@ -425,7 +425,7 @@ ${urls.map(url => `@import "${url}";`)}
 
 <div id="dropdown" popover="manual" part='dropdown' >
   <input placeholder='Поиск' name="search-input" part="search-input" inputmode='search' autofocus />
-  <div part="options" id='options'></div>
+  <div part="options" id='options' role="listbox"></div>
 </div>
 
 <template id='tag-template'>

package/dist/cjs/combobox/HTML.combobox.element.js

@@ -21,13 +21,13 @@ class HTMLComboboxElement extends HTMLElement {
         super();
         this.#internals = this.attachInternals();
         this.#internals.role = "combobox";
-        this.#internals.ariaHasPopup = "dialog";
         this.shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true }); //delegatesFocus: true
         this.#markup = new Combobox_markup_js_1.ComboboxMarkup(this.shadowRoot, this.#internals);
         this.shadowRoot.appendChild(Combobox_markup_js_1.ComboboxMarkup.markup.content.cloneNode(true));
         this.shadowRoot.adoptedStyleSheets = _a.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
         this.#markup.connect();
+        this.#syncPopupSemantics();
     }
     // Lifecycle callbacks
     connectedCallback() {
@@ -184,12 +184,14 @@ class HTMLComboboxElement extends HTMLElement {
     }
     set filterable(value) {
         super.toggleAttribute('filterable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        this.#syncPopupSemantics();
     }
     get searchable() {
         return this.hasAttribute('searchable');
     }
     set searchable(value) {
         super.toggleAttribute('searchable', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        this.#syncPopupSemantics();
     }
     // <select> specific properties (implements HTMLSelectElement)
     get disabled() {
@@ -215,6 +217,7 @@ class HTMLComboboxElement extends HTMLElement {
     }
     set multiple(value) {
         super.toggleAttribute('multiple', (0, Boolean_attribute_value_normalizer_js_1.toBoolean)(value));
+        this.#syncPopupSemantics();
     }
     // get options
     // (there is no constructor of HTMLOptionsCollection, need to implement)
@@ -400,6 +403,7 @@ class HTMLComboboxElement extends HTMLElement {
         if (state === oldState)
             return;
         if (state === 'open') {
+            this.#syncPopupSemantics();
             this.#prevValue = this.value;
             this.#changed = true;
         }
@@ -454,6 +458,26 @@ class HTMLComboboxElement extends HTMLElement {
             this.#markup.sort(this.#markup.searchInput?.value || '');
         }
     };
+    // Without a search field the popup is just the listbox. With one, it is a dialog holding the field and the listbox.
+    #syncPopupSemantics() {
+        const withSearch = this.searchable || this.filterable;
+        this.#internals.ariaHasPopup = withSearch ? 'dialog' : 'listbox';
+        if (withSearch) {
+            this.#markup?.dropdown?.setAttribute('role', 'dialog');
+        }
+        else {
+            this.#markup?.dropdown?.removeAttribute('role');
+        }
+        this.#markup?.optionsContainer?.setAttribute('aria-multiselectable', String(this.multiple));
+        // Shadow content can't point at the outer <label> with aria-labelledby, so it borrows the label's text.
+        const name = Array.from(this.#internals.labels ?? [], (label) => label.textContent?.trim()).filter(Boolean).join(' ');
+        for (const popup of [this.#markup?.dropdown, this.#markup?.optionsContainer]) {
+            if (name && popup?.hasAttribute('role'))
+                popup.setAttribute('aria-label', name);
+            else
+                popup?.removeAttribute('aria-label');
+        }
+    }
     #setValidityAndFormValue() {
         this.#markup.clearAllButton?.toggleAttribute('disabled', !Boolean(this.#values.size));
         let empty = false;

package/dist/cjs/combobox/HTML.combobox.option.element.js

@@ -6,6 +6,8 @@ const Boolean_attribute_value_normalizer_js_1 = require("./Boolean.attribute.val
 class HTMLComboboxOptionElement extends HTMLElement {
     static OWN_IDL = new Set(['value', 'label', 'selected', 'disabled']);
     static EventInit = { bubbles: true, cancelable: true, composed: true };
+    // The browser only knows what `selected` means on a native <option>; here the state reaches assistive tech through internals.
+    #internals = this.attachInternals();
     static captureFocus(event) {
         if (event.relatedTarget && event.relatedTarget instanceof _a) {
             event.stopPropagation();
@@ -40,6 +42,7 @@ class HTMLComboboxOptionElement extends HTMLElement {
         this.part.add('option');
         super.setAttribute('tabindex', "0");
         super.setAttribute('role', "option");
+        this.#internals.ariaSelected = String(this.selected);
         if (!this.value)
             this.value = this.label;
         if (!this.textContent)
@@ -82,6 +85,7 @@ class HTMLComboboxOptionElement extends HTMLElement {
         }
         super.toggleAttribute('selected', force);
         this.part.toggle('selected', force);
+        this.#internals.ariaSelected = String(force);
         // console.log('this.isConnected', this.isConnected)
         if (this.isConnected) {
             this.dispatchEvent(new Event('optionselectedstatechange', _a.EventInit));
@@ -118,9 +122,12 @@ class HTMLComboboxOptionElement extends HTMLElement {
         }
     }
     toggleAttribute(name, force) {
-        if (name === 'selected')
-            this.part.toggle(name, force);
-        return super.toggleAttribute(name, force);
+        const result = super.toggleAttribute(name, force);
+        if (name === 'selected') {
+            this.part.toggle(name, result);
+            this.#internals.ariaSelected = String(result);
+        }
+        return result;
     }
 }
 exports.HTMLComboboxOptionElement = HTMLComboboxOptionElement;

package/dist/esm/combobox/Combobox.markup.js

@@ -422,7 +422,7 @@ ${urls.map(url => `@import "${url}";`)}
 
 <div id="dropdown" popover="manual" part='dropdown' >
   <input placeholder='Поиск' name="search-input" part="search-input" inputmode='search' autofocus />
-  <div part="options" id='options'></div>
+  <div part="options" id='options' role="listbox"></div>
 </div>
 
 <template id='tag-template'>

package/dist/esm/combobox/HTML.combobox.element.js

@@ -17,13 +17,13 @@ export class HTMLComboboxElement extends HTMLElement {
         super();
         this.#internals = this.attachInternals();
         this.#internals.role = "combobox";
-        this.#internals.ariaHasPopup = "dialog";
         this.shadowRoot = this.attachShadow({ mode: 'open', delegatesFocus: true }); //delegatesFocus: true
         this.#markup = new ComboboxMarkup(this.shadowRoot, this.#internals);
         this.shadowRoot.appendChild(ComboboxMarkup.markup.content.cloneNode(true));
         this.shadowRoot.adoptedStyleSheets = HTMLComboboxElement.styleSheet;
         this.#observer = new MutationObserver(this.#onOptionsChanges);
         this.#markup.connect();
+        this.#syncPopupSemantics();
     }
     // Lifecycle callbacks
     connectedCallback() {
@@ -180,12 +180,14 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     set filterable(value) {
         super.toggleAttribute('filterable', toBoolean(value));
+        this.#syncPopupSemantics();
     }
     get searchable() {
         return this.hasAttribute('searchable');
     }
     set searchable(value) {
         super.toggleAttribute('searchable', toBoolean(value));
+        this.#syncPopupSemantics();
     }
     // <select> specific properties (implements HTMLSelectElement)
     get disabled() {
@@ -211,6 +213,7 @@ export class HTMLComboboxElement extends HTMLElement {
     }
     set multiple(value) {
         super.toggleAttribute('multiple', toBoolean(value));
+        this.#syncPopupSemantics();
     }
     // get options
     // (there is no constructor of HTMLOptionsCollection, need to implement)
@@ -396,6 +399,7 @@ export class HTMLComboboxElement extends HTMLElement {
         if (state === oldState)
             return;
         if (state === 'open') {
+            this.#syncPopupSemantics();
             this.#prevValue = this.value;
             this.#changed = true;
         }
@@ -450,6 +454,26 @@ export class HTMLComboboxElement extends HTMLElement {
             this.#markup.sort(this.#markup.searchInput?.value || '');
         }
     };
+    // Without a search field the popup is just the listbox. With one, it is a dialog holding the field and the listbox.
+    #syncPopupSemantics() {
+        const withSearch = this.searchable || this.filterable;
+        this.#internals.ariaHasPopup = withSearch ? 'dialog' : 'listbox';
+        if (withSearch) {
+            this.#markup?.dropdown?.setAttribute('role', 'dialog');
+        }
+        else {
+            this.#markup?.dropdown?.removeAttribute('role');
+        }
+        this.#markup?.optionsContainer?.setAttribute('aria-multiselectable', String(this.multiple));
+        // Shadow content can't point at the outer <label> with aria-labelledby, so it borrows the label's text.
+        const name = Array.from(this.#internals.labels ?? [], (label) => label.textContent?.trim()).filter(Boolean).join(' ');
+        for (const popup of [this.#markup?.dropdown, this.#markup?.optionsContainer]) {
+            if (name && popup?.hasAttribute('role'))
+                popup.setAttribute('aria-label', name);
+            else
+                popup?.removeAttribute('aria-label');
+        }
+    }
     #setValidityAndFormValue() {
         this.#markup.clearAllButton?.toggleAttribute('disabled', !Boolean(this.#values.size));
         let empty = false;

package/dist/esm/combobox/HTML.combobox.option.element.js

@@ -2,6 +2,8 @@ import { toBoolean } from './Boolean.attribute.value.normalizer.js';
 export class HTMLComboboxOptionElement extends HTMLElement {
     static OWN_IDL = new Set(['value', 'label', 'selected', 'disabled']);
     static EventInit = { bubbles: true, cancelable: true, composed: true };
+    // The browser only knows what `selected` means on a native <option>; here the state reaches assistive tech through internals.
+    #internals = this.attachInternals();
     static captureFocus(event) {
         if (event.relatedTarget && event.relatedTarget instanceof HTMLComboboxOptionElement) {
             event.stopPropagation();
@@ -36,6 +38,7 @@ export class HTMLComboboxOptionElement extends HTMLElement {
         this.part.add('option');
         super.setAttribute('tabindex', "0");
         super.setAttribute('role', "option");
+        this.#internals.ariaSelected = String(this.selected);
         if (!this.value)
             this.value = this.label;
         if (!this.textContent)
@@ -78,6 +81,7 @@ export class HTMLComboboxOptionElement extends HTMLElement {
         }
         super.toggleAttribute('selected', force);
         this.part.toggle('selected', force);
+        this.#internals.ariaSelected = String(force);
         // console.log('this.isConnected', this.isConnected)
         if (this.isConnected) {
             this.dispatchEvent(new Event('optionselectedstatechange', HTMLComboboxOptionElement.EventInit));
@@ -114,9 +118,12 @@ export class HTMLComboboxOptionElement extends HTMLElement {
         }
     }
     toggleAttribute(name, force) {
-        if (name === 'selected')
-            this.part.toggle(name, force);
-        return super.toggleAttribute(name, force);
+        const result = super.toggleAttribute(name, force);
+        if (name === 'selected') {
+            this.part.toggle(name, result);
+            this.#internals.ariaSelected = String(result);
+        }
+        return result;
     }
 }
 if (!window.customElements.get('box-option')) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-combobox-element",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "The combo-box web-component & customizable select polyfill",
   "type": "module",
   "scripts": {