Skip to content

Commit da73143

Browse files
author
Alexander Bigga
authored
Merge pull request #25 from slub/accessibility-improvements
Accessibility improvements, query parameter adjustments and tile preloading configuration
2 parents 5aa61df + b6e4fbd commit da73143

File tree

53 files changed

+468
-248
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

53 files changed

+468
-248
lines changed

‎Build/src/SettingsProvider.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ let settingsObject = {
2727
tileSize: 512,
2828
},
2929
],
30+
ENABLE_TILE_PRELOADING: false,
3031
LANGUAGE_CODE: "en",
3132
};
3233

@@ -86,6 +87,14 @@ export default {
8687
);
8788
},
8889

90+
/**
91+
* Returns the 3d preloading state from the settings object
92+
* @return {*}
93+
*/
94+
getIsTilePreloadingEnabled() {
95+
return settingsObject.ENABLE_TILE_PRELOADING === 1;
96+
},
97+
8998
/**
9099
* Returns the language dictionary.
91100
* @returns {Object}

‎Build/src/_sass/overwrites-openlayers.scss‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@
2121
.ol-attribution,
2222
.ol-scale-line-inner,
2323
.ol-has-tooltip [role="tooltip"] {
24-
font-family: Helvetica, Arial, sans-serif;
2524
border-radius: 0;
2625
}
2726

@@ -30,7 +29,11 @@
3029
border-radius: 0;
3130
color: $primary-color;
3231
display: none;
33-
font-family: Helvetica, Arial, sans-serif;
32+
}
33+
34+
.ol-scale-line-inner {
35+
font-size: 11px;
36+
font-weight: 700;
3437
}
3538

3639
.ol-attribution.ol-uncollapsible {
@@ -41,6 +44,8 @@
4144
border-radius: 0;
4245
background: rgba($secondary-color-dark, 0.6);
4346
color: white;
47+
font-size: 11px;
48+
line-height: 1.2;
4449

4550
#popover-toggle {
4651
display: none;
@@ -59,7 +64,7 @@
5964

6065
a {
6166
color: white;
62-
font-size: 10px;
67+
font-size: 11px;
6368
font-weight: normal;
6469
margin: 0 3px;
6570

@@ -98,12 +103,26 @@
98103
}
99104
}
100105

106+
&.ol-zoom {
107+
button {
108+
color: transparent;
109+
background-size: 18px auto;
110+
111+
&.ol-zoom-in {
112+
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBhdGggZD0iTTkuNTUyIDE5LjI1NHYtNi44NDhIMi43NTRWOS41NDNoNi43OThWMi43NDZoMi44OTZ2Ni43OTdoNi43OTh2Mi44NjNoLTYuNzk4djYuODQ4SDkuNTUyWiIgc3R5bGU9ImZpbGw6I2ZmZiIvPjwvc3ZnPg==");
113+
}
114+
115+
&.ol-zoom-out {
116+
background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjIgMjIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgc3R5bGU9ImZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO3N0cm9rZS1saW5lam9pbjpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoyIj48cGF0aCBkPSJNMTkuMjQ2IDEyLjQwNkgyLjc1NFY5LjU0M2gxNi40OTJ2Mi44NjNaIiBzdHlsZT0iZmlsbDojZmZmO2ZpbGwtcnVsZTpub256ZXJvIi8+PC9zdmc+");
117+
}
118+
}
119+
}
120+
101121
&.rotate-north button .ol-compass {
102122
width: 22px;
103123
height: 22px;
104124
color: transparent;
105-
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjIgMjIiPjxwYXRoIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBkPSJNMTAuOCAxOC4zbC0zLjMtNyAzLjMtNyAzLjMgN3oiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTJsLTMuMy03LTMuMyA3eiIvPjwvc3ZnPg==")
106-
no-repeat center center;
125+
background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMiAyMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjIgMjIiPjxwYXRoIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBkPSJNMTAuOCAxOC4zbC0zLjMtNyAzLjMtNyAzLjMgN3oiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTJsLTMuMy03LTMuMyA3eiIvPjwvc3ZnPg==") no-repeat center center;
107126
background-size: 22px auto;
108127
display: block;
109128
}
@@ -146,8 +165,7 @@
146165
}
147166

148167
&.image-manipulation button {
149-
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIj48Zz48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBkPSJNNSA0djE0TTE3IDR2MTRNMTEgNHYxNCIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zIDZoNHYyaC00ek05IDE0aDR2MmgtNHpNMTUgMTBoNHYyaC00eiIvPjwvZz48L3N2Zz4=)
150-
no-repeat #00b19e;
168+
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMiIgaGVpZ2h0PSIyMiIgdmlld0JveD0iMCAwIDIyIDIyIj48Zz48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBmaWxsPSJub25lIiBkPSJNNSA0djE0TTE3IDR2MTRNMTEgNHYxNCIvPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0zIDZoNHYyaC00ek05IDE0aDR2MmgtNHpNMTUgMTBoNHYyaC00eiIvPjwvZz48L3N2Zz4=) no-repeat #00b19e;
151169
}
152170

153171
&.active {

‎Build/src/apps/map/components/BasemapSelector/BasemapSelector.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* file 'LICENSE.txt', which is part of this source code package.
66
*/
77
import React, { useCallback, useEffect, useState } from "react";
8-
import { FormGroup, Glyphicon, Radio } from "react-bootstrap";
8+
import { Glyphicon, Radio } from "react-bootstrap";
99
import PropTypes from "prop-types";
1010

