accessibility updates (#439)

* accessibility updates * IMS issue 438 bug fixes and accessibility enhancements
episphere · May 28, 2024 · 3438314 · 3438314
1 parent 650fa70
commit 3438314
Show file tree

Hide file tree

Showing 5 changed files with 250 additions and 87 deletions.
diff --git a/ActiveLogic.css b/ActiveLogic.css
@@ -162,91 +162,121 @@ for bootstrap -xs
 .quest-grid.table-layout tr {
   width: auto;
   display: table-row;
+  font-size: clamp(12px, 1.5vw, 16px);
+}
+
+.quest-grid.table-layout th.hr {
+  padding: .2vw;
+  text-align: center;
+  vertical-align: top;
+  height: auto;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  font-weight: normal;
+  font-size: clamp(11px, 1.8vw, 16px);
+  word-wrap: break-word;
+}
+
+.quest-grid.table-layout th.nr {
+  padding: clamp(5px, 1vw, 10px);
+  text-align: center;
+  vertical-align: middle;
+  height: auto;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  font-size: clamp(12px, 1.5vw, 16px);
 }
 
-.quest-grid.table-layout th, .quest-grid.table-layout td {
-  padding: 5px;
+.quest-grid.table-layout td {
+  padding: .5vw;
   text-align: center;
   vertical-align: middle;
-  height: 50px;
+  height: auto;
   position: relative;
   background-color: transparent;
   border: none;
 }
 
 .quest-grid.table-layout th.nr, .quest-grid.table-layout td.nr {
-  font-weight: bold;
   text-align: left;
+  font-size: clamp(12px, 1.5vw, 16px);
 }
 
 .quest-grid.table-layout input[type="radio"] {
-  display: none;
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
 }
 
-/* Additional styles to ensure the label is large enough to comfortably contain the circles */
 .quest-grid.table-layout .custom-label {
   position: relative;
-  height: 50px;
-  min-width: 50px;
+  height: clamp(19px, 2vw, 34px);
+  min-width: clamp(19px, 2vw, 34px);
   color: transparent;
   background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
   border: none;
   outline: none;
+  overflow: hidden;
+  padding: 1em;
 }
 
-/* Styling for the custom label to always have an unfilled circle */
 .quest-grid.table-layout .custom-label::before {
   content: '';
   display: block;
-  width: 26px;
-  height: 26px;
-  border: 2px solid #cccccc;
-  border-radius: 50%; /* Circle */
+  width: clamp(19px, 2vw, 34px);
+  height: clamp(19px, 2vw, 34px);
+  border: 0.15vw solid #b3b3b3;
+  border-radius: 50%;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: transparent;
 }
 
-.quest-grid.table-layout .custom-label:hover {
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-
-/* Hover effect for the label */
-.quest-grid .custom-label:hover::before {
-  border-color: #1c5d86;
-  box-shadow: 0 0 8px #ccc;
-}
-
-/* Styling for when the radio button is checked */
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label::after {
   content: '';
   display: block;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%; /* Circle */
+  width: clamp(14px, 1.4vw, 23px);
+  height: clamp(14px, 1.4vw, 23px);
+  border-radius: 50%;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: #327ABB;
 }
 
+.quest-grid.table-layout .custom-label:hover {
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.quest-grid .custom-label:hover::before {
+  border-color: #1c5d86;
+  box-shadow: 0 0 .75vw #b3b3b3;
+}
+
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label {
   border: none;
   background-color: transparent;
   color: transparent;
-}
+} 
 
 @media screen and (min-width: 576px) {
   /* Emphasize the first table column. Then let the browser calculate the width for the remaining columns */
   .quest-grid.table-layout th:first-child, .quest-grid td:first-child {
-    width: 35%;
-    font-weight: bold;
+    width: 25%;
+    font-weight: normal;
+    font-size: clamp(12px, 1.5vw, 16px);
   }
 }
 
@@ -259,6 +289,10 @@ for bootstrap -xs
     display: block;
   }
 
+  .quest-grid.table-layout th.nr {
+    font-weight: bold;
+    font-size: 16px;
+  }
   .quest-grid.table-layout .custom-label {
     position: absolute;
     top: 0;

diff --git a/Default.css b/Default.css
@@ -96,91 +96,121 @@ for bootstrap -xs
 .quest-grid.table-layout tr {
   width: auto;
   display: table-row;
+  font-size: clamp(12px, 1.5vw, 16px);
+}
+
+.quest-grid.table-layout th.hr {
+  padding: .2vw;
+  text-align: center;
+  vertical-align: middle;
+  height: auto;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  font-weight: normal;
+  font-size: clamp(11px, 1.8vw, 16px);
+  word-wrap: break-word;
+}
+
+.quest-grid.table-layout th.nr {
+  padding: clamp(5px, 1vw, 10px);
+  text-align: center;
+  vertical-align: middle;
+  height: auto;
+  position: relative;
+  background-color: transparent;
+  border: none;
+  font-size: clamp(12px, 1.5vw, 16px);
 }
 
-.quest-grid.table-layout th, .quest-grid.table-layout td {
-  padding: 5px;
+.quest-grid.table-layout td {
+  padding: .5vw;
   text-align: center;
   vertical-align: middle;
-  height: 50px;
+  height: auto;
   position: relative;
   background-color: transparent;
   border: none;
 }
 
 .quest-grid.table-layout th.nr, .quest-grid.table-layout td.nr {
-  font-weight: bold;
   text-align: left;
+  font-size: clamp(12px, 1.5vw, 16px);
 }
 
 .quest-grid.table-layout input[type="radio"] {
-  display: none;
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
 }
 
-/* Additional styles to ensure the label is large enough to comfortably contain the circles */
 .quest-grid.table-layout .custom-label {
   position: relative;
-  height: 50px;
-  min-width: 50px;
+  height: clamp(19px, 2vw, 34px);
+  min-width: clamp(19px, 2vw, 34px);
   color: transparent;
   background-color: transparent;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   cursor: pointer;
   border: none;
   outline: none;
+  overflow: hidden;
+  padding: 1em;
 }
 
-/* Styling for the custom label to always have an unfilled circle */
 .quest-grid.table-layout .custom-label::before {
   content: '';
   display: block;
-  width: 26px;
-  height: 26px;
-  border: 2px solid #cccccc;
-  border-radius: 50%; /* Circle */
+  width: clamp(19px, 2vw, 34px);
+  height: clamp(19px, 2vw, 34px);
+  border: 0.15vw solid #b3b3b3;
+  border-radius: 50%;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: transparent;
 }
 
-.quest-grid.table-layout .custom-label:hover {
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-
-/* Hover effect for the label */
-.quest-grid .custom-label:hover::before {
-  border-color: #1c5d86;
-  box-shadow: 0 0 8px #ccc;
-}
-
-/* Styling for when the radio button is checked */
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label::after {
   content: '';
   display: block;
-  width: 20px;
-  height: 20px;
-  border-radius: 50%; /* Circle */
+  width: clamp(14px, 1.4vw, 23px);
+  height: clamp(14px, 1.4vw, 23px);
+  border-radius: 50%;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background-color: #327ABB;
 }
 
+.quest-grid.table-layout .custom-label:hover {
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.quest-grid .custom-label:hover::before {
+  border-color: #1c5d86;
+  box-shadow: 0 0 .75vw #b3b3b3;
+}
+
 .quest-grid.table-layout input[type="radio"]:checked + .custom-label {
   border: none;
   background-color: transparent;
   color: transparent;
-}
+} 
 
 @media screen and (min-width: 576px) {
   /* Emphasize the first table column. Then let the browser calculate the width for the remaining columns */
   .quest-grid.table-layout th:first-child, .quest-grid td:first-child {
-    width: 35%;
-    font-weight: bold;
+    width: 25%;
+    font-weight: normal;
+    font-size: clamp(12px, 1.5vw, 16px);
   }
 }
 
@@ -193,6 +223,10 @@ for bootstrap -xs
     display: block;
   }
 
+  .quest-grid.table-layout th.nr {
+    font-weight: bold;
+    font-size: 16px;
+  }
   .quest-grid.table-layout .custom-label {
     position: absolute;
     top: 0;

diff --git a/buildGrid.js b/buildGrid.js
@@ -76,7 +76,7 @@ function buildHtmlTable(grid_obj){
       <form ${grid_obj.args} class="container question" data-grid="true" ${gridPrompt} aria-describedby="formDescription" role="form">
         <div id="formDescription" class="sr-only" aria-live="polite">Please interact with the table below to answer the questions.</div>
         <div>${grid_text_displayif(shared_text)}</div>
-        <table class="quest-grid table-layout">`;
+          <table class="quest-grid table-layout table">`;
 
   // Build the table header row with the question text and response headers. Start with a placeholder for the row header.
   grid_html += '<thead class="hr" role="rowgroup"><tr><th class="nr hr"></th>';