Improve accessibility of empty column header

2023-10-05 16:13:12 +02:00 · 2023-10-05 16:13:12 +02:00 · d6a31f9bef
parent 0ac3820f4d
commit d6a31f9bef
13 changed files with 60 additions and 20 deletions
--- a/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
+++ b/client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.html
@ -24,7 +24,9 @@
 >
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 40px;"></th>
+      <th style="width: 40px;">
+        <span i18n class="visually-hidden">More information</span>
+      </th>
      <th style="width: 150px;" i18n>Action</th>
      <th style="width: 160px;" i18n *ngIf="isDisplayingRemoteVideos()">Strategy</th>
      <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th >
--- a/client/src/app/+admin/moderation/registration-list/registration-list.component.html
+++ b/client/src/app/+admin/moderation/registration-list/registration-list.component.html
@ -31,8 +31,12 @@
      <th style="width: 40px">
        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
      </th>
-      <th style="width: 40px;"></th>
-      <th style="width: 150px;"></th>
+      <th style="width: 40px;">
+        <span i18n class="visually-hidden">More information</span>
+      </th>
+      <th style="width: 150px;">
+        <span i18n class="visually-hidden">Actions</span>
+      </th>
      <th i18n>Account</th>
      <th i18n>Email</th>
      <th i18n>Channel</th>
--- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
+++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.html
@ -20,8 +20,12 @@

  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 40px;"></th>
-      <th style="width: 150px;"></th>
+      <th style="width: 40px;">
+        <span i18n class="visually-hidden">More information</span>
+      </th>
+      <th style="width: 150px;">
+        <span i18n class="visually-hidden">Actions</span>
+      </th>
      <th i18n pSortableColumn="name">Video <p-sortIcon field="name"></p-sortIcon></th>
      <th style="width: 100px;" i18n>Sensitive</th>
      <th style="width: 120px;" i18n>Unfederated</th>
@ -31,7 +35,9 @@

  <ng-template pTemplate="body" let-videoBlock let-expanded="expanded">
    <tr>
-      <td *ngIf="!videoBlock.reason"></td>
+      <td *ngIf="!videoBlock.reason">
+        <span i18n class="visually-hidden">No more information is available for this row</span>
+      </td>
      <td class="expand-cell" *ngIf="videoBlock.reason" [pRowToggler]="videoBlock">
        <my-table-expander-icon [expanded]="expanded"></my-table-expander-icon>
      </td>
--- a/client/src/app/+admin/overview/comments/video-comment-list.component.html
+++ b/client/src/app/+admin/overview/comments/video-comment-list.component.html
@ -37,8 +37,12 @@
      <th style="width: 40px;">
        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
      </th>
-      <th style="width: 40px;"></th>
-      <th style="width: 150px;"></th>
+      <th style="width: 40px;">
+        <span i18n class="visually-hidden">More information</span>
+      </th>
+      <th style="width: 150px;">
+        <span i18n class="visually-hidden">Actions</span>
+      </th>
      <th style="width: 300px;" i18n>Account</th>
      <th style="width: 300px;" i18n>Video</th>
      <th i18n>Comment</th>
--- a/client/src/app/+admin/overview/users/user-list/user-list.component.html
+++ b/client/src/app/+admin/overview/users/user-list/user-list.component.html
@ -36,7 +36,9 @@
      <th style="width: 40px">
        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
      </th>
-      <th style="width: 40px"></th>
+      <th style="width: 40px;">
+        <span i18n class="visually-hidden">More information</span>
+      </th>
      <th style="width: 70px;">
        <div class="c-hand column-toggle" ngbDropdown placement="bottom-left auto" container="body" autoClose="outside">
          <my-global-icon iconName="columns" ngbDropdownToggle></my-global-icon>
--- a/client/src/app/+admin/overview/videos/video-list.component.html
+++ b/client/src/app/+admin/overview/videos/video-list.component.html
@ -34,8 +34,12 @@
      <th style="width: 40px">
        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
      </th>
