@nectary/components 4.6.1 → 4.6.3

package/action-menu/index.js

@@ -88,9 +88,9 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
       case 'Enter':
       case 'Space':
         {
-          e.preventDefault();
           const $opt = this.#findSelectedOption();
           if ($opt !== null) {
+            e.preventDefault();
             $opt.click();
           }
           break;

package/button/index.js

@@ -23,7 +23,7 @@ defineCustomElement('sinch-button', class extends NectaryElement {
     const {
       signal
     } = this.#controller;
-    this.role = 'button';
+    this.setAttribute('role', 'button');
     this.tabIndex = 0;
     this.addEventListener('click', this.#onButtonClick, {
       signal

package/button-group/index.js

@@ -44,6 +44,6 @@ defineCustomElement('sinch-button-group', class extends NectaryElement {
     return getLiteralAttribute(this, sizeExValues, 'size', DEFAULT_SIZE);
   }
   connectedCallback() {
-    this.role = 'group';
+    this.setAttribute('role', 'group');
   }
 });

package/button-group-item/index.js

@@ -23,7 +23,7 @@ defineCustomElement('sinch-button-group-item', class extends NectaryElement {
     const {
       signal
     } = this.#controller;
-    this.role = 'button';
+    this.setAttribute('role', 'button');
     const forwardEvent = e => this.dispatchEvent(new CustomEvent(e.type, {
       ...e
     }));

package/checkbox/index.js

@@ -19,7 +19,7 @@ defineCustomElement('sinch-checkbox', class extends NectaryElement {
     const options = {
       signal
     };
-    this.role = 'checkbox';
+    this.setAttribute('role', 'checkbox');
     this.tabIndex = 0;
     this.addEventListener('click', this.#onClick, options);
     this.addEventListener('focus', this.#onFocus, options);

package/chip/index.js

@@ -22,7 +22,7 @@ defineCustomElement('sinch-chip', class extends NectaryElement {
     const {
       signal
     } = this.#controller;
-    this.role = 'button';
+    this.setAttribute('role', 'button');
     this.tabIndex = 0;
     this.addEventListener('click', this.#onClick, {
       signal

package/color-menu/index.js

@@ -25,7 +25,7 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
     const options = {
       signal
     };
-    this.role = 'listbox';
+    this.setAttribute('role', 'listbox');
     this.tabIndex = 0;
     this.addEventListener('keydown', this.#onListboxKeyDown, options);
     this.addEventListener('blur', this.#onListboxBlur, options);
@@ -151,9 +151,9 @@ defineCustomElement('sinch-color-menu', class extends NectaryElement {
       case 'Space':
       case 'Enter':
         {
-          e.preventDefault();
           const $option = this.#findSelectedOption();
           if ($option !== null) {
+            e.preventDefault();
             this.#dispatchChangeEvent($option);
           }
           break;

package/color-menu-option/index.js

@@ -18,7 +18,7 @@ defineCustomElement('sinch-color-menu-option', class extends NectaryElement {
     this.#$swatch = shadowRoot.querySelector('#swatch');
   }
   connectedCallback() {
-    this.role = 'option';
+    this.setAttribute('role', 'option');
   }
   disconnectedCallback() {}
   static get observedAttributes() {

package/dialog/index.js

@@ -29,7 +29,7 @@ defineCustomElement('sinch-dialog', class extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.role = 'dialog';
+    this.setAttribute('role', 'dialog');
     this.#$closeButton.addEventListener('click', this.#onCloseClick, options);
     this.#$dialog.addEventListener('mousedown', this.#onBackdropMouseDown, options);
     this.#$dialog.addEventListener('cancel', this.#onCancel, options);

package/input/index.js

@@ -42,7 +42,7 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.role = 'textbox';
+    this.setAttribute('role', 'textbox');
     if (this.#controller === null) {
       this.#controller = new AbortController();
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "4.6.1",
+  "version": "4.6.3",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/persistent-overlay/index.js

@@ -52,7 +52,7 @@ defineCustomElement('sinch-persistent-overlay', class extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.role = 'dialog';
+    this.setAttribute('role', 'dialog');
     this.#controller = new AbortController();
     const {
       signal

package/pop/index.js

@@ -45,7 +45,7 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     } = this.#controller;
     this.#keydownContext.listen(signal);
     this.#visibilityContext.listen(signal);
-    this.role = 'dialog';
+    this.setAttribute('role', 'dialog');
     this.#$dialog.addEventListener('cancel', this.#onCancel, {
       signal
     });

package/progress-stepper/index.js

@@ -23,7 +23,7 @@ defineCustomElement('sinch-progress-stepper', class extends NectaryElement {
     const options = {
       signal
     };
-    this.role = 'tablist';
+    this.setAttribute('role', 'tablist');
     this.#$slot.addEventListener('click', this.#onOptionClick, options);
     this.#$slot.addEventListener('keydown', this.#onOptionKeydown, options);
     this.#$slot.addEventListener('focusout', this.#onOptionBlur, options);

package/progress-stepper-item/index.js

@@ -16,7 +16,7 @@ defineCustomElement('sinch-progress-stepper-item', class extends NectaryElement
     this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
-    this.role = 'tab';
+    this.setAttribute('role', 'tab');
   }
   disconnectedCallback() {}
   static get observedAttributes() {

package/radio/index.js

@@ -19,7 +19,7 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
     const options = {
       signal
     };
-    this.role = 'radiogroup';
+    this.setAttribute('role', 'radiogroup');
     this.#$slot.addEventListener('slotchange', this.#onSlotChange, options);
     this.#$slot.addEventListener('keydown', this.#onOptionKeyDown, options);
     this.#$slot.addEventListener('click', this.#onOptionClick, options);

package/radio-option/index.js

@@ -11,7 +11,7 @@ defineCustomElement('sinch-radio-option', class extends NectaryElement {
     this.#$label = shadowRoot.querySelector('#label');
   }
   connectedCallback() {
-    this.role = 'radio';
+    this.setAttribute('role', 'radio');
     this.tabIndex = 0;
   }
   disconnectedCallback() {}

package/rich-text/index.js

@@ -30,7 +30,7 @@ defineCustomElement('sinch-rich-text', class extends NectaryElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.role = 'paragraph';
+    this.setAttribute('role', 'paragraph');
     this.#parseVisitor.updateEmojiBaseUrl(getEmojiBaseUrl(this));
     this.#updateText();
   }

package/rich-textarea/index.js

@@ -58,7 +58,7 @@ defineCustomElement('sinch-rich-textarea', class extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.role = 'textbox';
+    this.setAttribute('role', 'textbox');
     this.ariaMultiLine = 'true';
     this.#$input.addEventListener('beforeinput', this.#onBeforeInput, options);
     this.#$input.addEventListener('keydown', this.#onKeydown, options);

package/segmented-control/index.js

@@ -19,7 +19,7 @@ defineCustomElement('sinch-segmented-control', class extends NectaryElement {
     const options = {
       signal
     };
-    this.role = 'tablist';
+    this.setAttribute('role', 'tablist');
     this.#$slot.addEventListener('slotchange', this.#onSlotChange, options);
     this.#$slot.addEventListener('click', this.#onOptionClick, options);
     this.#$slot.addEventListener('keydown', this.#onOptionKeydown, options);

package/segmented-control-option/index.js

@@ -19,7 +19,7 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
     const options = {
       signal
     };
-    this.role = 'tab';
+    this.setAttribute('role', 'tab');
     this.addEventListener('focus', this.#onButtonFocus, options);
     this.addEventListener('blur', this.#onButtonBlur, options);
     this.addEventListener('-focus', this.#onFocusReactHandler);

package/segmented-icon-control/index.js

@@ -19,7 +19,7 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
     const options = {
       signal
     };
-    this.role = 'tablist';
+    this.setAttribute('role', 'tablist');
     this.#$slot.addEventListener('slotchange', this.#onSlotChange, options);
     this.#$slot.addEventListener('click', this.#onOptionClick, options);
     this.#$slot.addEventListener('keydown', this.#onOptionKeydown, options);

package/segmented-icon-control-option/index.js

@@ -17,7 +17,7 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
     const options = {
       signal
     };
-    this.role = 'tab';
+    this.setAttribute('role', 'tab');
     this.addEventListener('focus', this.#onButtonFocus, options);
     this.addEventListener('blur', this.#onButtonBlur, options);
     this.addEventListener('-focus', this.#onFocusReactHandler, options);

package/select-button/index.js

@@ -30,7 +30,7 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
     const {
       signal
     } = this.#controller;
-    this.role = 'button';
+    this.setAttribute('role', 'button');
     this.tabIndex = 0;
     this.addEventListener('click', this.#onButtonClick, {
       signal

package/select-menu/index.js

@@ -33,7 +33,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.role = 'listbox';
+    this.setAttribute('role', 'listbox');
     this.tabIndex = 0;
     this.addEventListener('keydown', this.#onListboxKeyDown, options);
     this.addEventListener('focus', this.#onFocus, options);
@@ -215,9 +215,9 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
       case 'Space':
       case 'Enter':
         {
-          e.preventDefault();
           const $option = this.#findSelectedOption();
           if ($option !== null) {
+            e.preventDefault();
             this.#dispatchChangeEvent($option);
           }
           break;

package/tabs-icon-option/index.js

@@ -15,7 +15,7 @@ defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
     this.#$tooltip = shadowRoot.querySelector('#tooltip');
   }
   connectedCallback() {
-    this.role = 'tab';
+    this.setAttribute('role', 'tab');
     this.#$button.addEventListener('click', this.#onClick);
   }
   disconnectedCallback() {

package/tabs-option/index.js

@@ -16,7 +16,7 @@ defineCustomElement('sinch-tabs-option', class extends NectaryElement {
     this.#$text = shadowRoot.querySelector('#text');
   }
   connectedCallback() {
-    this.role = 'tab';
+    this.setAttribute('role', 'tab');
     this.#$button.addEventListener('click', this.#onClick);
   }
   disconnectedCallback() {

package/textarea/index.js

@@ -33,7 +33,7 @@ defineCustomElement('sinch-textarea', class extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
-    this.role = 'textbox';
+    this.setAttribute('role', 'textbox');
     this.ariaMultiLine = 'true';
     this.#$input.addEventListener('input', this.#onInput, options);
     this.#$input.addEventListener('compositionstart', this.#onCompositionStart, options);

package/toggle/index.js

@@ -19,7 +19,7 @@ defineCustomElement('sinch-toggle', class extends NectaryElement {
     const options = {
       signal
     };
-    this.role = 'checkbox';
+    this.setAttribute('role', 'checkbox');
     this.addEventListener('click', this.#onClick, options);
     this.addEventListener('keydown', this.#onKeydown, options);
     this.addEventListener('focus', this.#onFocus, options);

package/tooltip/index.js

@@ -50,6 +50,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     const options = {
       signal: this.#controller.signal
     };
+    this.setAttribute('role', 'tooltip');
     this.#$pop.addEventListener('-close', this.#onPopClose, options);
     this.addEventListener('-show', this.#onShowReactHandler, options);
     this.addEventListener('-hide', this.#onHideReactHandler, options);