Ng a11y (#1023)

* chore: add number input

* chore: add datepicker

* chore: add time input

* chore: add input stepper

* chore: add input slider

* chore: add select as dropdown

* chore: add select tests

* chore: add checkboxes

* chore: add radios

* chore: fix tests

* chore: adjust commands

* chore: update nightly

.github/workflows/actions/setup-release/action.yml

@@ -24,9 +24,11 @@ runs:
 
     - name: Install dependencies
       run: npm ci
+      shell: bash
 
     - name: Build
       run: npm run build:force
+      shell: bash
       env:
         BAL_DS_RELEASE: true
 
@@ -35,5 +37,6 @@ runs:
         cat << EOF > "$HOME/.npmrc"
           //registry.npmjs.org/:_authToken=$NPM_TOKEN
         EOF
+      shell: bash
       env:
         NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/nightly.yml

@@ -1,6 +1,7 @@
 name: Nightly Release
 
 on:
+  workflow_dispatch:
   schedule:
     # Run every Monday-Friday
     # at 6:00 UTC (6:00 am UTC)
@@ -27,6 +28,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        shell: bash
 
       - name: Git Reset
         run: git reset --hard
+        shell: bash

.github/workflows/release.yml

@@ -32,6 +32,7 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
 
       - name: Echo Changeset output
+        shell: bash
         run: |
           echo "Changeset published - ${{ steps.changesets.outputs.published }}"
           echo "Changeset publishedPackages - ${{ steps.changesets.outputs.publishedPackages }}"
@@ -41,6 +42,7 @@ jobs:
       - name: Update lock file
         if: steps.changesets.outputs.published == 'true'
         run: npm install
+        shell: bash
 
       - name: Commit lock file
         if: steps.changesets.outputs.published == 'true'

.github/workflows/snapshot-release.yml

@@ -24,6 +24,8 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        shell: bash
 
       - name: Git Reset
         run: git reset --hard
+        shell: bash

apps/angular/cypress/e2e/bal-checkbox-buttons.spec.cy.ts

@@ -0,0 +1,33 @@
+describe('bal-checkbox-buttons', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByLabelText('Checkbox Buttons Label')
+
+    cy.getByTestId('checkboxButtons').getByRole('label', { name: 'Kiwi' }).click()
+    cy.get('body').click(0, 0)
+
+    cy.getByLabelText('Checkbox Buttons Label')
+      .shouldBeInvalid()
+      .getDescribingElement()
+      .contains('This field is required')
+
+    cy.getByTestId('checkboxButtons').getByRole('label', { name: 'Kiwi' }).click()
+
+    cy.getByLabelText('Checkbox Buttons Label')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.getByRole('button', { name: 'Update Checkbox Buttons' }).click()
+
+    cy.getByRole('button', { name: 'Disable Checkbox Buttons' }).click()
+    cy.getByLabelText('Checkbox Buttons Label').should('be.disabled')
+
+    cy.getByRole('button', { name: 'Enable Checkbox Buttons' }).click()
+    cy.getByLabelText('Checkbox Buttons Label').should('not.be.disabled')
+
+    cy.getByTestId('result').contains('"Apple"')
+  })
+})

apps/angular/cypress/e2e/bal-checkbox-group.spec.cy.ts

@@ -0,0 +1,33 @@
+describe('bal-checkbox-group', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByLabelText('Checkbox Group Label')
+
+    cy.getByTestId('checkboxGroup').getByRole('label', { name: 'Kiwi' }).click()
+    cy.get('body').click(0, 0)
+
+    cy.getByLabelText('Checkbox Group Label')
+      .shouldBeInvalid()
+      .getDescribingElement()
+      .contains('This field is required')
+
+    cy.getByTestId('checkboxGroup').getByRole('label', { name: 'Kiwi' }).click()
+
+    cy.getByLabelText('Checkbox Group Label')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.getByRole('button', { name: 'Update Checkbox Group' }).click()
+
+    cy.getByRole('button', { name: 'Disable Checkbox Group' }).click()
+    cy.getByLabelText('Checkbox Group Label').should('be.disabled')
+
+    cy.getByRole('button', { name: 'Enable Checkbox Group' }).click()
+    cy.getByLabelText('Checkbox Group Label').should('not.be.disabled')
+
+    cy.getByTestId('result').contains('"Apple"')
+  })
+})

