fix: fix accessibility/508 issues in cohort-characterization

uc-cdis · Feb 18, 2025 · bec352f · bec352f
1 parent b595e63
commit bec352f
Show file tree

Hide file tree

Showing 16 changed files with 25 additions and 25 deletions.
diff --git a/js/components/cohortbuilder/components/CriteriaGroupTemplate.html b/js/components/cohortbuilder/components/CriteriaGroupTemplate.html
@@ -25,7 +25,7 @@
 							<span data-bind="text: ko.i18n('components.criteriaGroup.having','having')"></span>
 						</span>
 
-						<select
+						<select aria-label="Select option for 'having'"
 							data-bind="options: $component.options.groupTypeOptions, optionsText: 'name', optionsValue: 'id', value: group().Type"></select>
 						<!-- ko if: group().Type().startsWith("AT_") -->
 						<span contenteditable="true" class="numericInputField dropdown"

diff --git a/js/components/conceptAddBox/concept-add-box.html b/js/components/conceptAddBox/concept-add-box.html
@@ -1,4 +1,4 @@
-<div class="row concept-add-box-container">
+<div class="row concept-add-box-container" data-bind="visible: !isDisabled()">
   <!-- ko if: canSelectSource -->
     <!-- ko if: hasActiveConceptSets() -->
     <div class="concept-set-dropdown-container">

diff --git a/js/components/conceptset/expression.html b/js/components/conceptset/expression.html
@@ -15,7 +15,7 @@
                 class="btn btn-sm btn-danger"
                 data-bind="
                     click:function() { $component.deleteConcepts(); }, 
-                    css: { disabled: conceptsForRemovalLength() === 0 || !canEdit() },
+                    visible: conceptsForRemovalLength() > 0 && canEdit(),
                     text: ko.i18n('components.conceptSet.removeSelected', 'Remove Selected')"
             ></button>
         </span>

