Feat / WCAG validation per page using axe-playwright

packages/ui-react/src/components/LayoutGrid/LayoutGrid.tsx

@@ -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)}%` }}
             >

packages/ui-react/src/components/Shelf/Shelf.tsx

@@ -146,7 +146,7 @@ const Shelf = ({
 
   return (
     <div className={classNames(styles.shelf)}>
-      {!featured ? <h2 className={classNames(styles.title)}>{title || playlist.title}</h2> : null}
+      <h2 className={classNames(styles.title, { hidden: featured })}>{title || playlist.title}</h2>
       <TileDock<PlaylistItem>
         items={playlist.playlist}
         tilesToShow={tilesToShow}

packages/ui-react/src/components/VideoListItem/VideoListItem.tsx

@@ -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_loasdasdasck')} role='img'>
               <Icon icon={Lock} />
             </div>
           )}

platforms/web/package.json

@@ -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",

platforms/web/test-e2e/tests/accessibility_test.ts

@@ -0,0 +1,84 @@
+import { testConfigs } from '@jwp/ott-testing/constants';
+
+Feature('Accessibility');
+
+const disableRetryFailedStep = (test: { disableRetryFailedStep: boolean }): void => {
+  test.disableRetryFailedStep = true;
+};
+function waitForEpgAnimation(I: CodeceptJS.I, sec: number = 1) {
+  I.waitForLoaderDone();
+  return I.wait(sec);
+}
+
+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 }) => {
+  await I.amOnPage('/p/dGSUzs9o/'); // "Films" page
+  I.checkA11y(null, {
+    ignore: [
+      { id: 'document-title', selector: 'html' },
+      { id: 'aria-valid-attr-value', selector: '[role="gridcell"]' },
+    ],
+  });
+}).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 - Live Page (EPG)', async ({ I }) => {
+  I.useConfig(testConfigs.basicNoAuth);
+  I.amOnPage('/p/fWpLtzVh/?channel=Uh7zcqVm/');
+  waitForEpgAnimation(I);
+  I.checkA11y(null, {
+    ignore: [
+      { 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('Signup - Modal - WCAG compliant', async ({ I }) => {
+//   I.useConfig(testConfigs.jwpAuth);
+//   I.amOnPage('/?u=create-account');
+//   I.checkA11y();
+// });
+
+// Scenario('Signin modal WCAG compliant', async ({ I }) => {
+//   I.useConfig(testConfigs.jwpAuth);
+//   I.amOnPage('/?u=login');
+//   I.checkA11y();
+// });

platforms/web/test-e2e/utils/steps_file.ts

@@ -1,6 +1,10 @@
 import * as assert from 'assert';
 
 import { TestConfig } from '@jwp/ott-testing/constants';
+import { type ElementContext, type RunOptions } from 'axe-core';
+import { injectAxe, getViolations, reportViolations } from 'axe-playwright';
+import DefaultTerminalReporter from 'axe-playwright/dist/reporter/defaultTerminalReporter';
+import { JSDOM } from 'jsdom';
 
 import { randomDate } from './randomizers';
 
@@ -12,6 +16,8 @@ const loaderElement = '[class*=_loadingOverlay]';
 
 type SwipeTarget = { text: string } | { xpath: string };
 type SwipeDirection = { direction: 'left' | 'right' } | { points: { x1: number; y1: number; x2: number; y2: number } };
+type IgnoreRule = { id: string; selector: string };
+type AccessbilityOptions = { ignore?: IgnoreRule[] } & RunOptions;
 
 const stepsObj = {
   useConfig: function (this: CodeceptJS.I, config: TestConfig) {
@@ -541,6 +547,23 @@ const stepsObj = {
   clickHome: function (this: CodeceptJS.I) {
     this.click('a[href="/"]');
   },
+  checkA11y: function (context?: ElementContext | null, options: AccessbilityOptions = {}) {
+    const debug = process.argv.includes('--debug');
+    this.usePlaywrightTo('Run accessibility tests', async ({ page }) => {
+      await injectAxe(page);
+      const violations = await getViolations(page, context || undefined);
+      const impactedViolations = violations.filter((violation) => {
+        const domDocuments = violation.nodes.map((node) => new JSDOM(node.html).window.document);
+        return !options.ignore?.some((rule) => {
+          return violation.id === rule.id && domDocuments.every((document) => !!document.querySelector(rule.selector));
+        });
+      });
+      if (impactedViolations.length > 0) {
+        reportViolations(impactedViolations, new DefaultTerminalReporter(debug, false, debug));
+        assert.fail(`Failed WCAG check with ${impactedViolations.length} violation(s)`);
+      }
+    });
+  },
 };
 declare global {
   // noinspection JSUnusedGlobalSymbols

platforms/web/tsconfig.json

@@ -13,7 +13,8 @@
       "@testing-library/jest-dom",
       "@types/jwplayer",
       "vite-plugin-pwa/client",
-      "reflect-metadata"
+      "reflect-metadata",
+      "axe-playwright"
     ]
   },
   "include": [

yarn.lock

@@ -2590,6 +2590,11 @@
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
   integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
 
+"@types/junit-report-builder@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/junit-report-builder/-/junit-report-builder-3.0.2.tgz#17cc131d14ceff59dcf14e5847bd971b96f2cbe0"
+  integrity sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA==
+
 "@types/jwplayer@^8.2.13":
   version "8.28.4"
   resolved "https://registry.yarnpkg.com/@types/jwplayer/-/jwplayer-8.28.4.tgz#ee2fa65a48cc6bfa6472464e92c90b0d6b053a04"
@@ -3382,6 +3387,30 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.4.1.tgz#7dbdc25989298f9ad006645cd396782443757413"
   integrity sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==
 
+axe-core@^4.5.1:
+  version "4.9.0"
+  resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.9.0.tgz#b18971494551ab39d4ff5f7d4c6411bd20cc7c2a"
+  integrity sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==
+
+[email protected]:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/axe-html-reporter/-/axe-html-reporter-2.2.3.tgz#2d56e239fe9bd1f09ba0735d94596bf79dd389a7"
+  integrity sha512-io8aCEt4fJvv43W+33n3zEa8rdplH5Ti2v5fOnth3GBKLhLHarNs7jj46xGfpnGnpaNrz23/tXPHC3HbwTzwwA==
+  dependencies:
+    mustache "^4.0.1"
+    rimraf "^3.0.2"
+
+axe-playwright@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/axe-playwright/-/axe-playwright-2.0.1.tgz#c474be6b7f3826e6a4cd1955ef006e33e4a145b9"
+  integrity sha512-MHjNjGARulF9XzqSfspmNjw+tpBz4x9o1VlTuLWEUW9fqzhn+xWa1qEpuOIQPbsRWQiLfooDjQAunLeE0PM5AQ==
+  dependencies:
+    "@types/junit-report-builder" "^3.0.0"
+    axe-core "^4.5.1"
+    axe-html-reporter "2.2.3"
+    junit-report-builder "^3.0.1"
+    picocolors "^1.0.0"
+
 [email protected]:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.3.tgz#e7011384ba839b885007c9c9fae1ff23dceb295b"
@@ -4478,6 +4507,11 @@ date-fns@^2.28.0:
   dependencies:
     "@babel/runtime" "^7.21.0"
 
+[email protected]:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.3.tgz#f63de5dc08dc02efd8ef32bf2a6918e486f35873"
+  integrity sha512-7P3FyqDcfeznLZp2b+OMitV9Sz2lUnsT87WaTat9nVwqsBkTzPG3lPLNwW3en6F4pHUiWzr6vb8CLhjdK9bcxQ==
+
 de-indent@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
@@ -7084,6 +7118,16 @@ jsonpointer@^5.0.0:
     object.assign "^4.1.4"
     object.values "^1.1.6"
 
+junit-report-builder@^3.0.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/junit-report-builder/-/junit-report-builder-3.2.1.tgz#93067512353c3d47d2dd5913e695b32d3262096c"
+  integrity sha512-IMCp5XyDQ4YESDE4Za7im3buM0/7cMnRfe17k2X8B05FnUl9vqnaliX6cgOEmPIeWKfJrEe/gANRq/XgqttCqQ==
+  dependencies:
+    date-format "4.0.3"
+    lodash "^4.17.21"
+    make-dir "^3.1.0"
+    xmlbuilder "^15.1.1"
+
 jwt-decode@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-3.1.2.tgz#3fb319f3675a2df0c2895c8f5e9fa4b67b04ed59"
@@ -7488,7 +7532,7 @@ make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.0.2:
+make-dir@^3.0.0, make-dir@^3.0.2, make-dir@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -7849,6 +7893,11 @@ [email protected], ms@^2.1.1:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
+mustache@^4.0.1:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/mustache/-/mustache-4.2.0.tgz#e5892324d60a12ec9c2a73359edca52972bf6f64"
+  integrity sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==
+
 [email protected]:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
@@ -10034,7 +10083,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6"
   integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -10051,6 +10100,15 @@ string-width@^2.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -10148,7 +10206,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -10169,6 +10227,13 @@ strip-ansi@^5.1.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -11773,7 +11838,16 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343"
   integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -11857,6 +11931,11 @@ xml-name-validator@^4.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-4.0.0.tgz#79a006e2e63149a8600f15430f0a4725d1524835"
   integrity sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==
 
+xmlbuilder@^15.1.1:
+  version "15.1.1"
+  resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-15.1.1.tgz#9dcdce49eea66d8d10b42cae94a79c3c8d0c2ec5"
+  integrity sha512-yMqGBqtXyeN1e3TGYvgNgDVZ3j84W4cwkOXQswghol6APgZWaff9lnbvN7MHYJOiXsvGPXtjTYJEiC9J2wv9Eg==
+
 xmlchars@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"