Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

♿ a11y(bal-text): write test to prove AA-Standard #1232

Closed
wants to merge 4 commits into from
Closed

♿ a11y(bal-text): write test to prove AA-Standard #1232

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e549d8d
chore(): add text accessibility test
Dec 27, 2023
d605557
Merge branch 'main' into feat/issue-1223
Jan 16, 2024
cc2f7eb
chore(): refactor
Jan 16, 2024
f562ead
feat(): change warning text color to danger
Jan 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions packages/components/src/components/bal-text/test/bal-text.a11y.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
<!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" />
<link rel="stylesheet" href="/assets/baloise-design-system.css" />
<script type="module" src="/build/design-system-components.esm.js"></script>
<script nomodule src="/build/design-system-components.js"></script>
</head>
<body>
<bal-app>
<div class="container">
<h2 class="title is-size-xx-large">Basic</h2>
<section>
<bal-text data-testid="basic">Lorem ipsum dolor sit amet consectetur adipisicing elit.</bal-text>
</section>
</div>
</bal-app>
</body>
</html>
2 changes: 1 addition & 1 deletion packages/tokens/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -467,7 +467,7 @@ const tokens = {
'primary-light': 'primary-3', // inverted disabled
'success': 'success-4',
'info': 'info-4',
'warning': 'warning-5',
'warning': 'danger-4',
'danger': 'danger-4',
'danger-dark': 'danger-5', // hover color
'danger-darker': 'danger-6', // active color
Expand Down
47 changes: 47 additions & 0 deletions test/cypress/e2e/a11y/bal-text.a11y.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
describe('bal-text', () => {
context('a11y', () => {
beforeEach(() => cy.platform('desktop').pageA11y('/components/bal-text/test/bal-text.a11y.html'))

describe('have the AA standard', () => {
it('basic', () => {
cy.getByTestId('basic').testA11y()
})

testColorA11y([
'light-blue',
'blue-dark',
'blue-light',
'primary-light',
'white',
'black',
'grey',
'primary',
'blue',
'info',
'success',
'danger',
'warning',
])

testSizeA11y(['block', 'lead', 'small'])
})
})
})

function testColorA11y(colors: BalProps.BalTextColor[]) {
for (let index = 0; index < colors.length; index++) {
const color = colors[index]
it(`color ${color}`, () => {
cy.getByTestId('basic').setProperty('color', color).testA11y()
})
}
}

function testSizeA11y(sizes: BalProps.BalTextSize[]) {
for (let index = 0; index < sizes.length; index++) {
const size = sizes[index]
it(`sizes ${size}`, () => {
cy.getByTestId('basic').setProperty('sizes', size).testA11y()
})
}
}