Merge pull request #25 from slub/accessibility-improvements

Accessibility improvements, query parameter adjustments and tile preloading configuration
slub · Mar 24, 2022 · da73143 · da73143
2 parents 5aa61df + b6e4fbd
commit da73143
Show file tree

Hide file tree

Showing 53 changed files with 468 additions and 248 deletions.
diff --git a/Build/src/SettingsProvider.js b/Build/src/SettingsProvider.js
@@ -27,6 +27,7 @@ let settingsObject = {
             tileSize: 512,
         },
     ],
+    ENABLE_TILE_PRELOADING: false,
     LANGUAGE_CODE: "en",
 };
 
@@ -86,6 +87,14 @@ export default {
         );
     },
 
+    /**
+     * Returns the 3d preloading state from the settings object
+     * @return {*}
+     */
+    getIsTilePreloadingEnabled() {
+        return settingsObject.ENABLE_TILE_PRELOADING === 1;
+    },
+
     /**
      * Returns the language dictionary.
      * @returns {Object}

diff --git a/Build/src/_sass/overwrites-openlayers.scss b/Build/src/_sass/overwrites-openlayers.scss
@@ -21,7 +21,6 @@
 .ol-attribution,
 .ol-scale-line-inner,
 .ol-has-tooltip [role="tooltip"] {
-    font-family: Helvetica, Arial, sans-serif;
     border-radius: 0;
 }
 
@@ -30,7 +29,11 @@
     border-radius: 0;
     color: $primary-color;
     display: none;
-    font-family: Helvetica, Arial, sans-serif;
+}
+
+.ol-scale-line-inner {
+    font-size: 11px;
+    font-weight: 700;
 }
 
 .ol-attribution.ol-uncollapsible {
@@ -41,6 +44,8 @@
     border-radius: 0;
     background: rgba($secondary-color-dark, 0.6);
     color: white;
+    font-size: 11px;
+    line-height: 1.2;
 
     #popover-toggle {
         display: none;
@@ -59,7 +64,7 @@
 
         a {
             color: white;
-            font-size: 10px;
+            font-size: 11px;
             font-weight: normal;
             margin: 0 3px;
 
@@ -98,12 +103,26 @@
         }
     }
 
+    &.ol-zoom {
+        button {
+            color: transparent;
+            background-size: 18px auto;
+
+            &.ol-zoom-in {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTkuNTUyIDE5LjI1NHYtNi44NDhIMi43NTRWOS41NDNoNi43OThWMi43NDZoMi44OTZ2Ni43OTdoNi43OTh2Mi44NjNoLTYuNzk4djYuODQ4SDkuNTUyWiIgc3R5bGU9ImZpbGw6I2ZmZiIvPjwvc3ZnPg==");
+            }
+
+            &.ol-zoom-out {
+                background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyIj48cGF0aCBkPSJNMTkuMjQ2IDEyLjQwNkgyLjc1NFY5LjU0M2gxNi40OTJ2Mi44NjNaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvIi8+PC9zdmc+");
+            }
+        }
+    }
+
     &.rotate-north button .ol-compass {
         width: 22px;
         height: 22px;
         color: transparent;
-        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjIgMjIiPjxwYXRoIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBkPSJNMTAuOCAxOC4zbC0zLjMtNyAzLjMtNyAzLjMgN3oiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTJsLTMuMy03LTMuMyA3eiIvPjwvc3ZnPg==")
-            no-repeat center center;
+        background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjIgMjIiPjxwYXRoIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBkPSJNMTAuOCAxOC4zbC0zLjMtNyAzLjMtNyAzLjMgN3oiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTJsLTMuMy03LTMuMyA3eiIvPjwvc3ZnPg==") no-repeat center center;
         background-size: 22px auto;
         display: block;
     }
@@ -146,8 +165,7 @@
     }
 
     &.image-manipulation button {
-        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIj48Zz48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBkPSJNNSA0djE0TTE3IDR2MTRNMTEgNHYxNCIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zIDZoNHYyaC00ek05IDE0aDR2MmgtNHpNMTUgMTBoNHYyaC00eiIvPjwvZz48L3N2Zz4=)
-            no-repeat #00b19e;
+        background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIj48Zz48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBkPSJNNSA0djE0TTE3IDR2MTRNMTEgNHYxNCIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zIDZoNHYyaC00ek05IDE0aDR2MmgtNHpNMTUgMTBoNHYyaC00eiIvPjwvZz48L3N2Zz4=) no-repeat #00b19e;
     }
 
     &.active {

diff --git a/Build/src/apps/map/components/BasemapSelector/BasemapSelector.jsx b/Build/src/apps/map/components/BasemapSelector/BasemapSelector.jsx
@@ -5,7 +5,7 @@
  * file 'LICENSE.txt', which is part of this source code package.
  */
 import React, { useCallback, useEffect, useState } from "react";
