Keystone/release 1.2.0

arches/app/media/css/accessibility.css

@@ -120,11 +120,18 @@ a:focus,
 .account-tips,
 .hover-feature-metadata,
 .pagination > li > a.disabled,
+.pagination .disabled > a,
+.pagination .disabled > a:hover,
 .graph-designer-header,
 .graph-type {
     color: #595959;
 }
 
+.pagination .disabled > a,
+.pagination .disabled > a:hover {
+    opacity: 1;
+}
+
 .btn-profile-password {
     color: #1b4f7d;
 }

arches/app/media/css/arches.scss

@@ -22,6 +22,36 @@
 @import url(../packages/@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css);
 @import url(../packages/leaflet.fullscreen/Control.FullScreen.css);
 
+
+//adds heading tag classes to help with styling Can be removed from 7.5 onwards
+.h1 {
+    font-size: 34px
+}
+
+.h2 {
+    font-size: 28px
+}
+
+.h3 {
+    font-size: 22px
+}
+
+.h4 {
+    font-size: 16px
+}
+
+.h5 {
+    font-size: 12px
+}
+
+.h6 {
+    font-size: 10px
+}
+
+.h1,.h2,.h3,.h4,.h5,.h6 {
+    font-weight: 600
+}
+
 #skip-link-holder a, #skip-link-holder a:link, #skip-link-holder a:visited {
     color: #000;
     background-color: #fae619;