diff --git a/js/components/conceptset/import/sourcecodes.js b/js/components/conceptset/import/sourcecodes.js
@@ -33,7 +33,7 @@ define([
 			this.doImport = this.doImport.bind(this);
 
 			this.searchColumns = [{
-				title: '',
+				title: 'Select',
 				render: (s, p, d) => {
 					return '<span data-bind="click: function(d) { d.isSelected(!d.isSelected()) } ,css: { selected: isSelected} " class="fa fa-check"></span>';
 				},

diff --git a/js/components/conceptset/utils.js b/js/components/conceptset/utils.js
@@ -18,7 +18,7 @@ define(['knockout','utils/CommonUtils', 'utils/Renderers', 'services/http','atla
 
 	const getRecommendedConceptColumns = (sharedState, context, selectAllFn) => [
 		{
-			title: '',
+			title: 'Select',
 			orderable: false,
 			searchable: false,
 			className: 'text-center',

diff --git a/js/components/dataSourceSelect.html b/js/components/dataSourceSelect.html
@@ -2,7 +2,7 @@
     <i data-bind="attr: { class: recordCountClass }" aria-hidden="true">
     </i>
     <span data-bind="text: ko.i18n('search.viewCountMessage', 'View record counts for:')"></span>
-    <select data-bind="
+    <select aria-label="Select data source" data-bind="
           options: resultSources,
           optionsText: 'sourceName',
           optionsValue: 'sourceId',

diff --git a/js/const.js b/js/const.js
@@ -100,12 +100,12 @@ define([
 				},
 				nameCol,
 				... context.isEditPermitted() ? [{
-					title: '',
+					title: 'Actions (edit)',
 					render: context.getEditCell('editCohort'),
 					className: context.classes('col-cohort-edit'),
 				},
 					{
-						title: '',
+						title: 'Actions (remove)',
 						render: context.getRemoveCell('removeCohort'),
 						className: context.classes('col-cohort-remove'),
 					}] : []
@@ -114,7 +114,7 @@ define([
 
 		const getRelatedSourcecodesColumns = (sharedState, context, selectAllFn) => [
 			{
-				title: '',
+				title: 'Select',
 				orderable: false,
 				searchable: false,
 				className: 'text-center',

diff --git a/js/pages/characterizations/components/characterizations/characterization-view-edit.html b/js/pages/characterizations/components/characterizations/characterization-view-edit.html
@@ -9,7 +9,7 @@
     <!-- /ko -->
     <div class="asset-heading">
         <div class="input-group">
-            <input type="text" class="form-control" data-bind="css: {emptyInput: !isNameFilled()}, attr: { disabled: isEditPermitted() ? null : true }, textInput: design().name" />
+            <input aria-label="Characterization name" type="text" class="form-control" data-bind="css: {emptyInput: !isNameFilled()}, attr: { disabled: isEditPermitted() ? null : true }, textInput: design().name" />
             <div class="input-group-btn">
                 <button type="button" class="btn btn-success" data-bind="click: save, css: {disabled:!isSavePermitted() || isProcessing() }, attr: {title: !previewVersion() ? ko.i18n('common.save', 'Save') : ko.i18n('common.saveAsCurrentVersion', 'Save as current version')}"><i class="fa fa-save"></i></button>
                 <button class="btn btn-primary"
@@ -27,7 +27,7 @@
                 </button>
 		<!-- /ko -->
 
-		<button type="button" class="btn btn-danger"  data-bind="visible: !previewVersion(), click: deleteCc, css: {disabled: !$component.isDeletePermitted() || isProcessing() }"><i class="fa fa-trash-alt"></i></button>
+		<button type="button" class="btn btn-danger" data-bind="title: ko.i18n('common.delete', 'Delete'), visible: !previewVersion(), click: deleteCc, css: {disabled: !$component.isDeletePermitted() || isProcessing() }"><i class="fa fa-trash-alt"></i></button>
                 <!-- /ko -->
             </div>
         </div>

diff --git a/...tions/components/characterizations/characterization-view-edit/characterization-utils.html b/...tions/components/characterizations/characterization-view-edit/characterization-utils.html
@@ -3,14 +3,14 @@
 <div data-bind="css: classes(), visible: !loading()">
     <h2 data-bind="css: classes('title'), text: ko.i18n('cc.viewEdit.utilities.title', 'Utilities')" >
     </h2>
-    <ul data-bind="css: classes({ element: 'nav', extra: 'nav nav-pills' })">
+    <ul role="tablist" data-bind="css: classes({ element: 'nav', extra: 'nav nav-pills' })">
         <li role="presentation"
             data-bind="css: classes({ element: 'nav-pill', extra: mode() == MODE_JSON ? 'active' : null }), click: setMode.bind(null, MODE_JSON)">
-            <a data-bind="text: ko.i18n('common.export', 'Export')"></a>
+            <a role="tab" data-bind="text: ko.i18n('common.export', 'Export')"></a>
         </li>
         <li role="presentation"
             data-bind="css: classes({ element: 'nav-pill', extra: mode() == MODE_IMPORT ? 'active' : null }), click: setMode.bind(null, MODE_IMPORT)">
-            <a data-bind="text: ko.i18n('common.import', 'Import')"></a>
+            <a role="tab" data-bind="text: ko.i18n('common.import', 'Import')"></a>
         </li>
     </ul>
     <div data-bind="if: mode() == MODE_JSON, css: classes('content')">

diff --git a/js/pages/characterizations/components/feature-analyses/fa-view-edit/fa-design.html b/js/pages/characterizations/components/feature-analyses/fa-view-edit/fa-design.html
@@ -4,21 +4,21 @@
         <div class="panel-heading" data-bind="text: ko.i18n('cc.fa.description', 'Description')"></div>
         <div data-bind="css: classes({ element: 'descr-panel-body' })">
             <!-- ko if: $component.canEdit() -->
-            <multi-select
+            <multi-select aria-label="Select domain"
                     data-bind="css: classes('domain-selector')"
                     params="options: $component.domains, selectedValue: $component.data() && $component.data().domain, multiple: false"
             ></multi-select>
             <!-- /ko -->
             <!-- ko if: !$component.canEdit() -->
-            <div data-bind="css: classes('read-only-domain-info')">
+            <div data-bind="css: classes('read-only-domain-info')" aria-label="Selected domain">
                 <b data-bind="text: ko.i18n('cc.fa.domain', 'Domain:')"></b> <span data-bind="text: ($component.domains().find(o => o.value === $component.data().domain()) || {}).label"></span>
             </div>
             <!-- /ko -->
             <textarea data-bind="
                     css: classes({ element: 'descr', extra: 'form-control' }),
                     attr: { disabled: $component.canEdit() ? null : true },
                     textInput: $component.data().descr
-                "></textarea>
+                " aria-label="Feature analysis description"></textarea>
         </div>
     </div>
 
@@ -74,7 +74,7 @@
                 <div data-bind="css: classes({extra: 'panel panel-primary'})">
                     <div data-bind="css: classes({ extra: 'panel-heading' }), text: ko.i18n('cc.fa.analysisType', 'Analysis type:')"></div>
                     <div data-bind="css: classes('stat-type-selector')">
-                        <multi-select
+                        <multi-select aria-label="Select analysis type"
                                 data-bind="css: classes()"
                                 params="options: $component.statTypeOptions,
                                 selectedValue: $component.data().statType, multiple: false"></multi-select>

diff --git a/js/pages/characterizations/components/tabbed-grid.html b/js/pages/characterizations/components/tabbed-grid.html
@@ -2,10 +2,10 @@
 
 
 <div data-bind="css: classes({ element: 'toolbar' })">
-    <ul data-bind="css: classes({ element: 'toolbar-nav', extra: 'nav nav-tabs' })">
+    <ul data-bind="css: classes({ element: 'toolbar-nav', extra: 'nav nav-tabs' })" role="tablist">
         <!-- ko foreach: $component.tabs -->
             <li role="presentation" data-bind="css: $component.classes({ element: 'toolbar-nav-pill', extra: $data.value === $component.activeTab ? 'active' : '' })">
-                <a data-bind="attr: { href: $data.link }, text: $data.tabLabel"></a>
+                <a data-bind="attr: { href: $data.link }, text: $data.tabLabel" role="tab"></a>
             </li>
         <!-- /ko -->
     </ul>

diff --git a/js/pages/concept-sets/components/concept/components/tabs/concept-hierarchy.js b/js/pages/concept-sets/components/concept/components/tabs/concept-hierarchy.js
@@ -38,7 +38,7 @@ define([
 			this.isLoading =  ko.observable(false);
 
 			this.relatedConceptsColumns = [{
-				title: '',
+				title: 'Select',
 				render: () => renderers.renderCheckbox('isSelected'),
 				orderable: false,
 				searchable: false,

diff --git a/js/pages/concept-sets/components/concept/components/tabs/concept-related.js b/js/pages/concept-sets/components/concept/components/tabs/concept-related.js
@@ -91,7 +91,7 @@ define([
 			};
 
 			this.relatedConceptsColumns = [{
-				title: '',
+				title: 'Select',
 				render: () => renderers.renderCheckbox('isSelected'),
 				orderable: false,
 				searchable: false,

diff --git a/js/pages/concept-sets/components/tabs/conceptset-expression.html b/js/pages/concept-sets/components/tabs/conceptset-expression.html
@@ -91,7 +91,7 @@
         class="btn btn-danger btn-sm"
         data-bind="
           click: removeConceptsFromConceptSet,
-          css: { disabled: conceptsForRemovalLength() === 0 },
+          visible: conceptsForRemovalLength() > 0,
           text: ko.i18n('components.conceptSet.removeSelected', 'Remove Selected'),
         "
       ></button>

diff --git a/js/pages/vocabulary/components/search.js b/js/pages/vocabulary/components/search.js
@@ -148,7 +148,7 @@ define([
 				return `<div style="white-space: nowrap" title="${c.tooltip()}"><i id="${c.elementId}" class="fa ${c.icon}"></i> ${c.title()}</div>`
 			};
 			this.searchColumns = [{
-				title: '',
+				title: 'Select',
 				render: (s, p, d) => this.renderCheckbox('isSelected'),
 				orderable: false,
 				searchable: false,

diff --git a/js/styles/atlas.css b/js/styles/atlas.css
@@ -225,7 +225,7 @@ textarea {
 }
 
 pre span.key {
-  color: #428bca;
+  color: #2D6A9F;
 }
 
 #wrapperConceptDetails td {