fix(checkbox-group): add role=list and role=listitem to checkbox-indeterminate and its children

.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

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;

packages/ui/components/checkbox-group/test-suites/CheckboxIndeterminate.suite.js

@@ -79,7 +79,6 @@ export function runCheckboxIndeterminateSuite(customConfig) {
       // Assert
       expect(elIndeterminate?.hasAttribute('indeterminate')).to.be.false;
     });
-  });
 
     it('should be indeterminate if one child is checked', async () => {
       // Arrange
@@ -719,4 +718,44 @@ export function runCheckboxIndeterminateSuite(customConfig) {
         expect(elIndeterminate.indeterminate).to.be.false;
       });
     });
+
+    describe('accessibility', () => {
+      it('is accessible', async () => {
+        const el = /** @type {LionCheckboxGroup} */ (
+          await fixture(html`
+            <${groupTag} name="scientists[]">
+              <${tag} label="Favorite scientists">
+                <${childTag} label="Archimedes" checked></${childTag}>
+                <${childTag} label="Francis Bacon"></${childTag}>
+                <${childTag} label="Marie Curie"></${childTag}>
+              </${tag}>
+            </${groupTag}>
+          `)
+        );
+        await expect(el).to.be.accessible();
+      });
+
+      it('has role="list" and its children role="listitem"', async () => {
+        const el = await fixture(html`
+          <${groupTag} name="scientists[]">
+            <${tag} label="Favorite scientists">
+              <${childTag} label="Archimedes" checked></${childTag}>
+              <${childTag} label="Francis Bacon"></${childTag}>
+              <${childTag} label="Marie Curie"></${childTag}>
+            </${tag}>
+          </${groupTag}>
+        `);
+        const elIndeterminate = /**  @type {LionCheckboxIndeterminate} */ (
+          el.querySelector(`${cfg.tagString}`)
+        );
+
+        expect(
+          elIndeterminate.shadowRoot
+            ?.querySelector('.choice-field__nested-checkboxes')
+            ?.getAttribute('role'),
+        ).to.equal('list');
+        expect(elIndeterminate.children[0].getAttribute('role')).to.equal('listitem');
+      });
+    });
+  });
 }

packages/ui/components/checkbox-group/test/lion-checkbox-indeterminate-integrations.test.js

@@ -1,4 +1,7 @@
 import '@lion/ui/define/lion-checkbox-indeterminate.js';
+import '@lion/ui/define/lion-checkbox-group.js';
+import '@lion/ui/define/lion-checkbox.js';
+
 import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js';
 import { runCheckboxIndeterminateSuite } from '../test-suites/CheckboxIndeterminate.suite.js';