Merge pull request #69 from uc-cdis/fix/508_issues

pieterlukasse · web-flow · commit ac33ac610dca · 2025-01-14T21:37:08.000+01:00
Fix: 508/accessibility issues in Atlas UI
diff --git a/index.html b/index.html
@@ -59,7 +59,7 @@
 				<div style="margin-bottom:10px;">open source software</div>
 
 				<div>provided by</div>
-				<div><a href="http://www.ohdsi.org"><img src="images/ohdsi_color.png"></a></div>
+				<div><a href="http://www.ohdsi.org"><img src="images/ohdsi_color.png" alt="OHDSI logo with link to OHDSI site"></a></div>
 				<div><a href="http://www.ohdsi.org">join the journey</a></div>
 			</div>
 			<!-- /ko -->
diff --git a/js/components/checks/warnings-badge.less b/js/components/checks/warnings-badge.less
@@ -1,15 +1,15 @@
 .warnings-badge {
 	display: inline-block;
 	span {
-		color: #e3e3e3;
+		color: #FAFAFA;
 		&.warning-alarm {
-			background-color: #ff001a;
+			background-color: #E60017;
 		}
 		&.warning-info {
-			background-color: #337ab7;
+			background-color: #3174AF;
 		}
 		&.warning-warn {
-			background-color: #d82;
+			background-color: #A36519;
 		}
 	}
 }
diff --git a/js/components/cohortbuilder/components/CohortExpressionEditorTemplate.html b/js/components/cohortbuilder/components/CohortExpressionEditorTemplate.html
@@ -50,19 +50,19 @@
 			<div class="observation-window" data-bind="with: $component.expression().PrimaryCriteria().ObservationWindow">
 				<span
 					data-bind="text: ko.i18n('components.cohortExpressionEditor.cohortEntryEventsText_3', 'with continuous observation of at least')"></span>
-				<span contenteditable="true" class="numericInputField dropdown"
+				<span contenteditable="true" title="Number of days before selector" class="numericInputField dropdown"
 					data-bind="htmlValue: PriorDays.numeric(), eventType: 'blur', ko_autocomplete: { value: PriorDays, source: $component.options.dayOptions, minLength: 0, maxShowItems: 10, scroll: true }" />
 				<span
 					data-bind="text: ko.i18n('components.cohortExpressionEditor.cohortEntryEventsText_4', 'days before and')"></span>
-				<span contenteditable="true" class="numericInputField dropdown"
+				<span contenteditable="true" title="Number of days after selector" class="numericInputField dropdown"
 					data-bind="htmlValue: PostDays.numeric(), eventType: 'blur', ko_autocomplete: { value: PostDays, source: $component.options.dayOptions, minLength: 0, maxShowItems: 10, scroll: true }" />
 				<span
 					data-bind="text: ko.i18n('components.cohortExpressionEditor.cohortEntryEventsText_5', 'days after event index date')"></span>
 			</div>
 			<div style="padding-top: 3px" data-bind="with: expression().PrimaryCriteria().PrimaryCriteriaLimit">
 				<span
 					data-bind="text: ko.i18n('components.cohortExpressionEditor.cohortEntryEventsText_6', 'Limit initial events to:')"></span>
-				<select data-bind="options: $component.options.resultLimitOptions,
+				<select title="Limit initial events to" data-bind="options: $component.options.resultLimitOptions,
 				optionsText: function(item) { return item.name },
 				optionsValue: 'id',
 				value: Type">
@@ -157,7 +157,7 @@
 		<div style="padding-top: 3px" data-bind="with: expression().ExpressionLimit">
 			<span
 				data-bind="text: ko.i18n('components.cohortExpressionEditor.inclusionCriteriaText_1', 'Limit qualifying events to:')"></span>
-			<select data-bind="options: $component.options.resultLimitOptions,
+			<select title="Limit qualifying events to" data-bind="options: $component.options.resultLimitOptions,
 			optionsText: function(item) { return item.name },
 			optionsValue: 'id',
 			value: Type">
