Merge pull request #2403 from bitzesty/cherry-pick-a11y

Cherry pick a11y fixes
bitzesty · Jul 6, 2023 · 23c2a0f · 23c2a0f
2 parents 944fd32 + c929848
commit 23c2a0f
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 62 deletions.
diff --git a/app/assets/stylesheets/admin/page-dashboard.scss b/app/assets/stylesheets/admin/page-dashboard.scss
@@ -80,6 +80,52 @@
 
 }
 
+.dashboard-table__wrapper {
+  .btn {
+    position: relative;
+    padding-left: 2.5em;
+
+    &:before {
+      content: " ";
+      display: block;
+      position: absolute;
+      top: 9px;
+      left: 10px;
+      background-size: 1em auto;
+      background-repeat: no-repeat;
+      background-position: center;
+      width: 1em;
+      height: 1em;
+    }
+
+    @media (min-width: 768px) {
+      position: absolute;
+      right: 0;
+      top: 3em;
+    }
+
+    &[disabled] {
+      opacity: 0.7;
+    }
+
+    &.btn--load:before {
+      background-image: image-url("icon_load.svg");
+    }
+
+    &.btn--reload:before {
+      background-image: image-url("icon_update.svg");
+    }
+
+    &.btn--loading:before {
+      background-image: image-url("icon_loading.svg");
+      background-size: 1.15em auto;
+      width: 1.2em;
+      height: 1.5em;
+      top: 7px;
+    }
+  }
+}
+
 .dashboard-table {
   table-layout: fixed;
   overflow-x: scroll;
@@ -124,50 +170,6 @@
         top: -1px;
       }
     }
-
-    .btn {
-      position: relative;
-      padding-left: 2.5em;
-
-      &:before {
-        content: " ";
-        display: block;
-        position: absolute;
-        top: 9px;
-        left: 10px;
-        background-size: 1em auto;
-        background-repeat: no-repeat;
-        background-position: center;
-        width: 1em;
-        height: 1em;
-      }
-
-      @media (min-width: 768px) {
-        position: absolute;
-        right: 0;
-        top: 3em;
-      }
-
-      &[disabled] {
-        opacity: 0.7;
-      }
-
-      &.btn--load:before {
-        background-image: image-url("icon_load.svg");
-      }
-
-      &.btn--reload:before {
-        background-image: image-url("icon_update.svg");
-      }
-
-      &.btn--loading:before {
-        background-image: image-url("icon_loading.svg");
-        background-size: 1.15em auto;
-        width: 1.2em;
-        height: 1.5em;
-        top: 7px;
-      }
-    }
   }
 
   th, td {

diff --git a/app/assets/stylesheets/application-admin.scss b/app/assets/stylesheets/application-admin.scss
@@ -49,3 +49,15 @@ $todo-black: #333;
     outline: 4px solid $todo-yellow !important;
   }
 }
+
+.skip-main-content {
+  position: absolute;
+    top: -100px;
+    z-index: 9999999999999999999999;
+
+    &:focus {
+      top: 20px;
+      left: 20px;
+      color: white !important;
+    }
+}
diff --git a/app/views/admin/dashboard/_applications_report.html.slim b/app/views/admin/dashboard/_applications_report.html.slim
@@ -1,11 +1,12 @@
 .dashboard-table__wrapper.dashboard-report
+  a.btn.btn-primary.btn--load.update-report href=url aria-label="Load #{title} data"
+    | Load data
+  button.btn.btn-primary.btn--loading.updating-data.hidden aria-label="Updating #{title} data"
+    | Updating data
+
   table.dashboard-table.dashboard-table--small width="1000"
     caption
       = title
-      a.btn.btn-primary.btn--load.update-report href=url aria-label="Load #{title} data"
-        | Load data
-      button.btn.btn-primary.btn--loading.updating-data.hidden aria-label="Updating #{title} data"
-        | Updating data
     = render "admin/dashboard/totals_#{kind}/table_head"
 
     tbody

diff --git a/app/views/admin/dashboard/totals_by_day/_registrations.html.slim b/app/views/admin/dashboard/totals_by_day/_registrations.html.slim
@@ -1,12 +1,12 @@
 .dashboard-table__wrapper.dashboard-report
+  a.btn.btn-primary.btn--load.update-report href=account_registrations_admin_dashboard_reports_path(kind: "by_day") aria-label="Load data for new account registrations table"
+    | Load data
+  button.btn.btn-primary.btn--loading.updating-data.hidden
+    | Updating data
+
   table.dashboard-table.dashboard-table--small width="1000"
     caption
       | New account registrations
-      a.btn.btn-primary.btn--load.update-report href=account_registrations_admin_dashboard_reports_path(kind: "by_day")
-        | Load data
-      button.btn.btn-primary.btn--loading.updating-data.hidden
-        | Updating data
-
     thead
       tr
         th.bold.border-right width="150"

diff --git a/app/views/admin/dashboard/totals_by_month/_registrations.html.slim b/app/views/admin/dashboard/totals_by_month/_registrations.html.slim
@@ -1,11 +1,12 @@
 .dashboard-table__wrapper.dashboard-report
+  a.btn.btn-primary.btn--load.update-report href=account_registrations_admin_dashboard_reports_path(kind: "by_month") aria-label="Load data for new account registrations table"
+    | Load data
+  button.btn.btn-primary.btn--loading.updating-data.hidden
+    | Updating data
+
   table.dashboard-table.dashboard-table--small width="1000"
     caption
       | New account registrations
-      a.btn.btn-primary.btn--load.update-report href=account_registrations_admin_dashboard_reports_path(kind: "by_month")
-        | Load data
-      button.btn.btn-primary.btn--loading.updating-data.hidden
-        | Updating data
 
     thead
       tr

diff --git a/app/views/admin/dashboard/totals_by_week/_registrations.html.slim b/app/views/admin/dashboard/totals_by_week/_registrations.html.slim
@@ -1,12 +1,13 @@
 .dashboard-table__wrapper.dashboard-report
+  a.btn.btn-primary.btn--load.update-report href=account_registrations_admin_dashboard_reports_path(kind: "by_week") aria-label="Load data for new account registrations table"
+    | Load data
+  button.btn.btn-primary.btn--loading.updating-data.hidden
+    | Updating data
+
   table.dashboard-table.dashboard-table--small width="1000"
     caption
       | New account registrations
-      a.btn.btn-primary.btn--load.update-report href=account_registrations_admin_dashboard_reports_path(kind: "by_week")
-        | Load data
-      button.btn.btn-primary.btn--loading.updating-data.hidden
-        | Updating data
-
+
     thead
       tr
         th.bold.border-right width="150"

diff --git a/app/views/layouts/application-admin.html.slim b/app/views/layouts/application-admin.html.slim
@@ -38,6 +38,8 @@ html.no-js
   body#admin-layout data-autosave-token="#{current_admin.try(:autosave_token)}" class="admin-layout #{controller_name}-page #{action_name}-page #{controller_name}-#{action_name}-page #{yield :page_class} #{'layout-dev' if Rails.env.development?}"
     #site-wrapper
       #site-wrapper-margin
+        a href="#main-container" class="btn btn-lg skip-main-content" onclick="document.getElementById('main-container').focus()" role="button"
+          | Skip to main content
         #site-header.clearfix
           .navbar.clearfix role="navigation"
             .container.clearfix