fix(checkbox-group): add role=list and role=listitem to checkbox-inde…

…terminate and its children
ing-bank · Feb 19, 2024 · 9b9e789 · 9b9e789
1 parent 58c3c53
commit 9b9e789
Show file tree

Hide file tree

Showing 4 changed files with 460 additions and 398 deletions.
diff --git a/.changeset/forty-teachers-sleep.md b/.changeset/forty-teachers-sleep.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[checkbox-group] add role="list" and role="listitem" to checkbox-indeterminate and its children
diff --git a/packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js b/packages/ui/components/checkbox-group/src/LionCheckboxIndeterminate.js
@@ -197,19 +197,34 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
   // eslint-disable-next-line class-methods-use-this
   _afterTemplate() {
     return html`
-      <div class="choice-field__nested-checkboxes">
+      <div class="choice-field__nested-checkboxes" role="list">
         <slot></slot>
       </div>
     `;
   }
 
   /**
+   * @param {Event} ev
    * @protected
    */
-  _onRequestToAddFormElement() {
+  _onRequestToAddFormElement(ev) {
+    if (!(/** @type {HTMLElement} */ (ev.target).hasAttribute('role'))) {
+      /** @type {HTMLElement} */ (ev.target)?.setAttribute('role', 'listitem');
+    }
     this._setOwnCheckedState();
   }
 
+  /**
+   * @param {Event} ev
+   * @protected
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _onRequestToRemoveFormElement(ev) {
+    if (/** @type {HTMLElement} */ (ev.target).getAttribute('role') === 'listitem') {
+      /** @type {HTMLElement} */ (ev.target)?.removeAttribute('role');
+    }
+  }
+
   constructor() {
     super();
     this.indeterminate = false;