Merge pull request #9931 from overleaf/ii-dashboard-table-accessibility

[web] Project dashboard table accessibility improvements

GitOrigin-RevId: ac8202b587c796ad1560e26242c1edca8c72a897

services/web/frontend/extracted-translations.json

@@ -114,6 +114,7 @@
   "created_at": "",
   "creating": "",
   "current_password": "",
+  "date_and_owner": "",
   "date": "",
   "delete": "",
   "delete_account": "",
@@ -486,6 +487,7 @@
   "project_too_much_editable_text": "",
   "project_url": "",
   "projects": "",
+  "projects_list": "",
   "public": "",
   "pull_github_changes_into_sharelatex": "",
   "push_sharelatex_changes_to_github": "",

services/web/frontend/js/features/project-list/components/table/project-list-table-row.tsx

@@ -36,11 +36,9 @@ export default function ProjectListTableRow({
           onChange={handleCheckboxChange}
           data-project-id={project.id}
         />
-        <label
+        <label htmlFor={`select-project-${project.id}`} className="sr-only">
-          htmlFor={`select-project-${project.id}`}
+          {t('select_project', { project: project.name })}
-          aria-label={t('select_project', { project: project.name })}
+        </label>
-          className="sr-only"
-        />
       </td>
       <td className="dash-cell-name">
         <a href={`/project/${project.id}`}>{project.name}</a>{' '}

services/web/frontend/js/features/project-list/components/table/project-list-table.tsx

@@ -12,10 +12,10 @@ function SortBtn({ onClick, text, iconType, screenReaderText }: SortBtnProps) {
     <button
       className="btn-link table-header-sort-btn hidden-xs"
       onClick={onClick}
+      aria-label={screenReaderText}
     >
       {text}
       {iconType ? <Icon className="tablesort" type={iconType} /> : null}
-      <span className="sr-only">{screenReaderText}</span>
     </button>
   )
 }
@@ -41,6 +41,7 @@ function ProjectListTable() {
 
   return (
     <table className="project-dash-table">
+      <caption className="sr-only">{t('projects_list')}</caption>
       <thead className="sr-only-xs">
         <tr>
           <th
@@ -57,11 +58,9 @@ function ProjectListTable() {
               }
               disabled={visibleProjects.length === 0}
             />
-            <label
+            <label htmlFor="project-list-table-select-all" className="sr-only">
-              htmlFor="project-list-table-select-all"
+              {t('select_all_projects')}
-              aria-label={t('select_all_projects')}
+            </label>
-              className="sr-only"
-            />
           </th>
           <th
             className="dash-cell-name"
@@ -83,9 +82,9 @@ function ProjectListTable() {
           </th>
           <th
             className="dash-cell-date-owner visible-xs"
-            aria-label={`${t('date')} — ${t('owner')}`}
+            aria-label={t('date_and_owner')}
           >
-            {`${t('date')} — ${t('owner')}`}
+            {t('date_and_owner')}
           </th>
           <th
             className="dash-cell-owner hidden-xs"
@@ -126,7 +125,9 @@ function ProjectListTable() {
           <th className="dash-cell-tag visible-xs" aria-label={t('tags')}>
             {t('tags')}
           </th>
-          <th className="dash-cell-actions">{t('actions')}</th>
+          <th className="dash-cell-actions" aria-label={t('actions')}>
+            {t('actions')}
+          </th>
         </tr>
       </thead>
 

services/web/locales/en.json

@@ -964,6 +964,7 @@
   "make_copy": "Make a copy",
   "restore": "Restore",
   "title": "Title",
+  "date_and_owner": "Date and owner",
   "last_modified": "Last Modified",
   "last_updated": "Last Updated",
   "no_projects": "No projects",
@@ -1498,6 +1499,7 @@
   "download": "Download",
   "email": "Email",
   "owner": "Owner",
+  "date": "Date",
   "read_and_write": "Read and Write",
   "read_only": "Read Only",
   "publish": "Publish",
@@ -1909,5 +1911,6 @@
   "show_x_more": "Show __x__ more",
   "show_x_more_projects": "Show __x__ more projects",
   "showing_x_out_of_n_projects": "Showing __x__ out of __n__ projects.",
-  "make_a_copy": "Make a copy"
+  "make_a_copy": "Make a copy",
+  "projects_list": "Projects list"
 }

services/web/test/frontend/features/project-list/components/table/project-list-table.test.tsx

@@ -58,9 +58,9 @@ describe('<ProjectListTable />', function () {
 
   it('renders buttons for sorting all sortable columns', function () {
     renderWithProjectListContext(<ProjectListTable />)
-    screen.getByText('Sort by Title')
+    screen.getByRole('button', { name: 'Sort by Title' })
-    screen.getByText('Sort by Owner')
+    screen.getByRole('button', { name: 'Sort by Owner' })
-    screen.getByText('Reverse Last Modified sort order') // currently sorted
+    screen.getByRole('button', { name: 'Reverse Last Modified sort order' }) // currently sorted
   })
 
   it('renders project title, owner, last modified, and action buttons', async function () {