-      <th style="width: 40px"></th>
-      <th style="width: 70px;"></th>
+      <th style="width: 40px;">
+        <span i18n class="visually-hidden">More information</span>
+      </th>
+      <th style="width: 70px;">
+        <span i18n class="visually-hidden">Actions</span>
+      </th>
      <th i18n>Video</th>
      <th i18n>Info</th>
      <th i18n>Files</th>
--- a/client/src/app/+admin/system/jobs/jobs.component.html
+++ b/client/src/app/+admin/system/jobs/jobs.component.html
@ -39,7 +39,9 @@
 >
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 40px"></th>
+      <th style="width: 40px;">
+        <span i18n class="visually-hidden">More information</span>
+      </th>
      <th class="job-id" i18n>ID</th>
      <th style="width: 200px" class="job-type" i18n>Type</th>
      <th style="width: 200px" class="job-priority" i18n>Priority <small>(1 = highest priority)</small></th>
--- a/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-job-list/runner-job-list.component.html
@ -22,8 +22,12 @@
      <th style="width: 40px">
        <p-tableHeaderCheckbox ariaLabel="Select all rows" i18n-ariaLabel></p-tableHeaderCheckbox>
      </th>
-      <th style="width: 40px"></th>
-      <th style="width: 120px;"></th>
+      <th style="width: 40px;">
+        <span i18n class="visually-hidden">More information</span>
+      </th>
+      <th style="width: 120px;">
+        <span i18n class="visually-hidden">Actions</span>
+      </th>
      <th i18n>UUID</th>
      <th i18n>Type</th>
      <th i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
--- a/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-list/runner-list.component.html
@ -18,7 +18,9 @@
 >
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 120px;"></th>
+      <th style="width: 120px;">
+        <span i18n class="visually-hidden">Actions</span>
+      </th>
      <th i18n>Name</th>
      <th i18n>Description</th>
      <th i18n>IP</th>
--- a/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
+++ b/client/src/app/+admin/system/runners/runner-registration-token-list/runner-registration-token-list.component.html
@ -20,7 +20,9 @@
 >
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 120px;"></th>
+      <th style="width: 120px;">
+        <span i18n class="visually-hidden">Actions</span>
+      </th>
      <th i18n>Token</th>
      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
      <th style="width: 160px;" i18n>Associated runners</th>
--- a/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
+++ b/client/src/app/+my-library/my-video-channel-syncs/my-video-channel-syncs.component.html
@ -29,7 +29,9 @@

  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 10%"></th>
+      <th style="width: 10%;">
+        <span i18n class="visually-hidden">Actions</span>
+      </th>
      <th style="width: 25%" i18n pSortableColumn="externalChannelUrl">External Channel <p-sortIcon field="externalChannelUrl"></p-sortIcon></th>
      <th style="width: 25%" i18n pSortableColumn="videoChannel">Channel <p-sortIcon field="videoChannel"></p-sortIcon></th>
      <th style="width: 10%" i18n pSortableColumn="state">State <p-sortIcon field="state"></p-sortIcon></th>
--- a/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
+++ b/client/src/app/+my-library/my-video-imports/my-video-imports.component.html
@ -22,7 +22,9 @@
 >
  <ng-template pTemplate="header">
    <tr>
-      <th style="width: 40px;"></th>
+      <th style="width: 40px;">
+        <span i18n class="visually-hidden">More information</span>
+      </th>
      <th style="width: 200px">Action</th>
      <th style="width: 45%" i18n>Target</th>
      <th style="width: 55%" i18n>Video</th>
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@ -14,8 +14,12 @@

  <ng-template pTemplate="header">
    <tr> <!-- header -->
-      <th style="width: 40px;"></th>
-      <th style="width: 150px;"></th>
+      <th style="width: 40px;">
+        <span i18n class="visually-hidden">More information</span>
+      </th>
+      <th style="width: 150px;">
+        <span i18n class="visually-hidden">Actions</span>
+      </th>
      <th *ngIf="isAdminView()" style="width: 20%;" pResizableColumn i18n>Reporter</th>
      <th i18n>Video/Comment/Account</th>
      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>