@@ -11725,6 +11755,10 @@ table.table.dataTable {
 .search-export .instruction {
     font-size: 15px;
 }
+.search-export-instruction-h2 {
+    font-size: 15px;
+    margin-top: 5px;
+}
 
 .search-export .instruction h2 {
     font-size: 15px;

arches/app/media/js/views/base-manager.js

@@ -9,7 +9,7 @@ define([
     'core-js',
     'dom-4',
     'views/components/language-switcher'
-], function($, _, ko, Backbone, PageView, data) {
+], function ($, _, ko, Backbone, PageView, data) {
 
     var BaseManager = PageView.extend({
         /**
@@ -30,51 +30,68 @@ define([
             data.graphs.sort(function (left, right) {
                 return left.name.toLowerCase() == right.name.toLowerCase() ? 0 : (left.name.toLowerCase() < right.name.toLowerCase() ? -1 : 1);
             });
-            data.graphs.forEach(function(graph){
-              graph.name = ko.observable(graph.name);
-              graph.iconclass = ko.observable(graph.iconclass);
+            data.graphs.forEach(function (graph) {
+                graph.name = ko.observable(graph.name);
+                graph.iconclass = ko.observable(graph.iconclass);
             });
             options.viewModel.allGraphs = ko.observableArray(data.graphs);
-            options.viewModel.graphs = ko.computed(function() {
-                return ko.utils.arrayFilter(options.viewModel.allGraphs(), function(graph) {
+            options.viewModel.graphs = ko.computed(function () {
+                return ko.utils.arrayFilter(options.viewModel.allGraphs(), function (graph) {
                     return !graph.isresource;
                 });
             });
-            options.viewModel.resources = ko.computed(function() {
-                return  ko.utils.arrayFilter(options.viewModel.allGraphs(), function(graph) {
+            options.viewModel.resources = ko.computed(function () {
+                return ko.utils.arrayFilter(options.viewModel.allGraphs(), function (graph) {
                     return graph.isresource;
                 });
             });
             options.viewModel.createableResources = ko.observableArray(data.createableResources);
             options.viewModel.userCanReadResources = data.userCanReadResources;
             options.viewModel.userCanEditResources = data.userCanEditResources;
 
-            options.viewModel.setResourceOptionDisable = function(option, item) {
-              if (item) {
-                ko.applyBindingsToNode(option, {disable: item.disable_instance_creation}, item);
-              }
+            options.viewModel.setResourceOptionDisable = function (option, item) {
+                if (item) {
+                    ko.applyBindingsToNode(option, { disable: item.disable_instance_creation }, item);
+                }
             };
 
             options.viewModel.navExpanded = ko.observable(false);
             options.viewModel.navExpanded.subscribe(function () {
                 window.nifty.window.trigger('resize');
             });
 
-            options.viewModel.inSearch = ko.pureComputed(function() {
+            options.viewModel.inSearch = ko.pureComputed(function () {
                 return window.location.pathname === "/search" || window.location.pathname === "/plugins/c8261a41-a409-4e45-b049-c925c28a57da";
             });
 
-            // Register binding of onEnterkeyClick. e.g. <div data-bind="onEnterkeyClick"> </div>
+            // Shared function to handle key press events
+            function handleKeyPress(element, event, keyCodes) {
+                var pressedKeyCode = (event.which ? event.which : event.keyCode);
+                if (keyCodes.includes(pressedKeyCode)) {
+                    $(element).click();
+                }
+                return true; // Allow default action
+            }
+
+            // Helper function to initialize key press binding
+            function initKeyPressBinding(element, valueAccessor, keyCodes) {
+                ko.utils.unwrapObservable(valueAccessor());
+                $(element).keypress(function (event) {
+                    handleKeyPress(element, event, keyCodes);
+                });
+            }
+
+            // Binding handler for Enter key
             ko.bindingHandlers.onEnterkeyClick = {
                 init: function (element, valueAccessor) {
-                    ko.utils.unwrapObservable(valueAccessor()); // Unwrap to get subscription.
-                    $(element).keypress(function (event) {
-                        var keyCode = (event.which ? event.which : event.keyCode);
-                        if (keyCode === 13) {   // Check if keypress is <enter>.
-                            $(element).click();
-                        }
-                        return true;    // Allow default action.
-                    });
+                    initKeyPressBinding(element, valueAccessor, [13]); // 13 is the key code for Enter
+                }
+            };
+
+            // Binding handler for Space key
+            ko.bindingHandlers.onSpaceClick = {
+                init: function (element, valueAccessor) {
+                    initKeyPressBinding(element, valueAccessor, [32]); // 32 is the key code for Space
                 }
             };
 

arches/app/templates/base-manager.htm

@@ -7,7 +7,7 @@
 
     <div class="wrapper">
 
-        <div id="skip-link-holder"><a id="skip-link" tabindex="1" href="#skiptocontent">Skip to content</a></div>
+        <div id="skip-link-holder"><a id="skip-link" href="#skiptocontent">Skip to content</a></div>
 
         <div id="container" class="effect aside-left aside-bright navbar-fixed mainnav-sm" data-bind="css: {'mainnav-in': tabsActive() && showTabs(), 'mainnav-sm': !navExpanded(), 'mainnav-lg': navExpanded()}">
 

arches/app/templates/views/components/search/advanced-search.htm

@@ -5,7 +5,7 @@
     <div class="facets-container" style="">
         <div class="list-group search-facets">
             <div class="search-facet-item header">
-                <h4 class="search-facet-item-heading">{% trans "Search Facets" %}</h4>
+                <p class="search-facet-item-heading h4">{% trans "Search Facets" %}</p>
                 <div class="list-filter relative">
                     <input type="text" class="form-control" placeholder="{% trans "Find ..." %}" aria-label="{% trans "Find search facets" %}" data-bind="value: facetFilterText, valueUpdate: 'keyup'">
                     <!-- Clear Filter -->
@@ -15,23 +15,28 @@ <h4 class="search-facet-item-heading">{% trans "Search Facets" %}</h4>
             </div>
             <!-- ko foreach: searchableGraphs -->
             <!-- ko if: cards().length > 0  -->
-            <div class="search-facet-item disabled">
-                <h4 class="search-facet-item-heading" data-bind="click: function () { collapsed(!collapsed()) }">
+            <!-- ko let: {uid: Math.random().toString()} -->
+            <div tabindex="0" role="button" class="search-facet-item disabled" data-bind="onEnterkeyClick, onSpaceClick, click: function () { collapsed(!collapsed()) }, attr: {
+                        'aria-expanded': (!collapsed()).toString(),
+                        'aria-controls': uid,
+                        'aria-label': name + ' graph facets',
+                    }">
+                <div class="search-facet-item-heading h4" >
                     <strong data-bind="text: name"></strong>
                     <span><i class="fa report-expander print-hide"
                             data-bind="css: {'fa-angle-down': !collapsed(), 'fa-angle-right': collapsed()}"></i></span>
-                </h4>
+                </div>
             </div>
-            <div data-bind="visible: !collapsed()">
+            <div data-bind="visible: !collapsed()" role="list" data-bind="attr: {id: uid }">
                 <!-- ko foreach: cards -->
-                <a href="#" class="search-facet-item" data-bind="click: addFacet">
-                    <h4 class="search-facet-item-heading" data-bind="text: name"></h4>
-                    <p class="list-group-item-text"></p>
+                <a href="#" role="button" data-bind="click: addFacet, attr: {'aria-label': 'Add ' + name + ' facet to advanced search'}" class="search-facet-item">
+                    <p data-bind="text: name"></p>
                 </a>
                 <!-- /ko -->
             </div>
             <!-- /ko -->
             <!-- /ko -->
+            <!-- /ko -->
         </div>
     </div>
     <div class="facets-search-container" style="">

arches/app/templates/views/components/search/search-export.htm

@@ -6,30 +6,32 @@
 
     <div class="search-export">
         <div class="instruction">
-            <h2> {% trans "1. Format" %} </h2>
+            <div class="search-export-instruction-h2 h2">
+                <span> {% trans "1. Format" %} </span>
+            </div>
             <p class="container-fluid small">
                 {% trans "Select the format you'd like for your export data. (tile excel and geojson formats require a resource type filter)" %}
             </p>
         </div>
         <div class="parameter">
-            <div>
-                <label data-bind="css: { 'active': format() === 'tilecsv' }, click: function () { format('tilecsv') }" class="form-radio form-normal form-text">
+            <div role="radiogroup">
+                <label role="radio" data-bind="css: { 'active': format() === 'tilecsv' }, click: function () { format('tilecsv') }" class="form-radio form-normal form-text">
                     <input type="radio" name="stat-w-label" data-bind="checked: format() === 'tilecsv'" value="true"> {% trans "csv" %}
                 </label>
                 <!-- ko if: hasExportHtmlTemplates() -->
-                <label data-bind="css: { 'active': format() === 'html', 'disabled': (celeryRunning() !== 'True' && total() > {{app_settings.SEARCH_EXPORT_IMMEDIATE_DOWNLOAD_THRESHOLD_HTML_FORMAT}}) }, click: function () { if((celeryRunning() === 'True' || total() <= {{app_settings.SEARCH_EXPORT_IMMEDIATE_DOWNLOAD_THRESHOLD_HTML_FORMAT}})) {format('html')} }" class="form-radio form-normal form-text">
+                <label role="radio" data-bind="css: { 'active': format() === 'html', 'disabled': (celeryRunning() !== 'True' && total() > {{app_settings.SEARCH_EXPORT_IMMEDIATE_DOWNLOAD_THRESHOLD_HTML_FORMAT}}) }, click: function () { if((celeryRunning() === 'True' || total() <= {{app_settings.SEARCH_EXPORT_IMMEDIATE_DOWNLOAD_THRESHOLD_HTML_FORMAT}})) {format('html')} }" class="form-radio form-normal form-text">
                     <input type="radio" name="stat-w-label" data-bind="checked: format() === 'html'" value="false"> {% trans "html" %}
                 </label>
                 <!-- /ko -->
-                <label data-bind="css: { 'active': format() === 'shp' }, click: function () { format('shp') }" class="form-radio form-normal form-text">
+                <label role="radio" data-bind="css: { 'active': format() === 'shp' }, click: function () { format('shp') }" class="form-radio form-normal form-text">
                     <input type="radio" name="stat-w-label" data-bind="checked: format() === 'shp'" value="false"> {% trans "shapefile" %}
                 </label>
 
-                <label data-bind="css: { 'active': format() === 'tilexl', 'disabled': !hasResourceTypeFilter() }, click: function () { if (hasResourceTypeFilter()) {format('tilexl')} }" class="form-radio form-normal form-text">
+                <label role="radio" data-bind="css: { 'active': format() === 'tilexl', 'disabled': !hasResourceTypeFilter() }, click: function () { if (hasResourceTypeFilter()) {format('tilexl')} }" class="form-radio form-normal form-text">
                     <input type="radio" name="stat-w-label" data-bind="checked: format() === 'tilexl'" value="false"> {% trans "tile excel" %}
                 </label>
                 <!-- ko if: total() < {{app_settings.SEARCH_EXPORT_IMMEDIATE_DOWNLOAD_THRESHOLD}} -->
-                <label data-bind="css: { 'active': format() === 'geojson', 'disabled': !hasResourceTypeFilter()}, click: function () { if (hasResourceTypeFilter()) {format('geojson')} }" class="form-radio form-normal form-text">
+                <label role="radio" data-bind="css: { 'active': format() === 'geojson', 'disabled': !hasResourceTypeFilter()}, click: function () { if (hasResourceTypeFilter()) {format('geojson')} }" class="form-radio form-normal form-text">
                     <input type="radio" name="stat-w-label" data-bind="checked: format() === 'geojson'" value="false"> {% trans "geojson url" %}
                 </label>
                 <!-- ko if: format() === 'geojson' && hasResourceTypeFilter -->
@@ -43,7 +45,9 @@ <h2> {% trans "1. Format" %} </h2>
         </div>
 
         <div class="instruction">
-            <h2> {% trans "2. Coordinate Precision" %} </h2>
+            <div class="search-export-instruction-h2 h2">
+                <span> {% trans "2. Coordinate Precision" %} </span>
+            </div>
             <p class="container-fluid small">
                 {% trans "Tell us how many decimal places of precision you'd like for geo-data results" %} 
             </p>
@@ -53,7 +57,9 @@ <h2> {% trans "2. Coordinate Precision" %} </h2>
         </div>
 
         <div class="instruction">
-            <h2> {% trans "3. Report Link" %} </h2>
+            <div class="search-export-instruction-h2 h2">
+                <span> {% trans "3. Report Link" %} </span>
+            </div>
             <p class="container-fluid small">
                 {% trans "Only applicable to CSV and shapefile exports" %} 
             </p>
@@ -64,15 +70,19 @@ <h2> {% trans "3. Report Link" %} </h2>
         <!-- ko if: ((total() > {{app_settings.SEARCH_EXPORT_IMMEDIATE_DOWNLOAD_THRESHOLD}} && celeryRunning() === "True") || (format() === "html" && total() > {{app_settings.SEARCH_EXPORT_IMMEDIATE_DOWNLOAD_THRESHOLD_HTML_FORMAT}} && celeryRunning() === "True")) && ("{{app_settings.RESTRICT_CELERY_EXPORT_FOR_ANONYMOUS_USER}}" === "False" || "{{app_settings.RESTRICT_CELERY_EXPORT_FOR_ANONYMOUS_USER}}" === "True" && "{{user.username}}" !== "anonymous")-->
         <div>
             <div class="instruction">
-                <h2>{% trans "4. Name this export" %}</h2>
+                <div class="search-export-instruction-h2 h2">
+                    <span> {% trans "4. Name this export" %} </span>
+                </div>
             </div>
             <div class="parameter">
                 <input type="" class="form-control input-md widget-input" data-bind="textInput: exportName" placeholder="Arches Export" aria-label="Name of arches export"></input>
             </div>
         </div>
         <div>
             <div class="instruction">
-                <h2> {% trans "5. Email Address" %} </h2>
+                <div class="search-export-instruction-h2 h2">
+                    <span> {% trans "5. Email Address" %} </span>
+                </div>
                 <p class="container-fluid small">
                     {% trans "This download may take some time.  Tell us where to email a download link to your results" %}
                 </p>

arches/app/templates/views/components/search/search-results.htm

@@ -5,7 +5,7 @@
 <div id="search-results-list" data-bind="foreach: results, visible: true" style="display: none;">
 
     <div class="search-listing" data-bind="event: { mouseover: mouseoverInstance, mouseout: mouseoverInstance('')}, css: {'selected': selected()}">
-        <h3 class="search-listing-title"><a class="search-candidate-title" href="" data-bind="click: $parent.viewReport.bind($parent)"><i class="search-listing-icon" data-bind="css: iconclass"></i> <span data-bind="text: displayname"></span></a></h3>
+        <p class="search-listing-title"><a class="search-candidate-title" href="" data-bind="click: $parent.viewReport.bind($parent)"><i class="search-listing-icon" data-bind="css: iconclass"></i> <span data-bind="text: displayname"></span></a></p>
 
         <div class="search-listing-body" data-bind="html: displaydescription">
         </div>

arches/app/templates/views/components/search/time-filter.htm

@@ -14,7 +14,7 @@
 
         <!-- Date Type -->
         <div class="calendar picker">
-            <h3 class="search-label">{% trans "Type" %}</h3>
+            <p class="search-label h3">{% trans "Type" %}</p>
             <select id="" class="resources" data-placeholder="Date type" tabindex="-1" data-bind="value: filter.dateNodeId, chosen:{ width: '100%' }, attr: {id:dateDropdownEleId} ">
                 <option value="">{% trans "Search all dates" %}</option>
                 <!-- ko foreach: { data: graph_models, as: 'graph' } -->
@@ -31,7 +31,7 @@ <h3 class="search-label">{% trans "Type" %}</h3>
 
         <!-- Date Selector -->
         <div class="calendar picker">
-            <h3 class="search-label">{% trans "Within" %}</h3>
+            <p class="search-label h3">{% trans "Within" %}</p>
             <select id="" class="resources" placeholder="Select" tabindex="-1" data-bind="value: dateRangeType, chosen:{ width: '100%' }">
                 <option value="custom">{% trans "Custom date range" %}</option>
                 <option value="today">{% trans "Today" %}</option>
@@ -49,22 +49,22 @@ <h3 class="search-label">{% trans "Within" %}</h3>
     <div id="calendar">
         <!-- From Date -->
         <div class="calendar picker">
-            <h3 class="search-label">{% trans "From" %}</h3>
+            <p class="search-label h3">{% trans "From" %}</p>
             <div id="search-from-c" class="hide-datepicker-time-option">
                 <input placeholder="" class="form-control input-md" data-bind="value: filter.fromDate, datepicker: {format: format, keepInvalid: true}, attr:{'placeholder': format}, disable: dateRangeType() !== 'custom'" aria-label="Start date">
             </div>
         </div>
 
         <!-- To Date -->
         <div class="calendar picker">
-            <h3 class="search-label">{% trans "To" %}</h3>
+            <p class="search-label h3">{% trans "To" %}</p>
             <div id="search-from-b" class="hide-datepicker-time-option">
                 <input placeholder="" class="form-control input-md" data-bind="value: filter.toDate, datepicker: {format: format, keepInvalid: true}, attr:{'placeholder': format}, disable: dateRangeType() !== 'custom'" aria-label="End date">
             </div>
         </div>
     </div>
 
-    <h3 class="time-wheel-title">{% trans "Time Wheel" %}</h3>
+    <p class="time-wheel-title h3">{% trans "Time Wheel" %}</p>
     <div class="time-wheel-instructions">{% trans "(Click on a block to set a filter, double-click to zoom in, double-click center to zoom out)" %}</div>
     <hr class="title-underline"><div class="sequence" data-bind="visible: loading">{% trans 'Loading time wheel...' %}</div>
     <div class="time-wheel-wrap relative" data-bind="timeWheel: { config: wheelConfig, selectedPeriod: selectedPeriod, breadCrumb: breadCrumb}, css:{'time-wheel-loading-mask': loading}">

arches/app/templates/views/search.htm

@@ -37,7 +37,7 @@
                     <div class="col-xs-6">
                         <!-- Result Count and ordering Block -->
                         <div class="search-count-container">
-                            <h3 class="search-title" data-bind="text: '{% trans 'Results: ' %}' + total()"></h3>
+                            <span class="search-title" data-bind="text: '{% trans 'Results: ' %}' + total()"></span>
                         </div>
                     </div>
                     <div class="col-xs-6">