♿ a11y(bal-radio): write test to prove AA-Standard (#1314)

* Create PR for #1210 * chore(): add a11y test * chore(): format * chore(): remove radio buttons * chore(): refactor * chore(): add changeset * chore(): trigger build * chore(): trigger build * chore(): improve changeset --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Mladen Planinicic <[email protected]>
baloise · Feb 13, 2024 · 61d83e4 · 61d83e4
1 parent b363ad9
commit 61d83e4
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 1 deletion.
diff --git a/.changeset/olive-cougars-work.md b/.changeset/olive-cougars-work.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+**radio**: Removed `role="radio"` to improve semantic HTML and accessibility, ensuring ARIA roles are used correctly and only where they provide clear benefits.
diff --git a/packages/components/src/components/bal-radio/bal-radio.tsx b/packages/components/src/components/bal-radio/bal-radio.tsx
@@ -416,7 +416,6 @@ export class Radio implements ComponentInterface, BalElementStateInfo, Loggable,
 
     return (
       <Host
-        role="radio"
         aria-checked={`${this.checked}`}
         aria-disabled={this.disabled ? 'true' : null}
         aria-hidden={this.disabled ? 'true' : null}

diff --git a/packages/components/src/components/bal-radio/test/bal-radio.a11y.html b/packages/components/src/components/bal-radio/test/bal-radio.a11y.html
@@ -0,0 +1,110 @@
+<!doctype html>
+<html dir="ltr" lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <title>a11y</title>
+    <script type="module" src="/build/design-system-components.esm.js"></script>
+    <script nomodule src="/build/design-system-components.js"></script>
+  </head>
+
+  <body>
+    <bal-doc-app>
+      <main class="container">
+        <h1>a11y</h1>
+        <section data-testid="radio-basic">
+          <bal-field>
+            <bal-field-label>Basic Label</bal-field-label>
+            <bal-field-control>
+              <bal-radio-group value="1">
+                <bal-radio name="radio-example" value="1">Label 1</bal-radio>
+                <bal-radio name="radio-example" value="2">Label 2</bal-radio>
+                <bal-radio name="radio-example" value="3">Label 2</bal-radio>
+              </bal-radio-group>
+            </bal-field-control>
+            <bal-field-message>Basic Message</bal-field-message>
+          </bal-field>
+        </section>
+        <section data-testid="basic-label-hidden">
+          <bal-field invalid>
+            <bal-field-label>Label Hidden</bal-field-label>
+            <bal-field-control>
+              <bal-radio-group value="1">
+                <bal-radio name="radio-example" value="1" label-hidden>Label 1</bal-radio>
+                <bal-radio name="radio-example" value="2" label-hidden>Label 2</bal-radio>
+                <bal-radio name="radio-example" value="3" label-hidden>Label 2</bal-radio>
+              </bal-radio-group>
+            </bal-field-control>
+            <bal-field-message>Label Hidden Message</bal-field-message>
+          </bal-field>
+        </section>
+        <section data-testid="disabled">
+          <bal-field disabled>
+            <bal-field-label>Disabled Label</bal-field-label>
+            <bal-field-control>
+              <bal-radio-group value="1">
+                <bal-radio name="radio-example" value="1" disabled>Label 1</bal-radio>
+                <bal-radio name="radio-example" value="2" disabled>Label 2</bal-radio>
+                <bal-radio name="radio-example" value="3" disabled>Label 2</bal-radio>
+              </bal-radio-group>
+            </bal-field-control>
+            <bal-field-message>Disabled Message</bal-field-message>
+          </bal-field>
+        </section>
+        <section data-testid="invalid">
+          <bal-field invalid>
+            <bal-field-label>Invalid Label</bal-field-label>
+            <bal-field-control>
+              <bal-radio-group value="1">
+                <bal-radio name="radio-example" value="1" invalid>Label 1</bal-radio>
+                <bal-radio name="radio-example" value="2" invalid>Label 2</bal-radio>
+                <bal-radio name="radio-example" value="3" invalid>Label 2</bal-radio>
+              </bal-radio-group>
+            </bal-field-control>
+            <bal-field-message>Invalid Message</bal-field-message>
+          </bal-field>
+        </section>
+
+        <section data-testid="select-button-basic">
+          <bal-field>
+            <bal-field-label>Select Button Basic Label</bal-field-label>
+            <bal-field-control>
+              <bal-radio-group interface="select-button" value="yes">
+                <bal-radio name="select-button-example" value="yes">Yes</bal-radio>
+                <bal-radio name="select-button-example" value="no">No</bal-radio>
+              </bal-radio-group>
+            </bal-field-control>
+            <bal-field-message>Select Button Basic Message</bal-field-message>
+          </bal-field>
+        </section>
+
+        <section data-testid="select-button-invalid">
+          <bal-field invalid>
+            <bal-field-label>Select Button Invalid Label</bal-field-label>
+            <bal-field-control>
+              <bal-radio-group interface="select-button" value="yes" invalid>
+                <bal-radio name="select-button-example" value="yes">Yes</bal-radio>
+                <bal-radio name="select-button-example" value="no">No</bal-radio>
+              </bal-radio-group>
+            </bal-field-control>
+            <bal-field-message>Select Button Invalid Message</bal-field-message>
+          </bal-field>
+        </section>
+
+        <section data-testid="select-button-disabled">
+          <bal-field disabled>
+            <bal-field-label>Select Button Disabled Label</bal-field-label>
+            <bal-field-control>
+              <bal-radio-group interface="select-button" value="yes" disabled>
+                <bal-radio name="select-button-example" value="yes">Yes</bal-radio>
+                <bal-radio name="select-button-example" value="no">No</bal-radio>
+              </bal-radio-group>
+            </bal-field-control>
+            <bal-field-message>Select Button Disabled Message</bal-field-message>
+          </bal-field>
+        </section>
+      </main>
+    </bal-doc-app>
+  </body>
+</html>
diff --git a/test/cypress/e2e/a11y/bal-radio.a11y.cy.ts b/test/cypress/e2e/a11y/bal-radio.a11y.cy.ts
@@ -0,0 +1,20 @@
+describe('bal-radio', () => {
+  context('a11y', () => {
+    beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-radio/test/bal-radio.a11y.html'))
+
+    describe('have the AA standard', () => {
+      it('radio basic', () => {
+        cy.getByTestId('radio-basic').testA11y()
+        cy.getByTestId('basic-label-hidden').testA11y()
+        cy.getByTestId('disabled').testA11y()
+        cy.getByTestId('invalid').testA11y()
+      })
+
+      it('select button', () => {
+        cy.getByTestId('select-button-basic').testA11y()
+        cy.getByTestId('select-button-invalid').testA11y()
+        cy.getByTestId('select-button-disabled').testA11y()
+      })
+    })
+  })
+})