♿ a11y(bal-button): write test to prove AA-Standard (#1290)

* Create PR for #1182 * chore(): add a11y test * chore(): handle empty array * chore(): refactor * chore(): copy components file to test package * chore(): improve build script * chore(): trigger build * chore(): rename components file * chore(): format * chore(): format * chore(): format * chore(): copy components into test package --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Mladen Planinicic <mladen.planinicic@baloise.ch>
baloise · Jan 24, 2024 · b9eaffc · b9eaffc
1 parent 0bdb9b7
commit b9eaffc
Show file tree

Hide file tree

Showing 7 changed files with 650 additions and 6 deletions.
diff --git a/CHANGELOG_v12.md b/CHANGELOG_v12.md
diff --git a/packages/components/src/components/bal-button/bal-button.tsx b/packages/components/src/components/bal-button/bal-button.tsx
@@ -176,17 +176,19 @@ export class Button implements ComponentInterface {
   }
 
   componentWillLoad() {
-    this.inheritAttributes = inheritAttributes(this.el, ['title', 'aria-label', 'aria-controls'])
+    this.inheritAttributes = inheritAttributes(this.el, [
+      'title',
+      'aria-label',
+      'aria-controls',
+      'aria-hidden',
+      'tabindex',
+    ])
   }
 
   componentDidRender() {
     this.balDidRender.emit()
   }
 
-  componentWillRender() {
-    this.inheritAttributes = inheritAttributes(this.el, ['title', 'aria-label', 'aria-hidden', 'tabindex'])
-  }
-
   private get isIconInverted() {
     return this.inverted
   }

diff --git a/packages/components/src/components/bal-button/test/bal-button.a11y.html b/packages/components/src/components/bal-button/test/bal-button.a11y.html
@@ -0,0 +1,23 @@
+<!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" />
+    <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 py-medium">
+        <bal-button color="primary" data-testid="basic">Primary</bal-button>
+        <bal-button icon="plus" data-testid="icon" title="myLabel"></bal-button>
+        <bal-button disabled data-testid="disabled">Disabled</bal-button>
+        <bal-button is-active data-testid="active">Active</bal-button>
+        <section class="has-background-primary">
+          <bal-button inverted data-testid="inverted">Inverted</bal-button>
+        </section>
+      </main>
+    </bal-doc-app>
+  </body>
+</html>
diff --git a/test/cypress/e2e/a11y/bal-button.a11y.cy.ts b/test/cypress/e2e/a11y/bal-button.a11y.cy.ts
@@ -0,0 +1,47 @@
+import { findPropertyValuesByTag } from '../../support/a11y.utils'
+
+describe('bal-button', () => {
+  context('a11y', () => {
+    beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-button/test/bal-button.a11y.html'))
+
+    describe('have the AA standard', () => {
+      it('basic', () => {
+        cy.getByTestId('basic').testA11y()
+      })
+
+      it('with icon', () => {
+        cy.getByTestId('icon').testA11y()
+      })
+
+      it('states', () => {
+        cy.getByTestId('disabled').testA11y()
+        cy.getByTestId('active').testA11y()
+        cy.getByTestId('inverted').testA11y()
+      })
+
+      testColorA11y()
+
+      testSizeA11y()
+    })
+  })
+})
+
+function testColorA11y() {
+  const colors = findPropertyValuesByTag('bal-button', 'color')
+  for (let index = 0; index < colors.length; index++) {
+    const color = colors[index]
+    it(`color ${color}`, () => {
+      cy.getByTestId('basic').setProperty('color', color).testA11y()
+    })
+  }
+}
+
+function testSizeA11y() {
+  const sizes = findPropertyValuesByTag('bal-button', 'size')
+  for (let index = 0; index < sizes.length; index++) {
+    const size = sizes[index]
+    it(`size ${size}`, () => {
+      cy.getByTestId('basic').setProperty('size', size).testA11y()
+    })
+  }
+}
diff --git a/test/cypress/support/a11y.utils.ts b/test/cypress/support/a11y.utils.ts
@@ -0,0 +1,17 @@
+import * as data from '../../generated/components-data.json'
+
+export function findPropertyValuesByTag(tag: string, propName: string) {
+  const component = data.components.find(comp => comp.tag === tag)
+
+  if (component) {
+    const propFound = component.props.find(prop => prop.name == propName)
+
+    if (propFound) {
+      return propFound.values.filter(a => a.value !== undefined).map(a => a.value)
+    } else {
+      return []
+    }
+  } else {
+    return []
+  }
+}
diff --git a/test/cypress/tsconfig.json b/test/cypress/tsconfig.json
@@ -4,7 +4,8 @@
     "lib": ["es5", "dom"],
     "types": ["cypress", "node", "cypress-file-upload", "cypress-visual-regression", "cypress-axe"],
     "typeRoots": ["node_modules/@types"],
-    "baseUrl": "."
+    "baseUrl": ".",
+    "resolveJsonModule": true,
   },
   "exclude": ["node_modules"],
   "include": ["**/*.ts"]

diff --git a/test/scripts/build.mjs b/test/scripts/build.mjs
@@ -17,9 +17,14 @@ const run = async () => {
     shell.rm('-rf', 'generated/www')
     shell.rm('-rf', 'generated/dist')
     shell.rm('-rf', 'generated/components')
+    shell.rm('-f', 'generated/components-data.json')
     await copy(path.join(__root, 'packages/components/www'), path.join(__generated, 'www'))
     await copy(path.join(__root, 'packages/components/dist'), path.join(__generated, 'dist'))
     await copy(path.join(__root, 'packages/components/components'), path.join(__generated, 'components'))
+    await copy(
+      path.join(__root, 'packages/components/.tmp/components.json'),
+      path.join(__generated, 'components-data.json'),
+    )
     await writeFile(path.join(__generated, 'index.d.ts'), `export * from './dist/types';`)
     log.succeed()
   } catch (error) {