@nectary/components 5.20.8 → 5.20.10

package/bundle.js

@@ -8563,14 +8563,25 @@ const template$p = document.createElement("template");
 template$p.innerHTML = templateHTML$p;
 class RadioOption extends NectaryElement {
   #$label;
+  #$input;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template$p.content.cloneNode(true));
     this.#$label = shadowRoot.querySelector("#label");
+    this.#$input = shadowRoot.querySelector("#input");
   }
   connectedCallback() {
     this.setAttribute("role", "radio");
+    this.#$input.setAttribute("role", "radio");
+    this.#$input.setAttribute("aria-labelledby", "label");
+    const isChecked = getBooleanAttribute(this, "checked");
+    const isDisabled = getBooleanAttribute(this, "disabled");
+    this.#$input.setAttribute("aria-checked", isChecked ? "true" : "false");
+    this.setAttribute("aria-checked", isChecked ? "true" : "false");
+    this.#$input.setAttribute("aria-disabled", isDisabled ? "true" : "false");
+    this.setAttribute("aria-disabled", isDisabled ? "true" : "false");
+    this.#$label.setAttribute("aria-label", this.getAttribute("aria-label") ?? "radio-option");
     this.tabIndex = 0;
   }
   disconnectedCallback() {
@@ -8580,7 +8591,8 @@ class RadioOption extends NectaryElement {
       "checked",
       "disabled",
       "text",
-      "data-invalid"
+      "data-invalid",
+      "aria-label"
     ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -8588,6 +8600,10 @@ class RadioOption extends NectaryElement {
       return;
     }
     switch (name) {
+      case "aria-label": {
+        this.#$label.setAttribute("aria-label", newVal ?? "");
+        break;
+      }
       case "text": {
         this.#$label.textContent = newVal;
         break;
@@ -8595,12 +8611,14 @@ class RadioOption extends NectaryElement {
       case "checked": {
         const isChecked = isAttrTrue(newVal);
         updateExplicitBooleanAttribute(this, "aria-checked", isChecked);
+        updateExplicitBooleanAttribute(this.#$input, "aria-checked", isChecked);
         updateBooleanAttribute(this, "checked", isChecked);
         break;
       }
       case "disabled": {
         const isDisabled = isAttrTrue(newVal);
         updateExplicitBooleanAttribute(this, "aria-disabled", isDisabled);
+        updateExplicitBooleanAttribute(this.#$input, "aria-disabled", isDisabled);
         updateBooleanAttribute(this, "disabled", isDisabled);
         break;
       }

package/package.json

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

package/radio-option/index.js

@@ -1,18 +1,29 @@
-import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, getBooleanAttribute, updateAttribute, getAttribute } from "../utils/dom.js";
+import { getBooleanAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-radio-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-radio-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-radio-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-radio-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-default-border-active);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-knob-initial);--sinch-local-color-knob-hover:var(--sinch-comp-radio-color-checked-knob-hover);--sinch-local-color-knob-active:var(--sinch-comp-radio-color-checked-knob-active);--sinch-local-color-text:var(--sinch-comp-radio-color-default-label-initial)}:host([data-invalid])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-radio-color-invalid-label-initial)}:host([checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-radio-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-radio-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-disabled-label-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-disabled-border-initial);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-disabled-knob-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-checked-disabled-label-initial)}#input{all:initial;display:block;width:18px;height:18px;cursor:pointer}:host([disabled]) #input{cursor:initial}#input-wrapper{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#input::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-radio-color-default-outline-focus);border-radius:50%;transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #input::before{opacity:1}#input::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #input::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #input::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#knob{position:absolute;width:10px;height:10px;inset:0;margin:auto;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-local-color-knob);pointer-events:none}:host([checked]) #knob{opacity:1}:host(:hover:not([disabled])) #knob{background-color:var(--sinch-local-color-knob-hover)}:host(:active:not([disabled])) #knob{background-color:var(--sinch-local-color-knob-active)}@media (prefers-reduced-motion){#input::after,#input::before,#knob{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-radio-font-label);color:var(--sinch-local-color-text);cursor:pointer}#label:empty{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="input-wrapper"><div id="input"></div><div id="knob"></div></div><span id="label"></span></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class RadioOption extends NectaryElement {
   #$label;
+  #$input;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$label = shadowRoot.querySelector("#label");
+    this.#$input = shadowRoot.querySelector("#input");
   }
   connectedCallback() {
     this.setAttribute("role", "radio");
+    this.#$input.setAttribute("role", "radio");
+    this.#$input.setAttribute("aria-labelledby", "label");
+    const isChecked = getBooleanAttribute(this, "checked");
+    const isDisabled = getBooleanAttribute(this, "disabled");
+    this.#$input.setAttribute("aria-checked", isChecked ? "true" : "false");
+    this.setAttribute("aria-checked", isChecked ? "true" : "false");
+    this.#$input.setAttribute("aria-disabled", isDisabled ? "true" : "false");
+    this.setAttribute("aria-disabled", isDisabled ? "true" : "false");
+    this.#$label.setAttribute("aria-label", this.getAttribute("aria-label") ?? "radio-option");
     this.tabIndex = 0;
   }
   disconnectedCallback() {
@@ -22,7 +33,8 @@ class RadioOption extends NectaryElement {
       "checked",
       "disabled",
       "text",
-      "data-invalid"
+      "data-invalid",
+      "aria-label"
     ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
@@ -30,6 +42,10 @@ class RadioOption extends NectaryElement {
       return;
     }
     switch (name) {
+      case "aria-label": {
+        this.#$label.setAttribute("aria-label", newVal ?? "");
+        break;
+      }
       case "text": {
         this.#$label.textContent = newVal;
         break;
@@ -37,12 +53,14 @@ class RadioOption extends NectaryElement {
       case "checked": {
         const isChecked = isAttrTrue(newVal);
         updateExplicitBooleanAttribute(this, "aria-checked", isChecked);
+        updateExplicitBooleanAttribute(this.#$input, "aria-checked", isChecked);
         updateBooleanAttribute(this, "checked", isChecked);
         break;
       }
       case "disabled": {
         const isDisabled = isAttrTrue(newVal);
         updateExplicitBooleanAttribute(this, "aria-disabled", isDisabled);
+        updateExplicitBooleanAttribute(this.#$input, "aria-disabled", isDisabled);
         updateBooleanAttribute(this, "disabled", isDisabled);
         break;
       }