1111
import SettingsProvider from "../../../../SettingsProvider";
@@ -129,10 +129,10 @@ export const BasemapSelector = (props) => {
129129
<React.Fragment>
130130
{activeLayer !== undefined && (
131131
<React.Fragment>
132-
<h4>{translate("control-basemapselector-label")}:</h4>
133-
<div className="wms-entries">
132+
<h2>{translate("control-basemapselector-label")}:</h2>
133+
<ul className="wms-entries">
134134
{[...layers, ...customLayers].map((l) => (
135-
<div key={l.id} className="basemap-selector-entry">
135+
<li key={l.id} className="basemap-selector-entry">
136136
<Radio
137137
onChange={() => handleChangeBaseMapLayer(l)}
138138
name={l.id}
@@ -154,9 +154,9 @@ export const BasemapSelector = (props) => {
154154
<Glyphicon glyph="remove" />
155155
</button>
156156
)}
157-
</div>
157+
</li>
158158
))}
159-
</div>
159+
</ul>
160160
<div className="controls-container">
161161
<button
162162
className="add-wms-button"

‎Build/src/apps/map/components/BasemapSelector/BasemapSelector.scss‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
background: rgba($secondary-color-dark, 0.9);
1111
box-shadow: $shadow;
1212

13-
h4 {
13+
h2 {
1414
margin: 0;
1515
color: white;
1616
font-size: 14px;
@@ -31,21 +31,33 @@
3131
content: "";
3232
}
3333

34-
.basemap-selector-entry {
35-
align-items: center;
36-
border-bottom: 1px solid rgba(white, 0.3);
37-
display: flex;
38-
color: white;
34+
ul {
35+
&.wms-entries {
36+
margin: 0;
3937

40-
div.radio {
41-
margin: 5px 0;
42-
}
38+
.basemap-selector-entry {
39+
align-items: center;
40+
border-bottom: 1px solid rgba(white, 0.3);
41+
display: flex;
42+
color: white;
43+
padding: 0;
44+
height: 35px;
4345

44-
button.delete-basemap-button {
45-
color: $primary-color;
46-
margin: 10px 0 10px 5px;
47-
height: 20px;
48-
background: transparent;
46+
&::before {
47+
display: none;
48+
}
49+
50+
div.radio {
51+
margin: 5px 0;
52+
}
53+
54+
button.delete-basemap-button {
55+
color: $primary-color;
56+
margin: 7.5px 0 7.5px 5px;
57+
height: 20px;
58+
background: transparent;
59+
}
60+
}
4961
}
5062
}
5163

@@ -98,6 +110,7 @@
98110
max-width: calc(93vw - 40px);
99111

100112
top: -80px;
113+
101114
&:before {
102115
top: 90px;
103116
}

‎Build/src/apps/map/components/FacetedSearch/FacetedSearch.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const FacetedSearch = ({ georeferenceMode }) => {
5959
};
6060

6161
return (
62-
<div className="search-facet">
62+
<ul className="search-facet">
6363
{Object.keys(FACETED_SEARCH_TYPES).map((key) => (
6464
<FacetedSearchEntry
6565
checked={facets.facets.findIndex((f) => f.id === key) !== -1}
@@ -69,7 +69,7 @@ export const FacetedSearch = ({ georeferenceMode }) => {
6969
id={key}
7070
/>
7171
))}
72-
</div>
72+
</ul>
7373
);
7474
};
7575

‎Build/src/apps/map/components/FacetedSearch/FacetedSearch.scss‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,23 @@
55
margin: 0 -15px;
66
overflow: hidden;
77
height: 0;
8+
visibility: hidden;
89
transition: $transition;
910
text-transform: none;
1011
font-size: 14px;
1112
line-height: 1;
1213

14+
ul {
15+
margin: 0;
16+
17+
li {
18+
padding: 0;
19+
&:before {
20+
display: none;
21+
}
22+
}
23+
}
24+
1325
.search-facet {
1426
label {
1527
position: relative;
@@ -25,13 +37,14 @@
2537
}
2638

2739
&:hover {
28-
background-color: rgba($secondary-color, .1);
40+
background-color: rgba($secondary-color, 0.1);
2941
}
3042
}
3143
}
3244
}
3345

3446
.facetedsearch-open .facet-container {
47+
visibility: visible;
3548
height: 160px;
3649
overflow-y: auto;
3750
}

‎Build/src/apps/map/components/FacetedSearch/FacetedSearchEntry.jsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,19 @@ export const FacetedSearchEntry = ({
2323
};
2424

2525
return id !== "ToGeoref" || (id === "toGeoref" && georeferenceMode) ? (
26-
<label title={title}>
27-
<input
28-
checked={checked}
29-
className="facet-search-el"
30-
onChange={handleClick}
31-
id={id}
32-
title={title}
33-
type="checkbox"
34-
/>
35-
<span dangerouslySetInnerHTML={{ __html: title }} />
36-
</label>
26+
<li>
27+
<label htmlFor={id}>
28+
<input
29+
checked={checked}
30+
className="facet-search-el"
31+
onChange={handleClick}
32+
id={id}
33+
title={title}
34+
type="checkbox"
35+
/>
36+
<span dangerouslySetInnerHTML={{ __html: title }} />
37+
</label>
38+
</li>
3739
) : (
3840
<></>
3941
);

‎Build/src/apps/map/components/LayerManagement/DeactivateMapCollection/DeactivateMapCollection.jsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ export const DeactivateMapCollection = () => {
1818
const [isActive, setIsActive] = useState(true);
1919
const map = useRecoilValue(mapState);
2020
const olcsMap = useRecoilValue(olcsMapState);
21+
const title = translate(
22+
isActive
23+
? "layermanagement-deactivate-all-maps"
24+
: "layermanagement-activate-all-maps"
25+
);
2126

2227
const handleClick = () => {
2328
const layers = getOperationalLayers(map);
@@ -38,13 +43,14 @@ export const DeactivateMapCollection = () => {
3843
"deactivate-map-col-control",
3944
isActive ? "deactivate" : ""
4045
)}
41-
title={translate(
42-
isActive
43-
? "layermanagement-deactivate-all-maps"
44-
: "layermanagement-activate-all-maps"
45-
)}
46+
title={title}
47+
id="deactivate-all-maps"
4648
>
47-
<SvgIcons name="layermanagement-deactivate" />
49+
<SvgIcons
50+
name="layermanagement-deactivate"
51+
aria-labelledby="deactivate-all-maps"
52+
alt={title}
53+
/>
4854
</button>
4955
);
5056
};

‎Build/src/apps/map/components/LayerManagement/DynamicMapVisualization/DynamicMapVisualization.jsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ export const DynamicMapVisualization = ({ animationOptions = {} }) => {
2222
const [animatedLayer, setAnimatedLayer] = useState(undefined);
2323
const [open, setOpen] = useState(false);
2424
const map = useRecoilValue(mapState);
25+
const title = translate(`dynamicmapvis-${open ? "close" : "open"}`);
2526

2627
// refs
2728
const activeRef = useRef(false);
@@ -138,15 +139,22 @@ export const DynamicMapVisualization = ({ animationOptions = {} }) => {
138139
return (
139140
<div
140141
className={clsx("vkf-dyn-vis-control", active && "play", open && "open")}
141-
title={translate(`dynamicmapvis-${open ? "close" : "open"}`)}
142+
title={title}
143+
aria-label={title}
144+
id="dynamic-map-visualization"
142145
>
143-
<button className="open-dyn-vis" onClick={handleToggleMenu}>
146+
<button
147+
className="open-dyn-vis"
148+
onClick={handleToggleMenu}
149+
aria-labelledby="dynamic-map-visualization"
150+
>
144151
<svg
145152
width="100%"
146153
height="100%"
147154
viewBox="0 0 30 30"
148155
version="1.1"
149156
xmlns="http://www.w3.org/2000/svg"
157+
alt={title}
150158
>
151159
<path
152160
className="arrow"
@@ -169,16 +177,20 @@ export const DynamicMapVisualization = ({ animationOptions = {} }) => {
169177
{feedback}
170178
</div>
171179
<button
180+
aria-label={translate("dynamicmapvis-start")}
181+
className="start-button"
172182
onClick={handleStart}
183+
tabIndex={open ? undefined : -1}
173184
title={translate("dynamicmapvis-start")}
174-
className="start-button"
175185
>
176186
Start
177187
</button>
178188
<button
189+
aria-label={translate("dynamicmapvis-stop")}
190+
className="stop-button"
179191
onClick={handleStop}
192+
tabIndex={open ? undefined : -1}
180193
title={translate("dynamicmapvis-stop")}
181-
className="stop-button"
182194
>
183195
Stop
184196
</button>

0 commit comments

Comments
 (0)