Skip to content

Commit

Permalink
♿ a11y(bal-checkbox): write test to prove AA-Standard (#1291)
Browse files Browse the repository at this point in the history 
* Create PR for #1185

* chore(): add a11y test

* chore(): refactor

* chore(): skip invalid for now

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Mladen Planinicic <[email protected]>
  • Loading branch information
@github-actions
github-actions[bot] and Mladen Planinicic authored Jan 29, 2024
1 parent ad20c8c commit dd00d94
Show file tree
Hide file tree
Showing 3 changed files with 247 additions and 1 deletion.
1 change: 0 additions & 1 deletion packages/components/src/components/bal-checkbox/bal-checkbox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -439,7 +439,6 @@ export class Checkbox implements ComponentInterface, FormInput<any>, Loggable, B

return (
<Host
role="checkbox"
aria-checked={`${this.checked}`}
aria-disabled={this.disabled ? 'true' : null}
aria-hidden={this.disabled ? 'true' : null}
Expand Down
213 changes: 213 additions & 0 deletions packages/components/src/components/bal-checkbox/test/bal-checkbox.a11y.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,213 @@
<!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="checkbox-basic">
<bal-field>
<bal-field-label>Basic Label</bal-field-label>
<bal-field-control>
<bal-checkbox>Basic Label 1</bal-checkbox>
</bal-field-control>
<bal-field-message>Basic Message</bal-field-message>
</bal-field>
</section>
<section data-testid="group">
<bal-field>
<bal-field-label>Basic Group Label</bal-field-label>
<bal-field-control>
<bal-checkbox-group>
<bal-checkbox>Basic Group 1</bal-checkbox>
<bal-checkbox>Basic Group 2</bal-checkbox>
<bal-checkbox>Basic Group 3</bal-checkbox>
</bal-checkbox-group>
</bal-field-control>
<bal-field-message>Basic Group Message</bal-field-message>
</bal-field>
</section>
<section data-testid="checked">
<bal-field>
<bal-field-label>Checked Label</bal-field-label>
<bal-field-control>
<bal-checkbox-group>
<bal-checkbox value="true">Checked</bal-checkbox>
</bal-checkbox-group>
</bal-field-control>
<bal-field-message>Checked 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-checkbox-group>
<bal-checkbox label-hidden>Label hidden</bal-checkbox>
</bal-checkbox-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-checkbox-group>
<bal-checkbox disabled>Disabled</bal-checkbox>
</bal-checkbox-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-checkbox-group>
<bal-checkbox invalid>Invalid</bal-checkbox>
</bal-checkbox-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-checkbox interface="select-button">Select button basic</bal-checkbox>
</bal-field-control>
<bal-field-message>Select Button Basic Message</bal-field-message>
</bal-field>
</section>

<section data-testid="select-button-group">
<bal-field>
<bal-field-label>Select Button Group Label</bal-field-label>
<bal-field-control>
<bal-checkbox-group>
<bal-checkbox interface="select-button">Select button group 1</bal-checkbox>
<bal-checkbox interface="select-button">Select button group 2</bal-checkbox>
<bal-checkbox interface="select-button">Select button group 3</bal-checkbox>
</bal-checkbox-group>
</bal-field-control>
<bal-field-message>Select Button Group Message</bal-field-message>
</bal-field>
</section>

<section data-testid="select-button-checked">
<bal-field>
<bal-field-label>Select Button Checked Label</bal-field-label>
<bal-field-control>
<bal-checkbox interface="select-button" checked>Select Button Checked</bal-checkbox>
</bal-field-control>
<bal-field-message>Select Button Checked Message</bal-field-message>
</bal-field>
</section>

<section data-testid="select-button-label-hidden">
<bal-field>
<bal-field-label>Select Button Label Hidden</bal-field-label>
<bal-field-control>
<bal-checkbox interface="select-button" label-hidden>Select Button Label Hidden 1</bal-checkbox>
</bal-field-control>
<bal-field-message>Select Button Label Hidden 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-checkbox interface="select-button" invalid>Select Button Invalid</bal-checkbox>
</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-checkbox interface="select-button" disabled>Select Button Disabled</bal-checkbox>
</bal-field-control>
<bal-field-message>Select Button Disabled Message</bal-field-message>
</bal-field>
</section>

<section data-testid="switch-basic">
<bal-field>
<bal-field-label>Switch Basic Label</bal-field-label>
<bal-field-control>
<bal-checkbox interface="switch">Switch</bal-checkbox>
</bal-field-control>
<bal-field-message>Switch Basic Message</bal-field-message>
</bal-field>
</section>

<section data-testid="switch-group">
<bal-field>
<bal-field-label>Switch Group Label</bal-field-label>
<bal-field-control>
<bal-checkbox-group>
<bal-checkbox interface="switch">Switch 1</bal-checkbox>
<bal-checkbox interface="switch">Switch 2</bal-checkbox>
<bal-checkbox interface="switch">Switch 3</bal-checkbox>
</bal-checkbox-group>
</bal-field-control>
<bal-field-message>Switch Group Message</bal-field-message>
</bal-field>
</section>

<section data-testid="switch-checked">
<bal-field>
<bal-field-label>Switch Checked Label</bal-field-label>
<bal-field-control>
<bal-checkbox interface="switch" checked>Switch 4</bal-checkbox>
</bal-field-control>
<bal-field-message>Switch Checked Message</bal-field-message>
</bal-field>
</section>

<section data-testid="switch-label-hidden">
<bal-field>
<bal-field-label>Switch Label Hidden Label</bal-field-label>
<bal-field-control>
<bal-checkbox interface="switch" label-hidden>Switch 5</bal-checkbox>
</bal-field-control>
<bal-field-message>Switch Label Hidden Message</bal-field-message>
</bal-field>
</section>

<!-- <section data-testid="switch-invalid">
<bal-field invalid>
<bal-field-label>Switch Invalid Label</bal-field-label>
<bal-field-control>
<bal-checkbox interface="switch" invalid>Switch 6</bal-checkbox>
</bal-field-control>
<bal-field-message>Switch Invalid Message</bal-field-message>
</bal-field>
</section> -->

<section data-testid="switch-disabled">
<bal-field disabled>
<bal-field-label>Switch Disabled Label</bal-field-label>
<bal-field-control>
<bal-checkbox interface="switch" disabled>Switch 7</bal-checkbox>
</bal-field-control>
<bal-field-message>Switch Disabled</bal-field-message>
</bal-field>
</section>
</main>
</bal-doc-app>
</body>
</html>
34 changes: 34 additions & 0 deletions test/cypress/e2e/a11y/bal-checkbox.a11y.cy.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
describe('bal-checkbox', () => {
context('a11y', () => {
beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-checkbox/test/bal-checkbox.a11y.html'))

describe('have the AA standard', () => {
it('checkbox basic', () => {
cy.getByTestId('checkbox-basic').testA11y()
cy.getByTestId('group').testA11y()
cy.getByTestId('checked').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-group').testA11y()
cy.getByTestId('select-button-checked').testA11y()
cy.getByTestId('select-button-label-hidden').testA11y()
// cy.getByTestId('select-button-invalid').testA11y()
cy.getByTestId('select-button-disabled').testA11y()
})

it('switch basic', () => {
cy.getByTestId('switch-basic').testA11y()
cy.getByTestId('switch-group').testA11y()
cy.getByTestId('switch-checked').testA11y()
cy.getByTestId('switch-label-hidden').testA11y()
// cy.getByTestId('switch-invalid').testA11y()
cy.getByTestId('switch-disabled').testA11y()
})
})
})
})

0 comments on commit dd00d94

Please sign in to comment.