Skip to content

Commit 5194ea5

Browse files
stdavisstdavis
committed
fix: a11y fixes and improvements
- better noscript - orphaned form labels - add headers in correct order
1 parent a0f84f7 commit 5194ea5

File tree

3 files changed

+113
-97
lines changed

3 files changed

+113
-97
lines changed

‎index.html‎

Lines changed: 100 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,113 @@
11
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<!-- Global Metadata -->
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
7-
<link rel="shortcut icon" href="favicon.ico" />
8-
<title>UGRC Raster Data Discovery</title>
9-
<meta name="title" content="UGRC Raster Data Discovery" />
10-
<meta name="description" content="The website to discover and download raster data within Utah" />
11-
<link rel="canonical" href="https://raster.utah.gov/" />
12-
<!-- Preloads -->
13-
<link rel="preconnect" href="https://fonts.googleapis.com" />
14-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
15-
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap" rel="stylesheet" />
16-
</head>
173

18-
<body class="size-full bg-white text-zinc-700 subpixel-antialiased dark:bg-zinc-800 dark:text-zinc-50">
19-
<noscript> You need to enable JavaScript to run this app. </noscript>
20-
<div id="root"></div>
21-
<script type="module" src="/src/main.tsx"></script>
4+
<head>
5+
<!-- Global Metadata -->
6+
<meta charset="utf-8" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />
8+
<link rel="shortcut icon" href="favicon.ico" />
9+
<title>UGRC Raster Data Discovery</title>
10+
<meta name="title" content="UGRC Raster Data Discovery" />
11+
<meta name="description" content="The website to discover and download raster data within Utah" />
12+
<link rel="canonical" href="https://raster.utah.gov/" />
13+
<!-- Preloads -->
14+
<link rel="preconnect" href="https://fonts.googleapis.com" />
15+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16+
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap" rel="stylesheet" />
17+
</head>
2218

23-
<!--BEGIN QUALTRICS WEBSITE FEEDBACK SNIPPET-->
19+
<body class="size-full bg-white text-zinc-700 subpixel-antialiased dark:bg-zinc-800 dark:text-zinc-50">
20+
<noscript>
21+
<div role="alert" class="p-5 font-sans">
22+
<h1>JavaScript is required</h1>
23+
<p>
24+
We're sorry, but this application requires JavaScript to be enabled to function. Please enable JavaScript in
25+
your browser settings and reload.
26+
</p>
27+
</div>
28+
</noscript>
29+
<div id="root"></div>
30+
<script type="module" src="/src/main.tsx"></script>
2431