-import { FormGroup, Glyphicon, Radio } from "react-bootstrap";
+import { Glyphicon, Radio } from "react-bootstrap";
 import PropTypes from "prop-types";
 
 import SettingsProvider from "../../../../SettingsProvider";
@@ -129,10 +129,10 @@ export const BasemapSelector = (props) => {
     <React.Fragment>
       {activeLayer !== undefined && (
         <React.Fragment>
-          <h4>{translate("control-basemapselector-label")}:</h4>
-          <div className="wms-entries">
+          <h2>{translate("control-basemapselector-label")}:</h2>
+          <ul className="wms-entries">
             {[...layers, ...customLayers].map((l) => (
-              <div key={l.id} className="basemap-selector-entry">
+              <li key={l.id} className="basemap-selector-entry">
                 <Radio
                   onChange={() => handleChangeBaseMapLayer(l)}
                   name={l.id}
@@ -154,9 +154,9 @@ export const BasemapSelector = (props) => {
                     <Glyphicon glyph="remove" />
                   </button>
                 )}
-              </div>
+              </li>
             ))}
-          </div>
+          </ul>
           <div className="controls-container">
             <button
               className="add-wms-button"

diff --git a/Build/src/apps/map/components/BasemapSelector/BasemapSelector.scss b/Build/src/apps/map/components/BasemapSelector/BasemapSelector.scss
@@ -10,7 +10,7 @@
         background: rgba($secondary-color-dark, 0.9);
         box-shadow: $shadow;
 
-        h4 {
+        h2 {
             margin: 0;
             color: white;
             font-size: 14px;
@@ -31,21 +31,33 @@
             content: "";
         }
 
-        .basemap-selector-entry {
-            align-items: center;
-            border-bottom: 1px solid rgba(white, 0.3);
-            display: flex;
-            color: white;
+        ul {
+            &.wms-entries {
+                margin: 0;
 
-            div.radio {
-                margin: 5px 0;
-            }
+                .basemap-selector-entry {
+                    align-items: center;
+                    border-bottom: 1px solid rgba(white, 0.3);
+                    display: flex;
+                    color: white;
+                    padding: 0;
+                    height: 35px;
 
-            button.delete-basemap-button {
-                color: $primary-color;
-                margin: 10px 0 10px 5px;
-                height: 20px;
-                background: transparent;
+                    &::before {
+                        display: none;
+                    }
+
+                    div.radio {
+                        margin: 5px 0;
+                    }
+
+                    button.delete-basemap-button {
+                        color: $primary-color;
+                        margin: 7.5px 0 7.5px 5px;
+                        height: 20px;
+                        background: transparent;
+                    }
+                }
             }
         }
 
@@ -98,6 +110,7 @@
             max-width: calc(93vw - 40px);
 
             top: -80px;
+
             &:before {
                 top: 90px;
             }

diff --git a/Build/src/apps/map/components/FacetedSearch/FacetedSearch.jsx b/Build/src/apps/map/components/FacetedSearch/FacetedSearch.jsx
@@ -59,7 +59,7 @@ export const FacetedSearch = ({ georeferenceMode }) => {
   };
 
   return (
-    <div className="search-facet">
+    <ul className="search-facet">
       {Object.keys(FACETED_SEARCH_TYPES).map((key) => (
         <FacetedSearchEntry
           checked={facets.facets.findIndex((f) => f.id === key) !== -1}
@@ -69,7 +69,7 @@ export const FacetedSearch = ({ georeferenceMode }) => {
           id={key}
         />
       ))}
-    </div>
+    </ul>
   );
 };
 

diff --git a/Build/src/apps/map/components/FacetedSearch/FacetedSearch.scss b/Build/src/apps/map/components/FacetedSearch/FacetedSearch.scss
@@ -5,11 +5,23 @@
     margin: 0 -15px;
     overflow: hidden;
     height: 0;
+    visibility: hidden;
     transition: $transition;
     text-transform: none;
     font-size: 14px;
     line-height: 1;
 
+    ul {
+        margin: 0;
+
+        li {
+            padding: 0;
+            &:before {
+                display: none;
+            }
+        }
+    }
+
     .search-facet {
         label {
             position: relative;
@@ -25,13 +37,14 @@
             }
 
             &:hover {
-                background-color: rgba($secondary-color, .1);
+                background-color: rgba($secondary-color, 0.1);
             }
         }
     }
 }
 
 .facetedsearch-open .facet-container {
+    visibility: visible;
     height: 160px;
     overflow-y: auto;
 }
diff --git a/Build/src/apps/map/components/FacetedSearch/FacetedSearchEntry.jsx b/Build/src/apps/map/components/FacetedSearch/FacetedSearchEntry.jsx
@@ -23,17 +23,19 @@ export const FacetedSearchEntry = ({
   };
 
   return id !== "ToGeoref" || (id === "toGeoref" && georeferenceMode) ? (
-    <label title={title}>
-      <input
-        checked={checked}
-        className="facet-search-el"
-        onChange={handleClick}
-        id={id}
-        title={title}
-        type="checkbox"
-      />
-      <span dangerouslySetInnerHTML={{ __html: title }} />
-    </label>
+    <li>
+      <label htmlFor={id}>
+        <input
+          checked={checked}
+          className="facet-search-el"
+          onChange={handleClick}
+          id={id}
+          title={title}
+          type="checkbox"
+        />
+        <span dangerouslySetInnerHTML={{ __html: title }} />
+      </label>
+    </li>
   ) : (
     <></>
   );

diff --git a/...c/apps/map/components/LayerManagement/DeactivateMapCollection/DeactivateMapCollection.jsx b/...c/apps/map/components/LayerManagement/DeactivateMapCollection/DeactivateMapCollection.jsx
@@ -18,6 +18,11 @@ export const DeactivateMapCollection = () => {
   const [isActive, setIsActive] = useState(true);
   const map = useRecoilValue(mapState);
   const olcsMap = useRecoilValue(olcsMapState);
+  const title = translate(
+    isActive
+      ? "layermanagement-deactivate-all-maps"
+      : "layermanagement-activate-all-maps"
+  );
 
   const handleClick = () => {
     const layers = getOperationalLayers(map);
@@ -38,13 +43,14 @@ export const DeactivateMapCollection = () => {
         "deactivate-map-col-control",
         isActive ? "deactivate" : ""
       )}
-      title={translate(
-        isActive
-          ? "layermanagement-deactivate-all-maps"
-          : "layermanagement-activate-all-maps"
-      )}
+      title={title}
+      id="deactivate-all-maps"
     >
-      <SvgIcons name="layermanagement-deactivate" />
+      <SvgIcons
+        name="layermanagement-deactivate"
+        aria-labelledby="deactivate-all-maps"
+        alt={title}
+      />
     </button>
   );
 };

diff --git a/...c/apps/map/components/LayerManagement/DynamicMapVisualization/DynamicMapVisualization.jsx b/...c/apps/map/components/LayerManagement/DynamicMapVisualization/DynamicMapVisualization.jsx
@@ -22,6 +22,7 @@ export const DynamicMapVisualization = ({ animationOptions = {} }) => {
   const [animatedLayer, setAnimatedLayer] = useState(undefined);
   const [open, setOpen] = useState(false);
   const map = useRecoilValue(mapState);
+  const title = translate(`dynamicmapvis-${open ? "close" : "open"}`);
 
   // refs
   const activeRef = useRef(false);
@@ -138,15 +139,22 @@ export const DynamicMapVisualization = ({ animationOptions = {} }) => {
   return (
     <div
       className={clsx("vkf-dyn-vis-control", active && "play", open && "open")}
-      title={translate(`dynamicmapvis-${open ? "close" : "open"}`)}
+      title={title}
+      aria-label={title}
+      id="dynamic-map-visualization"
     >
-      <button className="open-dyn-vis" onClick={handleToggleMenu}>
+      <button
+        className="open-dyn-vis"
+        onClick={handleToggleMenu}
+        aria-labelledby="dynamic-map-visualization"
+      >
         <svg
           width="100%"
           height="100%"
           viewBox="0 0 30 30"
           version="1.1"
           xmlns="http://www.w3.org/2000/svg"
+          alt={title}
         >
           <path
             className="arrow"
@@ -169,16 +177,20 @@ export const DynamicMapVisualization = ({ animationOptions = {} }) => {
           {feedback}
         </div>
         <button
+          aria-label={translate("dynamicmapvis-start")}
+          className="start-button"
           onClick={handleStart}
+          tabIndex={open ? undefined : -1}
           title={translate("dynamicmapvis-start")}
-          className="start-button"
         >
           Start
         </button>
         <button
+          aria-label={translate("dynamicmapvis-stop")}
+          className="stop-button"
           onClick={handleStop}
+          tabIndex={open ? undefined : -1}
           title={translate("dynamicmapvis-stop")}
-          className="stop-button"
         >
           Stop
         </button>