Skip to content

Commit d148d5d

Browse files
jazairijazairi
committed
Fix form required attributes redundancy and keyword input description
Why these changes are being introduced: DAS has informed us that it is bad practice to use both `required` and `aria-required`. They also suggested that we add an `aria-describedby` to the keyword input that links to the `p` tag below the site title. Relevant ticket(s): * [GDT-327](https://mitlibraries.atlassian.net/browse/GDT-327) How this addresses that need: This removes the redundant `aria-required` attributes and makes the suggested labeling change for the keyword input. Side effects of this change: The labeling piece only affects GDT, as non-GDT apps don't currently use the `site_title` partial. This feels acceptable, because the keyword input is more clearly labeled in other TIMDEX UI applications.
1 parent ab1dfb6 commit d148d5d

File tree

3 files changed

+10
-19
lines changed

3 files changed

+10
-19
lines changed

‎app/javascript/search_form.js‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ function disableAdvanced() {
33
if (geobox_label.classList.contains('closed') && geodistance_label.classList.contains('closed')) {
44
keyword_field.toggleAttribute('required');
55
keyword_field.classList.toggle('required');
6-
keyword_field.setAttribute('aria-required', true);
76
keyword_field.setAttribute('placeholder', 'Enter your search');
87
}
98
[...details_panel.getElementsByClassName('field')].forEach(
@@ -17,7 +16,6 @@ function enableAdvanced() {
1716
if (geobox_label.classList.contains('closed') && geodistance_label.classList.contains('closed')) {
1817
keyword_field.toggleAttribute('required');
1918
keyword_field.classList.toggle('required');
20-
keyword_field.setAttribute('aria-required', false);
2119
keyword_field.setAttribute('placeholder', 'Keyword anywhere');
2220
}
2321
advanced_label.classList = 'open';
@@ -27,15 +25,13 @@ function disableGeobox() {
2725
if (advanced_label.classList.contains('closed') && geodistance_label.classList.contains('closed')) {
2826
keyword_field.toggleAttribute('required');
2927
keyword_field.classList.toggle('required');
30-
keyword_field.setAttribute('aria-required', true);
3128
keyword_field.setAttribute('placeholder', 'Enter your search');
3229
}
3330
geobox_field.setAttribute('value', '');
3431
[...geobox_details_panel.getElementsByClassName('field')].forEach(function(field) {
3532
field.value = '';
3633
field.classList.toggle('required');
3734
field.toggleAttribute('required');
38-
field.setAttribute('aria-required', false);
3935
});
4036
geobox_label.classList = 'closed';
4137
};
@@ -44,15 +40,13 @@ function enableGeobox() {
4440
if (advanced_label.classList.contains('closed') && geodistance_label.classList.contains('closed')) {
4541
keyword_field.toggleAttribute('required');
4642
keyword_field.classList.toggle('required');
47-
keyword_field.setAttribute('aria-required', false);
4843
keyword_field.setAttribute('placeholder', 'Keyword anywhere');
4944
}
5045
geobox_field.setAttribute('value', 'true');
5146
[...geobox_details_panel.getElementsByClassName('field')].forEach(function(field) {
5247
field.value = '';
5348
field.classList.toggle('required');
5449
field.toggleAttribute('required');
55-
field.setAttribute('aria-required', true);
5650
});
5751
geobox_label.classList = 'open';
5852
};
@@ -61,15 +55,13 @@ function disableGeodistance() {
6155
if (advanced_label.classList.contains('closed') && geobox_label.classList.contains('closed')) {
6256
keyword_field.toggleAttribute('required');
6357
keyword_field.classList.toggle('required');
64-
keyword_field.setAttribute('aria-required', true);
6558
keyword_field.setAttribute('placeholder', 'Enter your search');
6659
}
6760
geodistance_field.setAttribute('value', '');
6861
[...geodistance_details_panel.getElementsByClassName('field')].forEach(function(field) {
6962
field.value = '';
7063
field.classList.toggle('required');
7164
field.toggleAttribute('required');
72-
field.setAttribute('aria-required', false);
7365
});
7466
geodistance_label.classList = 'closed';
7567
};
@@ -78,15 +70,13 @@ function enableGeodistance() {
7870
if (advanced_label.classList.contains('closed') && geobox_label.classList.contains('closed')) {
7971
keyword_field.toggleAttribute('required');
8072
keyword_field.classList.toggle('required');
81-
keyword_field.setAttribute('aria-required', false);
8273
keyword_field.setAttribute('placeholder', 'Keyword anywhere');
8374
}
8475
geodistance_field.setAttribute('value', 'true');
8576
[...geodistance_details_panel.getElementsByClassName('field')].forEach(function(field) {
8677
field.value = '';
8778
field.classList.toggle('required');
8879
field.toggleAttribute('required');
89-
field.setAttribute('aria-required', true);
9080
});
9181
geodistance_label.classList = 'open';
9282
};

‎app/views/search/_form.html.erb‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,8 @@ end
3030
<input id="basic-search-main" type="search"
3131
class="field field-text basic-search-input <%= "required" if search_required %>" name="q"
3232
title="Keyword anywhere" placeholder="Enter your search"
33-
value="<%= params[:q] %>" <%= 'required="required" aria-required="true"' if search_required %>>
33+
value="<%= params[:q] %>" <%= 'required' if search_required %>
34+
<%= 'aria-describedby=site-desc' if Flipflop.enabled?(:gdt) %>>
3435

3536
<% if Flipflop.enabled?(:gdt) %>
3637
<details id="geobox-search-panel" <%= "open" if params[:geobox] == "true" %>>
@@ -47,7 +48,7 @@ end
4748
<input type="number" step="0.000001" min="-180.0" max="180.0"
4849
class="field field-text <%= "required" if geobox_required %>"
4950
id="geobox-minLongitude" name="geoboxMinLongitude" value="<%= params[:geoboxMinLongitude] %>"
50-
<%= 'required="required" aria-required="true"' if geobox_required %>
51+
<%= 'required' if geobox_required %>
5152
aria-describedby="minLong-desc">
5253
<span class="geo-desc" id="minLong-desc">
5354
A decimal between -180.0 and 180.0 (Ex: -73.507239)
@@ -59,7 +60,7 @@ end
5960
<input type="number" step="0.000001" min="-90.0" max="90.0"
6061
class="field field-text <%= "required" if geobox_required %>"
6162
id="geobox-minLatitude" name="geoboxMinLatitude" value="<%= params[:geoboxMinLatitude] %>"
62-
<%= 'required="required" aria-required="true"' if geobox_required %>
63+
<%= 'required' if geobox_required %>
6364
aria-describedby="minLat-desc">
6465
<span class="geo-desc" id="minLat-desc">
6566
A decimal between -90.0 and 90.0 (Ex: 41.239083)
@@ -71,7 +72,7 @@ end
7172
<input type="number" step="0.000001" min="-180.0" max="180.0"
7273
class="field field-text <%= "required" if geobox_required %>"
7374
id="geobox-maxLongitude" name="geoboxMaxLongitude" value="<%= params[:geoboxMaxLongitude] %>"
74-
<%= 'required="required" aria-required="true"' if geobox_required %>
75+
<%= 'required' if geobox_required %>
7576
aria-describedby="maxLong-desc">
7677
<span class="geo-desc" id="maxLong-desc">
7778
A decimal between -180.0 and 180.0 (Ex: -69.928713)
@@ -83,7 +84,7 @@ end
8384
<input type="number" step="0.000001" min="-90.0" max="90.0"
8485
class="field field-text <%= "required" if geobox_required %>"
8586
id="geobox-maxLatitude" name="geoboxMaxLatitude" value="<%= params[:geoboxMaxLatitude] %>"
86-
<%= 'required="required" aria-required="true"' if geobox_required %>
87+
<%= 'required' if geobox_required %>
8788
aria-describedby="maxLat-desc">
8889
<span class="geo-desc" id="maxLat-desc">
8990
A decimal between -90.0 and 90.0 (Ex: 42.886759)
@@ -108,7 +109,7 @@ end
108109
class="field field-text <%= "required" if geodistance_required %>"
109110
id="geodistance-latitude" name="geodistanceLatitude"
110111
value="<%= params[:geodistanceLatitude] %>" aria-describedby="lat-desc"
111-
<%= 'required="required" aria-required="true"' if geodistance_required %>
112+
<%= 'required' if geodistance_required %>
112113
aria-describedby="lat-desc">
113114
<span class="geo-desc" id="lat-desc">
114115
A decimal between -90.0 and 90.0 (Ex: 42.279594)
@@ -121,7 +122,7 @@ end
121122
class="field field-text <%= "required" if geodistance_required %>"
122123
id="geodistance-longitude" name="geodistanceLongitude"
123124
value="<%= params[:geodistanceLongitude] %>" aria-describedby="long-desc"
124-
<%= 'required="required" aria-required="true"' if geodistance_required %>
125+
<%= 'required' if geodistance_required %>
125126
aria-describedby="long-desc">
126127
<span class="geo-desc" id="long-desc">
127128
A decimal between -180.0 and 180.0 (Ex: -83.732124)
@@ -133,7 +134,7 @@ end
133134
<input type="text" class="field field-text <%= "required" if geodistance_required %>"
134135
id="geodistance-distance" name="geodistanceDistance"
135136
value="<%= params[:geodistanceDistance] %>" aria-describedby="distance-desc"
136-
<%= 'required="required" aria-required="true"' if geodistance_required %>
137+
<%= 'required' if geodistance_required %>
137138
aria-describedby="distance-desc">
138139
<span class="geo-desc" id="distance-desc">
139140
Distance is in meters by default; add other units if preferred (Ex: '100km' or '50mi')

‎app/views/shared/_site_title.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<% if Flipflop.enabled?(:gdt) %>
22
<h2>Search for geospatial/GIS data</h2>
3-
<p>Find GIS data held at MIT and other institutions</p>
3+
<p id="site-desc">Find GIS data held at MIT and other institutions</p>
44
<% else %>
55
<h2>Search the MIT Libraries</h2>
66
<% end %>

0 commit comments

Comments
 (0)