Accessibility high (#1218)

* fix dashboard * fix grant details * fix workflow basics * fix workflow grants * fix workflow policies * fix workflow repositories * fix workflow files * fix brandsite container * revert unintentional branding overrides change
eclipse-pass · Sep 28, 2023 · 8a2d236 · 8a2d236
1 parent 3473e89
commit 8a2d236
Show file tree

Hide file tree

Showing 21 changed files with 138 additions and 109 deletions.
diff --git a/app/components/find-journal/index.css b/app/components/find-journal/index.css
@@ -1,5 +1,5 @@
 .is-invalid {
-  border-color: #f86c6b !important;
+  border-color: #dc3545 !important;
   width: 100%;
 }
 

diff --git a/app/components/nav-bar/index.hbs b/app/components/nav-bar/index.hbs
@@ -18,7 +18,7 @@
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
-        <ul class="navbar-nav w-100">
+        <ul class="navbar-nav w-75">
           <li class="nav-item">
             <LinkTo @route="dashboard" class="nav-link pl-0 ml-0">
               Dashboard
@@ -57,28 +57,28 @@
               </a>
             </li>
           {{/if}}
-          <div class="nav-item dropdown ml-auto">
-            <a
-              id="user-menu-name"
-              class="nav-link accountInfo pr-1"
-              data-toggle="dropdown"
-              href="#"
-              role="button"
-              aria-haspopup="true"
-              aria-expanded="false"
-            >
-              {{this.currentUser.user.displayName}}
-            </a>
-            <div id="user-menu" class="dropdown">
-              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                <a class="dropdown-item" href="#" {{on "click" this.logOut}}>
-                  <i class="fa fa-lock"></i>
-                  Logout
-                </a>
-              </div>
+        </ul>
+        <div class="nav-item dropdown ml-auto w-25">
+          <a
+            id="user-menu-name"
+            class="nav-link accountInfo pr-1"
+            data-toggle="dropdown"
+            href="#"
+            role="button"
+            aria-haspopup="true"
+            aria-expanded="false"
+          >
+            {{this.currentUser.user.displayName}}
+          </a>
+          <div id="user-menu" class="dropdown">
+            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+              <a class="dropdown-item" href="#" {{on "click" this.logOut}}>
+                <i class="fa fa-lock"></i>
+                Logout
+              </a>
             </div>
           </div>
-        </ul>
+        </div>
       </div>
     </div>
   </div>

diff --git a/app/components/oap-compliance-cell/index.css b/app/components/oap-compliance-cell/index.css
@@ -3,6 +3,6 @@
 }
 
 .fa-circle {
-  color: #f86c6b;
+  color: #dc3545;
   font-size: 0.8em;
 }
diff --git a/app/components/policy-card/index.hbs b/app/components/policy-card/index.hbs
@@ -54,6 +54,7 @@
               your article deposited by your journal/publisher.
             </p>
             <input
+              aria-label="Workflow policies radio indicating no direct deposit"
               type="radio"
               checked={{not this.pmcPublisherDeposit}}
               onchange={{action "pmcPublisherDepositToggled" false}}
@@ -62,6 +63,7 @@
             I would like to submit my manuscript to PMC via the NIH Manuscript System (NIHMS) as part of this process.
             <br />
             <input
+              aria-label="Workflow policies radio indicating a direct deposit"
               type="radio"
               checked={{this.pmcPublisherDeposit}}
               onchange={{action "pmcPublisherDepositToggled" true}}

