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.

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

Feat / WCAG validation per page using axe-playwright #192

Draft
wants to merge 15 commits into
base: develop
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,12 @@ exports[`<CardGrid> > renders and matches snapshot 1`] = `
role="grid"
>
<div
aria-rowindex="0"
aria-rowindex="1"
class="_row_19b484"
role="row"
>
<div
aria-colindex="0"
aria-colindex="1"
class="_cell_19b484"
id="layout_grid_0-0"
role="gridcell"
Expand Down Expand Up @@ -56,7 +56,7 @@ exports[`<CardGrid> > renders and matches snapshot 1`] = `
</a>
</div>
<div
aria-colindex="1"
aria-colindex="2"
class="_cell_19b484"
id="layout_grid_0-1"
role="gridcell"
Expand Down Expand Up @@ -98,7 +98,7 @@ exports[`<CardGrid> > renders and matches snapshot 1`] = `
</a>
</div>
<div
aria-colindex="2"
aria-colindex="3"
class="_cell_19b484"
id="layout_grid_0-2"
role="gridcell"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,10 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="co
<div
class="_container_d97916"
>
<label
class="hidden"
for="text-field_1235_name"
/>
<select
aria-describedby="helper_text_1235_name"
aria-invalid="false"
Expand Down Expand Up @@ -172,6 +176,10 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="se
<div
class="_container_d97916"
>
<label
class="hidden"
for="text-field_1235_name"
/>
<select
aria-describedby="helper_text_1235_name"
aria-invalid="false"
Expand Down Expand Up @@ -200,6 +208,10 @@ exports[`<CustomRegisterField> > renders and matches snapshot <Dropdown type="us
<div
class="_container_d97916"
>
<label
class="hidden"
for="text-field_1235_name"
/>
<select
aria-describedby="helper_text_1235_name"
aria-invalid="false"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,12 @@ exports[`<Favorites> > renders and matches snapshot 1`] = `
role="grid"
>
<div
aria-rowindex="0"
aria-rowindex="1"
class="_row_19b484"
role="row"
>
<div
aria-colindex="0"
aria-colindex="1"
class="_cell_19b484"
id="layout_grid_0-0"
role="gridcell"
Expand Down Expand Up @@ -77,7 +77,7 @@ exports[`<Favorites> > renders and matches snapshot 1`] = `
</a>
</div>
<div
aria-colindex="1"
aria-colindex="2"
class="_cell_19b484"
id="layout_grid_0-1"
role="gridcell"
Expand Down Expand Up @@ -124,7 +124,7 @@ exports[`<Favorites> > renders and matches snapshot 1`] = `
</a>
</div>
<div
aria-colindex="2"
aria-colindex="3"
class="_cell_19b484"
id="layout_grid_0-2"
role="gridcell"
Expand Down
4 changes: 2 additions & 2 deletions packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -113,13 +113,13 @@ const LayoutGrid = <Item extends object>({ className, columnCount, data, renderC
return (
<div role="grid" ref={gridRef} aria-rowcount={rowCount} className={className} onKeyDown={handleKeyDown}>
{Array.from({ length: rowCount }).map((_, rowIndex) => (
<div role="row" key={rowIndex} aria-rowindex={rowIndex} className={styles.row}>
<div role="row" key={rowIndex} aria-rowindex={rowIndex + 1} className={styles.row}>
{data.slice(rowIndex * columnCount, rowIndex * columnCount + columnCount).map((item, columnIndex) => (
<div
role="gridcell"
id={`layout_grid_${rowIndex}-${columnIndex}`}
key={columnIndex}
aria-colindex={columnIndex}
aria-colindex={columnIndex + 1}
className={styles.cell}
style={{ width: `${Math.round(100 / columnCount)}%` }}
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -361,6 +361,12 @@ exports[`<PersonalDetailsForm> > Renders with errors 1`] = `
<div
class="_container_d97916 _error_d97916"
>
<label
class="hidden"
for="text-field_1235_key1"
>
personal_details.select_answer
</label>
<select
aria-describedby="helper_text_1235_key1"
aria-invalid="true"
Expand Down Expand Up @@ -876,6 +882,12 @@ exports[`<PersonalDetailsForm> > Renders without crashing 1`] = `
<div
class="_container_d97916"
>
<label
class="hidden"
for="text-field_1235_key1"
>
personal_details.select_answer
</label>
<select
aria-describedby="helper_text_1235_key1"
aria-invalid="false"
Expand Down
5 changes: 4 additions & 1 deletion packages/ui-react/src/components/Select/Select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,10 @@ const Select = ({

return (
<div className={classNames({ [containerClassName]: editing })}>
<select {...inputProps} onChange={handleChange}>
<label htmlFor={id} className="hidden">
{defaultLabel}
</label>
<select id={id} {...inputProps} onChange={handleChange}>
{defaultLabel && (
<option className={classNames(styles.option, optionsStyle)} value="" disabled={required}>
{defaultLabel}
Expand Down
2 changes: 1 addition & 1 deletion packages/ui-react/src/components/Shelf/Shelf.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -146,7 +146,7 @@ const Shelf = ({

return (
<div className={classNames(styles.shelf)}>
{featured ? null : loading ? <div className={styles.loadingTitle} /> : <h2 className={classNames(styles.title)}>{title || playlist.title}</h2>}
{loading ? <div className={styles.loadingTitle} /> : <h2 className={classNames(styles.title, { hidden: featured })}>{title || playlist.title}</h2>}
<TileDock<PlaylistItem>
items={playlist.playlist}
tilesToShow={tilesToShow}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@ exports[`Shelf Component tests > Featured shelf 1`] = `
<div
class="_shelf_81910b"
>
<h2
class="_title_81910b hidden"
>
Featured Shelf
</h2>
<div
class="_tileDock_22abb0"
>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ function VideoListItem({ onHover, progress, activeLabel, item, url, loading = fa
<Image className={posterImageClassNames} image={image} onLoad={() => setImageLoaded(true)} width={320} alt="" />
<div className={styles.tags}>
{isLocked && (
<div className={classNames(styles.tag, styles.lock)} aria-label={t('card_lock')}>
<div className={classNames(styles.tag, styles.lock)} aria-label={t('card_lock')} role="img">
<Icon icon={Lock} />
</div>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import Dropdown from './Dropdown';
const options = ['x', 'y', 'z'];
describe('<Dropdown>', () => {
it('renders dropdown', () => {
const { getByText } = render(
const { getByLabelText } = render(
<Dropdown name="categories" value="aa" defaultLabel="bb" options={options} onChange={(event: React.SyntheticEvent) => event} />,
);
const dropdown = getByText(/bb/i);
expect(document.body.contains(dropdown));
const dropdown = getByLabelText(/bb/i);
expect(document.body.contains(dropdown)).toBe(true);
});
});
2 changes: 1 addition & 1 deletion packages/ui-react/src/pages/Search/Search.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
align-items: center;
margin: 24px 0;

> h2 {
> h1 {
font-family: var(--body-alt-font-family);
font-weight: var(--body-font-weight-bold);
font-size: 24px;
Expand Down
5 changes: 3 additions & 2 deletions packages/ui-react/src/pages/Search/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -109,9 +109,9 @@ const Search = () => {
</title>
</Helmet>
<header className={styles.header}>
<h2 id={headingId} aria-live={isFetching ? undefined : 'polite'}>
<h1 id={headingId} aria-live={isFetching ? undefined : 'polite'}>
{title}
</h2>
</h1>
</header>
<CardGrid
aria-labelledby={headingId}
Expand All @@ -121,6 +121,7 @@ const Search = () => {
accessModel={accessModel}
isLoggedIn={!!user}
hasSubscription={!!subscription}
headingLevel={2}
/>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -416,12 +416,12 @@ exports[`User Component tests > Favorites Page 1`] = `
role="grid"
>
<div
aria-rowindex="0"
aria-rowindex="1"
class="_row_19b484"
role="row"
>
<div
aria-colindex="0"
aria-colindex="1"
class="_cell_19b484"
id="layout_grid_0-0"
role="gridcell"
Expand Down Expand Up @@ -463,7 +463,7 @@ exports[`User Component tests > Favorites Page 1`] = `
</a>
</div>
<div
aria-colindex="1"
aria-colindex="2"
class="_cell_19b484"
id="layout_grid_0-1"
role="gridcell"
Expand Down Expand Up @@ -505,7 +505,7 @@ exports[`User Component tests > Favorites Page 1`] = `
</a>
</div>
<div
aria-colindex="2"
aria-colindex="3"
class="_cell_19b484"
id="layout_grid_0-2"
role="gridcell"
Expand Down
1 change: 1 addition & 0 deletions platforms/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
"@vitejs/plugin-react": "^4.0.4",
"@vitest/coverage-v8": "^0.33.0",
"allure-commandline": "^2.17.2",
"axe-playwright": "^2.0.1",
"babel-plugin-transform-typescript-metadata": "^0.3.2",
"codeceptjs": "3.5.5",
"eslint-plugin-codeceptjs": "^1.3.0",
Expand Down
125 changes: 125 additions & 0 deletions platforms/web/test-e2e/tests/accessibility_test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
import { testConfigs } from '@jwp/ott-testing/constants';

import { LoginContext } from '#utils/password_utils';
import constants from '#utils/constants';

Feature('Accessibility');

let paidLoginContext: LoginContext;

const disableRetryFailedStep = (test: { disableRetryFailedStep: boolean }): void => {
test.disableRetryFailedStep = true;
};

Scenario('WCAG compliant - Home Page', async ({ I }) => {
I.useConfig(testConfigs.basicNoAuth);
I.amOnPage('/');
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Video Detail Page', async ({ I }) => {
I.useConfig(testConfigs.basicNoAuth);
I.amOnPage('/m/awWEFyPu/big-buck-bunny');
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Playlist Page', async ({ I }) => {
I.amOnPage('/p/dGSUzs9o/'); // "Films" page
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Video Detail Inline Page', async ({ I }) => {
I.useConfig(testConfigs.inlinePlayer);
I.amOnPage('/m/awWEFyPu/big-buck-bunny');
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Search Page with results', async ({ I }) => {
I.useConfig(testConfigs.basicNoAuth);
I.amOnPage('/q/Caminandes');
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Search Page containing no results', async ({ I }) => {
I.useConfig(testConfigs.basicNoAuth);
I.amOnPage('/q/querywithoutresults');
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Player Page', async ({ I }) => {
I.useConfig(testConfigs.basicNoAuth);
I.amOnPage('/m/awWEFyPu/big-buck-bunny?r=dGSUzs9o&play=1');
I.checkA11y();
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazingly no failures for the player!? Awesome!

}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Live Page (EPG)', async ({ I }) => {
I.useConfig(testConfigs.basicNoAuth);
I.amOnPage('/p/fWpLtzVh/?channel=Uh7zcqVm/');
I.checkA11y(null, {
ignore: [
// It is a known issue that the EPG is not fully accessible due to the planby EPG package
{ id: 'scrollable-region-focusable', selector: '[class^="css-"]' },
],
});
}).config(disableRetryFailedStep);

// Account Pages

Scenario('WCAG compliant - Account Page', async ({ I }) => {
I.useConfig(testConfigs.jwpAuth);
I.amOnPage('/u/my-account');
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Payments Page', async ({ I }) => {
I.useConfig(testConfigs.jwpAuth);
I.amOnPage('/u/payments');
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Favorites Page', async ({ I }) => {
I.useConfig(testConfigs.jwpAuth);
I.amOnPage('/u/favorites');
I.checkA11y();
}).config(disableRetryFailedStep);

// Modals

Scenario('WCAG compliant - Signup Modal - CLEENG', async ({ I }) => {
I.useConfig(testConfigs.cleengAuthvod);
I.amOnPage('/?u=create-account');
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Sign in Modal - CLEENG', async ({ I }) => {
I.useConfig(testConfigs.cleengAuthvod);
I.amOnPage('/?u=login');
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Signup Modal - JWP', async ({ I }) => {
I.useConfig(testConfigs.jwpAuth);
I.amOnPage('/?u=create-account');
I.checkA11y({
rules: {
// This rule is disabled because this component does have a label prop,
// but is not set in the test configuration
'label-title-only': {
enabled: false,
},
},
});
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Sign in Modal - JWP', async ({ I }) => {
I.useConfig(testConfigs.jwpAuth);
I.amOnPage('/?u=login');
I.checkA11y();
}).config(disableRetryFailedStep);

Scenario('WCAG compliant - Choose Offer Modal', async ({ I }) => {
I.useConfig(testConfigs.svod);
paidLoginContext = await I.registerOrLogin(paidLoginContext);
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This seems like a weird convention. I also see this is not your idea, but it is used like this in other tests. Is this really needed to make it work? I have the assumption it could be left empty and still work.

Also, I would move the let within the scope of this scenario.

I.amOnPage(constants.offersUrl);
I.checkA11y();
}).config(disableRetryFailedStep);
Loading
Loading