25-
<script type="text/javascript">
26-
(function () {
27-
var g = function (e, h, f, g) {
28-
this.get = function (a) {
29-
for (var a = a + '=', c = document.cookie.split(';'), b = 0, e = c.length; b < e; b++) {
30-
for (var d = c[b]; ' ' == d.charAt(0); ) d = d.substring(1, d.length);
31-
if (0 == d.indexOf(a)) return d.substring(a.length, d.length);
32-
}
33-
return null;
34-
};
32+
<!--BEGIN QUALTRICS WEBSITE FEEDBACK SNIPPET-->
3533

36-
this.set = function (a, c) {
37-
var b = '',
38-
b = new Date();
39-
b.setTime(b.getTime() + 6048e5);
40-
b = '; expires=' + b.toGMTString();
41-
document.cookie = a + '=' + c + b + '; path=/; ';
42-
};
34+
<script type="text/javascript">
35+
(function () {
36+
var g = function (e, h, f, g) {
37+
this.get = function (a) {
38+
for (var a = a + '=', c = document.cookie.split(';'), b = 0, e = c.length; b < e; b++) {
39+
for (var d = c[b]; ' ' == d.charAt(0);) d = d.substring(1, d.length);
40+
if (0 == d.indexOf(a)) return d.substring(a.length, d.length);
41+
}
42+
return null;
43+
};
44+
45+
this.set = function (a, c) {
46+
var b = '',
47+
b = new Date();
48+
b.setTime(b.getTime() + 6048e5);
49+
b = '; expires=' + b.toGMTString();
50+
document.cookie = a + '=' + c + b + '; path=/; ';
51+
};
4352

44-
this.check = function () {
45-
var a = this.get(f);
46-
if (a) a = a.split(':');
47-
else if (100 != e)
48-
('v' == h && (e = Math.random() >= e / 100 ? 0 : 100), (a = [h, e, 0]), this.set(f, a.join(':')));
49-
else return !0;
50-
var c = a[1];
51-
if (100 == c) return !0;
52-
switch (a[0]) {
53-
case 'v':
54-
return !1;
55-
case 'r':
56-
return ((c = a[2] % Math.floor(100 / c)), a[2]++, this.set(f, a.join(':')), !c);
57-
}
58-
return !0;
59-
};
53+
this.check = function () {
54+
var a = this.get(f);
55+
if (a) a = a.split(':');
56+
else if (100 != e)
57+
('v' == h && (e = Math.random() >= e / 100 ? 0 : 100), (a = [h, e, 0]), this.set(f, a.join(':')));
58+
else return !0;
59+
var c = a[1];
60+
if (100 == c) return !0;
61+
switch (a[0]) {
62+
case 'v':
63+
return !1;
64+
case 'r':
65+
return ((c = a[2] % Math.floor(100 / c)), a[2]++, this.set(f, a.join(':')), !c);
66+
}
67+
return !0;
68+
};
6069

61-
this.go = function () {
62-
if (this.check()) {
63-
var a = document.createElement('script');
64-
a.type = 'text/javascript';
65-
a.src = g;
66-
document.body && document.body.appendChild(a);
67-
}
68-
};
70+
this.go = function () {
71+
if (this.check()) {
72+
var a = document.createElement('script');
73+
a.type = 'text/javascript';
74+
a.src = g;
75+
document.body && document.body.appendChild(a);
76+
}
77+
};
6978

70-
this.start = function () {
71-
var t = this;
72-
'complete' !== document.readyState
73-
? window.addEventListener
74-
? window.addEventListener(
75-
'load',
76-
function () {
77-
t.go();
78-
},
79-
!1,
80-
)
81-
: window.attachEvent &&
82-
window.attachEvent('onload', function () {
83-
t.go();
84-
})
85-
: t.go();
86-
};
79+
this.start = function () {
80+
var t = this;
81+
'complete' !== document.readyState
82+
? window.addEventListener
83+
? window.addEventListener(
84+
'load',
85+
function () {
86+
t.go();
87+
},
88+
!1,
89+
)
90+
: window.attachEvent &&
91+
window.attachEvent('onload', function () {
92+
t.go();
93+
})
94+
: t.go();
8795
};
96+
};
97+
98+
try {
99+
new g(
100+
100,
101+
'r',
102+
'QSI_S_ZN_bPzG8VFyVvBeKxw',
103+
'https://znbpzg8vfyvvbekxw-utconcierge.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_bPzG8VFyVvBeKxw',
104+
).start();
105+
} catch (i) { }
106+
})();
107+
</script>
108+
<div id="ZN_bPzG8VFyVvBeKxw"><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>
88109

89-
try {
90-
new g(
91-
100,
92-
'r',
93-
'QSI_S_ZN_bPzG8VFyVvBeKxw',
94-
'https://znbpzg8vfyvvbekxw-utconcierge.siteintercept.qualtrics.com/SIE/?Q_ZID=ZN_bPzG8VFyVvBeKxw',
95-
).start();
96-
} catch (i) {}
97-
})();
98-
</script>
99-
<div id="ZN_bPzG8VFyVvBeKxw"><!--DO NOT REMOVE-CONTENTS PLACED HERE--></div>
110+
<!--END WEBSITE FEEDBACK SNIPPET-->
111+
</body>
100112

101-
<!--END WEBSITE FEEDBACK SNIPPET-->
102-
</body>
103113
</html>

‎src/App.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@ export default function App() {
9191
<PreviewProvider>
9292
<Drawer main state={sideBarState} {...sideBarTriggerProps} size="large">
9393
<WizardMachineProvider>
94+
<h1 className="sr-only">Raster Data Discovery Wizard</h1>
95+
<h2 className="sr-only">Follow the four steps to discover and download raster data</h2>
9496
<Wizard />
9597
<div className="qualtrics-survey m-2 rounded-lg bg-gray-100 px-2 pb-2 pt-1 text-sm"></div>
9698
</WizardMachineProvider>

‎src/components/AreaOfInterest.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import SketchTooltipOptions from '@arcgis/core/views/interactive/sketch/SketchTo
44
import type { EventHandler } from '@arcgis/lumina';
55
import '@arcgis/map-components/components/arcgis-search';
66
import '@arcgis/map-components/components/arcgis-sketch';
7-
import { Label, useFirebaseAnalytics } from '@ugrc/utah-design-system';
7+
import { useFirebaseAnalytics } from '@ugrc/utah-design-system';
88
import { useEffect, useRef } from 'react';
99
import config from '../config';
1010
import useMap from '../hooks/useMap';
@@ -80,8 +80,10 @@ export default function AreaOfInterest() {
8080

8181
return (
8282
<div className="flex flex-col gap-3">
83-
<Label>
84-
Search for an address
83+
<div>
84+
<span className="w-fit cursor-default text-sm font-medium text-zinc-700 dark:text-zinc-300">
85+
Search for an address
86+
</span>
8587
<arcgis-search
8688
includeDefaultSourcesDisabled
8789
locationDisabled
@@ -92,9 +94,11 @@ export default function AreaOfInterest() {
9294
resultGraphicDisabled
9395
sources={sources}
9496
/>
95-
</Label>
96-
<Label>
97-
Or draw on the map using the tools below
97+
</div>
98+
<div>
99+
<span className="w-fit cursor-default text-sm font-medium text-zinc-700 dark:text-zinc-300">
100+
Or draw on the map using the tools below
101+
</span>
98102
<div className="flex items-center justify-start">
99103
<arcgis-sketch
100104
className="border border-gray-400"
@@ -123,7 +127,7 @@ export default function AreaOfInterest() {
123127
tooltipOptions={tooltipOptions}
124128
/>
125129
</div>
126-
</Label>
130+
</div>
127131
</div>
128132
);
129133
}

0 commit comments

Comments
 (0)