diff --git a/app/components/repository-card/index.hbs b/app/components/repository-card/index.hbs
@@ -15,7 +15,13 @@
 }}
 <li class="list-group-item d-flex align-items-center my-1">
   {{#if @choice}}
-    <input type="checkbox" name={{@repository.name}} checked={{@repository._selected}} {{on "click" this.toggle}} />
+    <input
+      aria-label="Optional repositories checkbox"
+      type="checkbox"
+      name={{@repository.name}}
+      checked={{@repository._selected}}
+      {{on "click" this.toggle}}
+    />
     <label for="{{@repoInfo.repository.name}}" class="mb-0 ml-2">
       {{@repository.name}}{{#if @funders}}
         -

diff --git a/app/components/submission-action-cell/index.js b/app/components/submission-action-cell/index.js
@@ -37,7 +37,7 @@ export default class SubmissionActionCell extends Component {
       // title: 'Are you sure?',
       text: 'Are you sure you want to delete this draft submission? This cannot be undone.',
       confirmButtonText: 'Delete',
-      confirmButtonColor: '#f86c6b',
+      confirmButtonColor: '#DC3545',
       showCancelButton: true,
       // buttonsStyling: false,
       // confirmButtonClass: 'btn btn-danger',

diff --git a/app/components/workflow-basics/index.hbs b/app/components/workflow-basics/index.hbs
@@ -30,6 +30,7 @@
       </p>
       <div class="input-group pb-3">
         <Input
+          aria-label="Proxy search input"
           @enter={{action "toggleUserSearchModal"}}
           @value={{this.userSearchTerm}}
           class="form-control"
@@ -73,6 +74,7 @@
       </p>
       <div class="form-inline">
         <Input
+          aria-label="Proxy submitter email input"
           class={{concat "mt-1 mb-3 form-control w-50 " this.submitterEmailClass}}
           @key-up={{action @validateSubmitterEmail}}
           @disabled={{@submission.submitter.id}}
@@ -81,6 +83,7 @@
           data-test-proxy-submitter-email-input
         />
         <Input
+          aria-label="Proxy submitter name input"
           class="mt-1 mb-3 form-control w-50"
           @disabled={{@submission.submitter.id}}
           @value={{@submission.submitterName}}

diff --git a/app/components/workflow-files/index.hbs b/app/components/workflow-files/index.hbs
@@ -59,6 +59,7 @@
               </td>
               <td class="vertical-align-middle">
                 <input
+                  aria-label="Manuscript description input"
                   class="form-control file-description-width"
                   value={{this.manuscript.description}}
                   {{on "change" (fn this.updateFileDescription this.manuscript)}}
@@ -102,6 +103,7 @@
               </td>
               <td class="vertical-align-middle">
                 <input
+                  aria-label="File description input"
                   class="form-control file-description-width"
                   value={{file.description}}
                   {{on "change" (fn this.updateFileDescription file)}}
@@ -143,11 +145,12 @@
   <div class="col-md-12">
     {{#let (file-queue name="files" onFileAdded=this.uploadFile) as |queue|}}
       <input
+        aria-label="File upload input"
         type="file"
         id="file-multiple-input"
         multiple
         size="50"
-        class="file-input text-gray-300"
+        class="file-input"
         {{queue.selectFile}}
       />
     {{/let}}

diff --git a/app/components/workflow-grants/index.js b/app/components/workflow-grants/index.js
@@ -51,6 +51,7 @@ export default class WorkflowGrants extends Component {
       disableSorting: true,
     },
     {
+      title: 'Select',
       component: 'select-row-toggle',
       mayBeHidden: false,
     },

diff --git a/app/components/workflow-review/index.hbs b/app/components/workflow-review/index.hbs
@@ -140,7 +140,7 @@
                       </th>
                     </tr>
                   </thead>
-                  <tbody class="striped">
+                  <tbody>
                     {{#each this.parsedFiles as |file|}}
                       <tr>
                         <td data-label="icon">

diff --git a/app/components/workflow-review/index.js b/app/components/workflow-review/index.js
@@ -77,7 +77,7 @@ export default class WorkflowReview extends Component {
     // In case a crafty user edits the page HTML, don't submit when not allowed
     if (this.disableSubmit) {
       if (!this.hasVisitedWeblink) {
-        $('.fa-exclamation-triangle').css('color', '#f86c6b');
+        $('.fa-exclamation-triangle').css('color', '#DC3545');
         $('.fa-exclamation-triangle').css('font-size', '2.2em');
         later(() => {
           $('.fa-exclamation-triangle').css('color', '#b0b0b0');

diff --git a/app/controllers/submissions/detail.js b/app/controllers/submissions/detail.js
@@ -269,7 +269,7 @@ export default class SubmissionsDetail extends Controller {
     // First, check if user has visited all required weblinks.
     if (this.disableSubmit) {
       if (!this.hasVisitedWeblink) {
-        $('.fa-exclamation-triangle').css('color', '#f86c6b');
+        $('.fa-exclamation-triangle').css('color', '#DC3545');
         $('.fa-exclamation-triangle').css('font-size', '2.2em');
         later(() => {
           $('.fa-exclamation-triangle').css('color', '#b0b0b0');
@@ -450,7 +450,7 @@ export default class SubmissionsDetail extends Controller {
       title: 'Are you sure?',
       text: 'If you cancel this submission, it will not be able to be resumed.',
       confirmButtonText: 'Yes, cancel this submission',
-      confirmButtonColor: '#f86c6b',
+      confirmButtonColor: '#DC3545',
       cancelButtonText: 'Never mind',
       showCancelButton: true,
     });
@@ -467,7 +467,7 @@ export default class SubmissionsDetail extends Controller {
     let result = await swal({
       text: 'Are you sure you want to delete this draft submission? This cannot be undone.',
       confirmButtonText: 'Delete',
-      confirmButtonColor: '#f86c6b',
+      confirmButtonColor: '#DC3545',
       showCancelButton: true,
     });
 

diff --git a/app/controllers/submissions/new.js b/app/controllers/submissions/new.js
@@ -129,7 +129,7 @@ export default class SubmissionsNew extends Controller {
       title: 'Discard Draft',
       text: "This will abort the current submission and discard progress you've made. This cannot be undone.",
       confirmButtonText: 'Abort',
-      confirmButtonColor: '#f86c6b',
+      confirmButtonColor: '#DC3545',
       showCancelButton: true,
     });
 

diff --git a/app/index.html b/app/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en-US">
   <head>
     <meta charset="utf-8" />
     <title>PASS</title>

diff --git a/app/styles/app.css b/app/styles/app.css
@@ -264,7 +264,7 @@ td {
 .alpaca-invalid > input,
 .alpaca-invalid > textarea,
 .alpaca-invalid > select {
-  border-color: #f86c6b;
+  border-color: #dc3545;
 }
 
 .alpaca-message-notOptional {

diff --git a/app/templates/application.hbs b/app/templates/application.hbs
@@ -1,7 +1,7 @@
 {{! template-lint-disable require-valid-alt-text }}
 {{! template-lint-disable no-curly-component-invocation }}
 {{! template-lint-disable no-implicit-this }}
-<div id="brand-site-container" class="site">
+<div id="brand-site-container" class="site" tabindex="-1">
   <header id="brand-header" class="navbar navbar-expand-xs justify-content-center mb-0">
     <div class={{if this.fullWidth "container-fluid" "container"}}>
       <a href="/" class="navbar-brand d-none d-sm-block">

diff --git a/app/templates/dashboard.hbs b/app/templates/dashboard.hbs
@@ -63,7 +63,7 @@
         You have:
         <br />
         {{#if this.model.numberAwaitingApproval}}
-          <LinkTo @route="submissions.index">
+          <LinkTo @route="submissions.index" class="btn-link-underlined">
             {{this.model.numberAwaitingApproval}}
             submission(s)
           </LinkTo>

diff --git a/app/templates/grants/detail.hbs b/app/templates/grants/detail.hbs
@@ -1,6 +1,6 @@
 <div id="grant-details-title" class="row mt-3 mb-3">
   <div class="col-6 pt-1">
-    <LinkTo @route="grants" class="btn btn-small back-arrow">
+    <LinkTo @route="grants" class="btn btn-small back-arrow" aria-label="Go back to the previous page">
       <i class="fa fa-arrow-left fa-lg"></i>
     </LinkTo>
     <h2 class="font-weight-light d-inline-block">

diff --git a/app/templates/submissions/detail.hbs b/app/templates/submissions/detail.hbs
@@ -4,7 +4,7 @@
 </div>
 <div id="submission-details-title" class="row mb-2">
   <div class="col-6">
-    <LinkTo @route="submissions" class="btn btn-small back-arrow">
+    <LinkTo @route="submissions" class="btn btn-small back-arrow" aria-label="Go back to the previous page">
       <i class="fa fa-arrow-left fa-lg"></i>
     </LinkTo>
     <h2 class="font-weight-light d-inline-block">
@@ -269,7 +269,7 @@
                         </th>
                       </tr>
                     </thead>
-                    <tbody class="striped">
+                    <tbody>
                       {{#each (get this.model "files") as |file|}}
                         <tr>
                           <td data-label="icon">

diff --git a/public/branding.css b/public/branding.css
@@ -39,9 +39,14 @@ h1,
 h2 {
   color: var(--secondary-500);
 }
+a {
+  font-weight: 500 !important;
+  text-decoration: underline;
+}
 a,
 .btn-link {
   color: var(--primary-500);
+  text-decoration: none;
 }
 .btn-link-underlined {
   color: var(--primary-500);
@@ -52,6 +57,15 @@ a:hover,
   color: var(--primary-600);
   text-decoration: underline;
 }
+a.text-danger:hover {
+  color: white !important;
+}
+.models-table-wrapper tbody tr {
+  background-color: white !important;
+}
+.ember-power-select-placeholder {
+  color: #536c79;
+}
 
 /* Buttons */
 .btn-primary {