apps/angular/cypress/e2e/bal-checkbox.spec.cy.ts

@@ -0,0 +1,28 @@
+describe('bal-checkbox', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByLabelText('Checkbox Label').should('not.be.checked').closest('bal-checkbox').find('label').click().click()
+
+    cy.getByLabelText('Checkbox Label').shouldBeInvalid().getDescribingElement().contains('This field is required')
+
+    cy.getByLabelText('Checkbox Label').closest('bal-checkbox').find('label').click()
+    cy.getByLabelText('Checkbox Label')
+      .should('be.checked')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.getByRole('button', { name: 'Update Checkbox' }).click()
+    cy.getByLabelText('Checkbox Label').should('not.be.checked')
+
+    cy.getByRole('button', { name: 'Disable Checkbox' }).click()
+    cy.getByLabelText('Checkbox Label').should('be.disabled')
+
+    cy.getByRole('button', { name: 'Enable Checkbox' }).click()
+    cy.getByLabelText('Checkbox Label').should('not.be.disabled')
+
+    cy.getByTestId('result').contains('"checkbox": false')
+  })
+})

apps/angular/cypress/e2e/bal-date.spec.cy.ts

@@ -0,0 +1,40 @@
+describe('bal-date', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByLabelText('Date Label')
+      .should('have.value', '09.09.2023')
+      .clear()
+      .click()
+      .blur()
+      .shouldBeInvalid()
+      .getDescribingElement()
+      .contains('This field is required')
+
+    cy.getByPlaceholder('Enter a date')
+      .type('20.02.2024')
+      .blur()
+      .should('have.value', '20.02.2024')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.get('body').type('{esc}')
+
+    cy.getByRole('button', { name: 'Update Date' }).click()
+    cy.getByPlaceholder('Enter a date')
+      .should('have.value', '21.10.2023')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.getByRole('button', { name: 'Disable Date' }).click()
+    cy.getByPlaceholder('Enter a date').should('be.disabled')
+
+    cy.getByRole('button', { name: 'Enable Date' }).click()
+    cy.getByPlaceholder('Enter a date').should('not.be.disabled')
+
+    cy.getByTestId('result').contains('"date": "2023-10-21"')
+  })
+})

apps/angular/cypress/e2e/bal-dropdown-multiple.spec.cy.ts

@@ -0,0 +1,35 @@
+describe('bal-dropdown-multiple', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByLabelText('Dropdown Multiple Label').click()
+    cy.getByTestId('dropdownMultiple').getByRole('button', { name: 'Kiwi' }).click()
+
+    cy.get('body').type('{esc}')
+
+    cy.getByLabelText('Dropdown Multiple Label')
+      .shouldBeInvalid()
+      .getDescribingElement()
+      .contains('This field is required')
+
+    cy.getByLabelText('Dropdown Multiple Label').click()
+    cy.getByTestId('dropdownMultiple').getByRole('button', { name: 'Kiwi' }).click()
+    cy.getByTestId('dropdownMultiple').getByRole('button', { name: 'Mango' }).click()
+    cy.get('body').type('{esc}')
+    // cy.getByTestId('dropdownMultiple').should('have.value', ['Kiwi', 'Mango'])
+    cy.getByLabelText('Dropdown Multiple Label')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.getByRole('button', { name: 'Disable Dropdown Multiple' }).click()
+    cy.getByLabelText('Dropdown Multiple Label').should('be.disabled')
+
+    cy.getByRole('button', { name: 'Enable Dropdown Multiple' }).click()
+    cy.getByLabelText('Dropdown Multiple Label').should('not.be.disabled')
+
+    cy.getByTestId('result').contains(`"Kiwi"`)
+    cy.getByTestId('result').contains(`"Mango"`)
+  })
+})

apps/angular/cypress/e2e/bal-dropdown-typeahead.spec.cy.ts

