Feat / WCAG validation per page using axe-playwright

packages/ui-react/src/components/CardGrid/__snapshots__/CardGrid.test.tsx.snap

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

packages/ui-react/src/components/CustomRegisterField/__snapshots__/CustomRegisterField.test.tsx.snap

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

packages/ui-react/src/components/Favorites/__snapshots__/Favorites.test.tsx.snap

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

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/PersonalDetailsForm/__snapshots__/PersonalDetailsForm.test.tsx.snap

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

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

@@ -69,7 +69,8 @@ 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}

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

@@ -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}

packages/ui-react/src/components/Shelf/__snapshots__/Shelf.test.tsx.snap

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

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

packages/ui-react/src/pages/Search/Search.module.scss

@@ -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;

packages/ui-react/src/pages/Search/Search.tsx

@@ -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}
@@ -121,6 +121,7 @@ const Search = () => {
         accessModel={accessModel}
         isLoggedIn={!!user}
         hasSubscription={!!subscription}
+        headingLevel={2}
       />
     </div>
   );

packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap

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

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