diff --git a/.changeset/olive-cougars-work.md b/.changeset/olive-cougars-work.md new file mode 100644 index 0000000000..12393335a9 --- /dev/null +++ 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 index e62fd2b00b..087f083bf4 100644 --- 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 ( + + + + + + a11y + + + + + + +
+

a11y

+
+ + Basic Label + + + Label 1 + Label 2 + Label 2 + + + Basic Message + +
+
+ + Label Hidden + + + Label 1 + Label 2 + Label 2 + + + Label Hidden Message + +
+
+ + Disabled Label + + + Label 1 + Label 2 + Label 2 + + + Disabled Message + +
+
+ + Invalid Label + + + Label 1 + Label 2 + Label 2 + + + Invalid Message + +
+ +
+ + Select Button Basic Label + + + Yes + No + + + Select Button Basic Message + +
+ +
+ + Select Button Invalid Label + + + Yes + No + + + Select Button Invalid Message + +
+ +
+ + Select Button Disabled Label + + + Yes + No + + + Select Button Disabled Message + +
+
+ + + diff --git a/test/cypress/e2e/a11y/bal-radio.a11y.cy.ts b/test/cypress/e2e/a11y/bal-radio.a11y.cy.ts new file mode 100644 index 0000000000..773df06c29 --- /dev/null +++ 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() + }) + }) + }) +})