@@ -200,7 +200,7 @@
 			<ul>
 				<li>
 					<span data-bind="text: ko.i18n('components.cohortExpressionEditor.cohortErasText_1', 'Specify era collapse gap size:')"></span>
-					<span contenteditable="true" class="numericInputField dropdown" data-bind="htmlValue: CollapseSettings.EraPad.numeric(), eventType: 'blur', ko_autocomplete: { value: CollapseSettings.EraPad, source: $component.options.dayOptions, minLength: 0, maxShowItems: 10, scroll: true }" />
+					<span contenteditable="true" title="Number of days" class="numericInputField dropdown" data-bind="htmlValue: CollapseSettings.EraPad.numeric(), eventType: 'blur', ko_autocomplete: { value: CollapseSettings.EraPad, source: $component.options.dayOptions, minLength: 0, maxShowItems: 10, scroll: true }" />
 					<span data-bind="text: ko.i18n('components.cohortExpressionEditor.days', 'days')"></span>
 				</li>
 				<!-- ko if: $component.showCensorWindow -->
diff --git a/js/components/cohortbuilder/components/ConceptSetQuickviewTemplate.html b/js/components/cohortbuilder/components/ConceptSetQuickviewTemplate.html
@@ -9,9 +9,9 @@
 	<tbody data-bind="foreach: conceptSet().expression.items">
 		<tr>
 			<td data-bind="attr:{title: concept.CONCEPT_NAME}"><div style="width:275px; overflow-x: hidden; text-overflow:ellipsis; white-space:nowrap" data-bind="text: concept.CONCEPT_NAME"></div></td>
-			<td><span class="fa fa-check" data-bind="css: {selected: isExcluded}, click: () => isExcluded(!isExcluded())"></span></td>
-			<td><span class="fa fa-check" data-bind="css: {selected: includeDescendants}, click: () => includeDescendants(!includeDescendants())"></span></td>
-			<td><span class="fa fa-check" data-bind="css: {selected: includeMapped}, click: () => includeMapped(!includeMapped())"></span></td>
+			<td><span tabindex="0" class="fa fa-check" data-bind="css: {selected: isExcluded}, click: () => isExcluded(!isExcluded()), event:{ keydown: (item, event) => (event.key === ' ' && event.target.click()) || true }"></span></td>
+			<td><span tabindex="0" class="fa fa-check" data-bind="css: {selected: includeDescendants}, click: () => includeDescendants(!includeDescendants()), event:{ keydown: (item, event) => (event.key === ' ' && event.target.click()) || true }"></span></td>
+			<td><span tabindex="0" class="fa fa-check" data-bind="css: {selected: includeMapped}, click: () => includeMapped(!includeMapped()), event:{ keydown: (item, event) => (event.key === ' ' && event.target.click()) || true }"></span></td>
 		</tr>
 	</tbody>
 </table>
diff --git a/js/components/cohortbuilder/components/ConceptSetSelector.js b/js/components/cohortbuilder/components/ConceptSetSelector.js
@@ -51,7 +51,23 @@ define([
       );
     });
 