@@ -0,0 +1,40 @@
+describe('bal-dropdown-typeahead', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByLabelText('Typeahead Label').should('have.value', 'Kiwi').clear().blur()
+
+    cy.get('body').type('{esc}')
+
+    cy.getByLabelText('Typeahead Label')
+      .should('have.value', '')
+      .shouldBeInvalid()
+      .getDescribingElement()
+      .contains('This field is required')
+
+    cy.getByLabelText('Typeahead Label').click().type('Kiwi').type('{enter}').blur()
+    cy.get('body').type('{esc}')
+
+    cy.getByLabelText('Typeahead Label')
+      .should('have.value', 'Kiwi')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.getByRole('button', { name: 'Update Typeahead' }).click()
+    cy.getByLabelText('Typeahead Label')
+      .should('have.value', 'Apple')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.getByRole('button', { name: 'Disable Typeahead' }).click()
+    cy.getByLabelText('Typeahead Label').should('be.disabled')
+
+    cy.getByRole('button', { name: 'Enable Typeahead' }).click()
+    cy.getByLabelText('Typeahead Label').should('not.be.disabled')
+
+    cy.getByTestId('result').contains('"typeahead": "Apple"')
+  })
+})

apps/angular/cypress/e2e/bal-dropdown.spec.cy.ts

@@ -0,0 +1,34 @@
+describe('bal-dropdown', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByLabelText('Dropdown Label').should('have.value', 'Kiwi')
+    // .shouldBeInvalid()
+    // .getDescribingElement()
+    // .contains('This field is required')
+
+    cy.getByLabelText('Dropdown Label').click().waitForComponents()
+    cy.get('bal-select').getByRole('button', { name: 'Kiwi' }).click().waitForComponents()
+    cy.getByLabelText('Dropdown Label')
+      .should('have.value', 'Kiwi')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.getByRole('button', { name: 'Update Dropdown' }).click()
+    cy.getByLabelText('Dropdown Label')
+      .should('have.value', 'Apple')
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'This field is required')
+
+    cy.getByRole('button', { name: 'Disable Dropdown' }).click()
+    cy.getByLabelText('Dropdown Label').should('be.disabled')
+
+    cy.getByRole('button', { name: 'Enable Dropdown' }).click()
+    cy.getByLabelText('Dropdown Label').should('not.be.disabled')
+
+    cy.getByTestId('result').contains('"dropdown": "Apple"')
+  })
+})

apps/angular/cypress/e2e/bal-input-slider.spec.cy.ts

@@ -0,0 +1,32 @@
+describe('bal-input-slider', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByLabelText('Slider Label')
+      .should('have.value', 30)
+      .invoke('val', 0)
+      .trigger('input')
+      .click()
+      .blur()
+      .shouldBeInvalid()
+      .getDescribingElement()
+      .contains('Min is 10')
+
+    cy.getByLabelText('Slider Label')
+      .invoke('val', 20)
+      .trigger('input')
+      .click()
+      .blur()
+      .should('have.value', 20)
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'Min is 10')
+
+    cy.getByRole('button', { name: 'Disable Slider' }).click()
+    cy.getByLabelText('Slider Label').should('be.disabled')
+    cy.getByRole('button', { name: 'Enable Slider' }).click()
+    cy.getByLabelText('Slider Label').should('not.be.disabled')
+    cy.getByTestId('result').contains('"slider": "20"')
+  })
+})

apps/angular/cypress/e2e/bal-input-stepper.spec.cy.ts

@@ -0,0 +1,29 @@
+describe('bal-input-stepper', () => {
+  beforeEach(() => {
+    cy.visit('/').platform('desktop').waitForDesignSystem()
+  })
+  it('should change value', () => {
+    cy.getByLabelText('Input Stepper Label').should('have.value', 0)
+
+    cy.getByLabelText('Input Stepper Label').getControl('erhöhen').click().blur()
+    cy.getByLabelText('Input Stepper Label')
+      .should('have.value', 1)
+      .shouldBeInvalid()
+      .getDescribingElement()
+      .contains('Min is 2')
+
+    cy.getByLabelText('Input Stepper Label').getControl('erhöhen').click().blur()
+
+    cy.getByLabelText('Input Stepper Label')
+      .should('have.value', 2)
+      .shouldBeValid()
+      .getDescribingElement()
+      .should('not.contain', 'Min is 2')
+
+    cy.getByRole('button', { name: 'Disable Input Stepper' }).click()
+    cy.getByLabelText('Input Stepper Label').should('be.disabled')
+    cy.getByRole('button', { name: 'Enable Input Stepper' }).click()
+    cy.getByLabelText('Input Stepper Label').should('not.be.disabled')
+    cy.getByTestId('result').contains('"inputStepper": 2')
+  })
+})