-    self.itemClicked = function (item) {
+    self.itemClicked = function (item, event) {
+      // Check for key presses
+      if (event.type === "keydown") {
+        const key = event.key;
+        if (key === "Enter" || key === " ") {
+            event.preventDefault(); // Prevent default behavior
+            event.target.click();  // Simulate a click, which closes the menu
+            return true;
+        } else if (key === "ArrowRight") {
+            event.preventDefault();   
+            const hoverEvent = new Event('mouseover', { bubbles: true });
+            event.target.dispatchEvent(hoverEvent);  // Simulate hover.
+            return true;
+        } else {
+            return true; // Let other keys propagate normally
+        }
+      }
       self.conceptSetId(item.id);
       self.previewVisible(false);
     };
diff --git a/js/components/cohortbuilder/components/ConceptSetSelectorTemplate.html b/js/components/cohortbuilder/components/ConceptSetSelectorTemplate.html
@@ -13,34 +13,36 @@
 
 		<ul class="dropdown-menu dropdown-menu-right"
 			style="height: auto; max-height:200px; width:200px; overflow-x: hidden; padding:4px" role="menu">
-			<li class="dropdown-item" onclick="event.stopPropagation();">
-				<input type="text" style="width:100%; border: solid 1px #9bc1fd; border-radius: 3px"
+			<li class="dropdown-item" onclick="event.stopPropagation();" role="presentation">
+				<input type="text" style="width:100%; border: solid 1px #9bc1fd; border-radius: 3px" role="searchbox"
 					data-bind="attr: {placeholder: ko.i18n('components.conceptSetSelector.searchWithTripleDots', 'Search...')}, textInput: filterText">
 			</li>
 			<!-- ko foreach: filteredConceptSets -->
-			<li class="dropdown-item conceptset" style="cursor:pointer">
+			<li class="dropdown-item conceptset" style="cursor:pointer" role="menuitem" aria-haspopup="true" aria-controls="filtered-conceptset-submenu">
 				<a>
-					<div style="max-width:195px; overflow-x: hidden; text-overflow:ellipsis;"
-						data-bind="text: name, attr:{'title': name}, click: $component.itemClicked"></div>
+					<div style="max-width:195px; overflow-x: hidden; text-overflow:ellipsis;" tabindex="0"
+					    role="button"
+						aria-label="Click/Enter to select concept, hover/Arrow Right to see submenu"
+						data-bind="text: name, attr:{'title': name}, event:{ keydown: $component.itemClicked, click: $component.itemClicked }"></div>
 				</a>
 			</li>
 			<!-- ko if: $component.conceptSetId() != null && $index() == 0  -->
-			<li class="divider"></li>
+			<li class="divider" role="separator"></li>
 			<!-- /ko -->
 			<!-- /ko -->
 			<!-- ko if: filteredConceptSets().length > 1 -->
-			<li class="divider"></li>
+			<li class="divider" role="separator"></li>
 			<!-- /ko -->
-			<li style="cursor:pointer"><a class="conceptset_import">
+			<li style="cursor:pointer" role="menuitem"><a class="conceptset_import">
 					<span data-bind="text:ko.i18n('components.conceptSetSelector.importConcept','Import Concept Set')"></span>
 				</a></li>
-			<li style="cursor:pointer"><a data-bind="click: clear">
+			<li style="cursor:pointer" role="menuitem"><a data-bind="click: clear">
 					<span data-bind="text:ko.i18n('components.conceptSetSelector.clearConceptSet','Clear Concept Set')"></span>
 				</a></li>
 		</ul>
 		<ul>
 			<!-- ko if: previewVisible -->
-			<div onclick="event.stopPropagation();" class="undraggable"
+			<div onclick="event.stopPropagation();" class="undraggable" id="filtered-conceptset-submenu" role="menu" tabindex="0"
 				style="border: solid 1px black;padding:5px; z-index: 999; background-color:white; position: absolute; max-height:200px; overflow-y:auto"
 				data-bind="style: { top: `${previewTop()}px`, left: `${previewLeft()}px`}">
 				<div style="background-color:#aaa; font-weight: bold" data-bind="text: previewConceptSet().name"></div>
diff --git a/js/components/cohortbuilder/components/EndStrategyEditorTemplate.html b/js/components/cohortbuilder/components/EndStrategyEditorTemplate.html
@@ -1,6 +1,6 @@
 <div>
 	<span data-bind="text: ko.i18n('components.endStrategyEditor.eventWillPersistUntil', 'Event will persist until:')"></span> 
-	<select data-bind="options: $component.strategyOptions,
+	<select title="Event will persist until" data-bind="options: $component.strategyOptions,
 		optionsText: function(item) { return item.text },
 		optionsValue: 'name',
 		value: strategyType">
diff --git a/js/components/conceptset/conceptset-editor.js b/js/components/conceptset/conceptset-editor.js
@@ -28,7 +28,7 @@ define([
 			this.canEditCurrentConceptSet = params.canEditCurrentConceptSet;
 			this.commonUtils = commonUtils;
 			this.columns = [
-				{ title: '', orderable: false, render: () => renderers.renderCheckbox('isSelected', this.canEditCurrentConceptSet()) },
+				{ title: ko.i18n('columns.selected', 'Selected'), orderable: false, render: () => renderers.renderCheckbox('isSelected', this.canEditCurrentConceptSet()) },
 				{ title: ko.i18n('columns.conceptId', 'Concept Id'), data: 'concept.CONCEPT_ID'},
 				{ title: ko.i18n('columns.conceptCode', 'Concept Code'), data: 'concept.CONCEPT_CODE'},
 				{ title: ko.i18n('columns.conceptName', 'Concept Name'), render: commonUtils.renderBoundLink},
diff --git a/js/components/conceptset/conceptset-list.less b/js/components/conceptset/conceptset-list.less
@@ -11,8 +11,8 @@
 
   &__conceptset-tabs .tabs__header-title {
     font-size: 1.2rem;
-    background-color: #888;
-    color: #ccc;
+    background-color: #696969;
+    color: #EBEBEB;
   }
 
   &__conceptset-tabs .tabs__header-title--selected {
diff --git a/js/components/modal.html b/js/components/modal.html
@@ -1,4 +1,4 @@
-<div
+<div aria-labelledby="atlas-modal-dialog-title"
 	data-bind="modal: $component.showModal, css: classes({ extra: ['modal', fade() ? 'fade' : ''], modifiers: $component.modifiers })"
 	tabindex="-1" role="dialog">
 	<div class="modal-dialog"
@@ -10,7 +10,7 @@
 						aria-hidden="true">&times;</span></button>
 				<!-- /ko -->
 				<i data-bind="css: $component.iconClass"></i>
-				<div class="modal-title" data-bind="text: $component.title"></div>
+				<div id="atlas-modal-dialog-title" class="modal-title" data-bind="text: $component.title"></div>
 			</div>
 			<div data-bind="if: $component.showModal, css: classes(templateWrapperClass)">
 				<!-- ko if: $component.template -->
diff --git a/js/components/security/access/configure-access-modal.html b/js/components/security/access/configure-access-modal.html
@@ -29,6 +29,7 @@
                 <div class="input-group"
                      data-bind="css: classes({ element: 'new-access-btn-group', extra: ['new-access-btn-group'] })">
                     <input
+                        aria-label="Type part of a role name to trigger auto-complete"
                         class="form-control"
                         data-bind="
                             textInput: writeRoleSearch,
@@ -60,6 +61,7 @@
                 <div class="input-group"
                      data-bind="css: classes({ element: 'new-access-btn-group', extra: ['new-access-btn-group'] })">
                     <input
+                        aria-label="Type part of a role name to trigger auto-complete"
                         class="form-control"
                         data-bind="
                             textInput: readRoleSearch,
diff --git a/js/components/tabs.less b/js/components/tabs.less
@@ -21,8 +21,8 @@
       padding: 5px 12px;
       margin-right: 5px;
       cursor: pointer;
-      color: #ccc;
-      background-color: #888;
+      color: #EBEBEB;
+      background-color: #696969;
       
       &--selected {
         background: #fff;
diff --git a/js/components/terms-and-conditions/terms-and-conditions.html b/js/components/terms-and-conditions/terms-and-conditions.html
@@ -1,7 +1,7 @@
 <script type='template' id='terms-and-conditions-template'>
   <div data-bind="css: classes()">
     <!-- ko if: availableLocales().length > 1 -->
-    <select data-bind="css: classes('locale'), foreach: availableLocales, value: locale">
+    <select title="Select your preferred language" data-bind="css: classes('locale'), foreach: availableLocales, value: locale">
       <option data-bind="value: $data.code, text: $data.name"></option>
     </select>
     <!-- /ko -->
diff --git a/js/components/userbar/user-bar.html b/js/components/userbar/user-bar.html
@@ -8,7 +8,7 @@
 	<!-- for notifications, job completion, etc. -->
 	<div class="user-bar-container">
 		<!-- ko if: availableLocales().length > 1 -->
-		<select data-bind="css: classes('locale'), foreach:availableLocales, value: locale">
+		<select title="Select your preferred language" data-bind="css: classes('locale'), foreach:availableLocales, value: locale">
 			<option data-bind="value: $data.code, text:$data.name"></option>
 		</select>
 		<!-- /ko -->
diff --git a/js/config/terms-and-conditions.less b/js/config/terms-and-conditions.less
@@ -31,4 +31,8 @@
             }
         }
     }
+    // rule for underlining links
+    a {
+        text-decoration: underline;
+    }
 }
diff --git a/js/pages/cohort-definitions/cohort-definition-manager.css b/js/pages/cohort-definitions/cohort-definition-manager.css
@@ -11,33 +11,33 @@
 }
 
 .nav-tabs li span.warning-alarm, .nav-tabs li span.warning-alarm:hover {
-    background-color: #ff001a;
+    background-color: #CC0014;
     color: #e3e3e3;
 }
 
 .nav-tabs li.active span.warning-alarm, .nav-tabs li.active span.warning-alarm:hover {
     color: #fefefe;
-    border-color: #ff001a;
+    border-color: #D10015;
 }
 
 .nav-tabs li span.warning-info, .nav-tabs li span.warning-info:hover {
-    background-color: #337ab7;
+    background-color: #2C679B;
     color: #e3e3e3;
 }
 
 .nav-tabs li.active span.warning-info, .nav-tabs li.active span.warning-info:hover {
     color: #fefefe;
-    border-color: #337ab7;
+    border-color: #2D6A9F;
 }
 
 .nav-tabs li span.warning-warn, .nav-tabs li span.warning-warn:hover {
-    background-color: #d82;
-    color: #e3e3e3;
+    background-color: #A36519;
+    color: #FAFAFA;
 }
 
 .nav-tabs li.active span.warning-warn, .nav-tabs li.active span.warning-warn:hover {
-    color: #fefefe;
-    border-color: #d82;
+    color: #FAFAFA;
+    border-color: #A36519;
 }
 
 .nowrap {
diff --git a/js/pages/cohort-definitions/cohort-definition-manager.html b/js/pages/cohort-definitions/cohort-definition-manager.html
diff --git a/js/pages/cohort-definitions/cohort-definition-manager.js b/js/pages/cohort-definitions/cohort-definition-manager.js
diff --git a/js/pages/home/home.html b/js/pages/home/home.html
diff --git a/js/pages/incidence-rates/ir-manager.less b/js/pages/incidence-rates/ir-manager.less
diff --git a/js/styles/atlas.css b/js/styles/atlas.css
diff --git a/js/styles/bootstrap.min.css b/js/styles/bootstrap.min.css
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,15 +1,15 @@`
`1`	`1`	`.warnings-badge {`
`2`	`2`	`display: inline-block;`
`3`	`3`	`span {`
`4`		`- color: #e3e3e3;`
	`4`	`+ color: #FAFAFA;`
`5`	`5`	`&.warning-alarm {`
`6`		`- background-color: #ff001a;`
	`6`	`+ background-color: #E60017;`
`7`	`7`	`}`
`8`	`8`	`&.warning-info {`
`9`		`- background-color: #337ab7;`
	`9`	`+ background-color: #3174AF;`
`10`	`10`	`}`
`11`	`11`	`&.warning-warn {`
`12`		`- background-color: #d82;`
	`12`	`+ background-color: #A36519;`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`	`}`
Original file line number	Diff line number	Diff line change
`@@ -11,8 +11,8 @@`
`11`	`11`
`12`	`12`	`&__conceptset-tabs .tabs__header-title {`
`13`	`13`	`font-size: 1.2rem;`
`14`		`- background-color: #888;`
`15`		`- color: #ccc;`
	`14`	`+ background-color: #696969;`
	`15`	`+ color: #EBEBEB;`
`16`	`16`	`}`
`17`	`17`
`18`	`18`	`&__conceptset-tabs .tabs__header-title--selected {`