Skip to content

Commit 6be7e13

Browse files
lsegallsegal
authored
Merge pull request #1501 from mullermp/accessibility
Accessibility improvements
2 parents b7de1e5 + 2f16f84 commit 6be7e13

File tree

6 files changed

+67
-14
lines changed

6 files changed

+67
-14
lines changed

‎templates/default/fulldoc/html/css/full_list.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,8 @@ h1 { padding: 12px 10px; padding-bottom: 0; margin: 0; font-size: 1.4em; }
2020
#content.insearch #noresults { margin-left: 7px; }
2121
li.collapsed ul { display: none; }
2222
li a.toggle { cursor: default; position: relative; left: -5px; top: 4px; text-indent: -999px; width: 10px; height: 9px; margin-left: -10px; display: block; float: left; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAK8AAACvABQqw0mAAAABx0RVh0U29mdHdhcmUAQWRvYmUgRmlyZXdvcmtzIENTM5jWRgMAAAAVdEVYdENyZWF0aW9uIFRpbWUAMy8xNC8wOeNZPpQAAAE2SURBVDiNrZTBccIwEEXfelIAHUA6CZ24BGaWO+FuzZAK4k6gg5QAdGAq+Bxs2Yqx7BzyL7Llp/VfzZeQhCTc/ezuGzKKnKSzpCxXJM8fwNXda3df5RZETlIt6YUzSQDs93sl8w3wBZxCCE10GM1OcWbWjB2mWgEH4Mfdyxm3PSepBHibgQE2wLe7r4HjEidpnXMYdQPKEMJcsZ4zs2POYQOcaPfwMVOo58zsAdMt18BuoVDPxUJRacELbXv3hUIX2vYmOUvi8C8ydz/ThjXrqKqqLbDIAdsCKBd+Wo7GWa7o9qzOQHVVVXeAbs+yHHCH4aTsaCOQqunmUy1yBUAXkdMIfMlgF5EXLo2OpV/c/Up7jG4hhHcYLgWzAZXUc2b2ixsfvc/RmNNfOXD3Q/oeL9axJE1yT9IOoUu6MGUkAAAAAElFTkSuQmCC) no-repeat bottom left; }
23-
li.collapsed a.toggle { opacity: 0.5; cursor: default; background-position: top left; }
24-
li { color: #888; cursor: pointer; }
23+
li.collapsed a.toggle { cursor: default; background-position: top left; }
24+
li { color: #666; cursor: pointer; }
2525
li.deprecated { text-decoration: line-through; font-style: italic; }
2626
li.odd { background: #f0f0f0; }
2727
li.even { background: #fafafa; }
@@ -47,7 +47,7 @@ li small { display: block; font-size: 0.8em; }
4747
li small:before { content: ""; }
4848
li small:after { content: ""; }
4949
li small.search_info { display: none; }
50-
#search { width: 170px; position: static; margin: 3px; margin-left: 10px; font-size: 0.9em; color: #888; padding-left: 0; padding-right: 24px; }
50+
#search { width: 170px; position: static; margin: 3px; margin-left: 10px; font-size: 0.9em; color: #666; padding-left: 0; padding-right: 24px; }
5151
#content.insearch #search { background-position: center right; }
5252
#search input { width: 110px; }
5353

‎templates/default/fulldoc/html/css/style.css

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,11 @@ body {
8282
#search { display: none; }
8383
}
8484

85+
@media (max-width: 320px) {
86+
body { height: 100%; overflow: hidden; overflow-wrap: break-word; }
87+
#main { height: 100%; overflow: auto; }
88+
}
89+
8590
#main img { max-width: 100%; }
8691
h1 { font-size: 25px; margin: 1em 0 0.5em; padding-top: 4px; border-top: 1px dotted #d5d5d5; }
8792
h1.noborder { border-top: 0px; margin-top: 0; padding-top: 4px; }
@@ -106,6 +111,7 @@ h2 small a {
106111
position: relative;
107112
padding: 2px 7px;
108113
}
114+
a { font-weight: 550; }
109115
.clear { clear: both; }
110116
.inline { display: inline; }
111117
.inline p:first-child { display: inline; }
@@ -382,6 +388,16 @@ ul.fullTree li:last-child { padding-bottom: 0; }
382388
text-align: center;
383389
}
384390

391+
.visually-hidden {
392+
position: absolute;
393+
top: auto;
394+
overflow: hidden;
395+
clip: rect(1px, 1px, 1px, 1px);
396+
width: 1px;
397+
height: 1px;
398+
white-space: nowrap;
399+
}
400+
385401
#menu { font-size: 1.3em; color: #bbb; }
386402
#menu .title, #menu a { font-size: 0.7em; }
387403
#menu .title a { font-size: 1em; }

‎templates/default/fulldoc/html/full_list.erb

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html>
2+
<html <%= "lang=\"#{html_lang}\"" unless html_lang.nil? %>>
33
<head>
44
<meta name="viewport" content="width=device-width, initial-scale=1.0">
55
<meta charset="<%= charset %>" />
@@ -26,7 +26,10 @@
2626
<% end %>
2727
</div>
2828

29-
<div id="search">Search: <input type="text" /></div>
29+
<div id="search">
30+
<label for="search-class">Search:</label>
31+
<input id="search-class" type="text" />
32+
</div>
3033
</div>
3134

3235
<ul id="full_list" class="<%= @list_class || @list_type %>">

‎templates/default/fulldoc/html/js/full_list.js

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,25 @@ function enableToggles() {
6262
evt.stopPropagation();
6363
evt.preventDefault();
6464
$(this).parent().parent().toggleClass('collapsed');
65+
$(this).attr('aria-expanded', function (i, attr) {
66+
return attr == 'true' ? 'false' : 'true'
67+
});
6568
highlight();
6669
});
70+
71+
// navigation of nested classes using keyboard
72+
$('#full_list a.toggle').on('keypress',function(evt) {
73+
// enter key is pressed
74+
if (evt.which == 13) {
75+
evt.stopPropagation();
76+
evt.preventDefault();
77+
$(this).parent().parent().toggleClass('collapsed');
78+
$(this).attr('aria-expanded', function (i, attr) {
79+
return attr == 'true' ? 'false' : 'true'
80+
});
81+
highlight();
82+
}
83+
});
6784
}
6885

6986
function populateSearchCache() {
@@ -91,7 +108,7 @@ function enableSearch() {
91108
}
92109
});
93110

94-
$('#full_list').after("<div id='noresults' style='display:none'></div>");
111+
$('#full_list').after("<div id='noresults' role='status' style='visually-hidden'></div>");
95112
}
96113

97114
function ignoredKeyPress(event) {
@@ -119,7 +136,7 @@ function clearSearch() {
119136
function performSearch(searchString) {
120137
clearSearchTimeout();
121138
$('#full_list, #content').addClass('insearch');
122-
$('#noresults').text('').hide();
139+
$('#noresults').text('').addClass('visually-hidden');
123140
partialSearch(searchString, 0);
124141
}
125142

@@ -154,11 +171,14 @@ function partialSearch(searchString, offset) {
154171
function searchDone() {
155172
searchTimeout = null;
156173
highlight();
157-
if ($('#full_list li:visible').size() === 0) {
158-
$('#noresults').text('No results were found.').hide().fadeIn();
174+
var found = $('#full_list li:visible').size();
175+
if (found === 0) {
176+
$('#noresults').text('No results were found.');
159177
} else {
160-
$('#noresults').text('').hide();
178+
// This is read out to screen readers
179+
$('#noresults').text('There are ' + found + ' results.');
161180
}
181+
$('#noresults').removeClass('visually-hidden');
162182
$('#content').removeClass('insearch');
163183
}
164184

@@ -188,6 +208,12 @@ function expandTo(path) {
188208
$target.addClass('clicked');
189209
$target.removeClass('collapsed');
190210
$target.parentsUntil('#full_list', 'li').removeClass('collapsed');
211+
212+
$target.find('a.toggle').attr('aria-expanded', 'true')
213+
$target.parentsUntil('#full_list', 'li').each(function(i, el) {
214+
$(el).find('> div > a.toggle').attr('aria-expanded', 'true');
215+
});
216+
191217
if($target[0]) {
192218
window.scrollTo(window.scrollX, $target.offset().top - 250);
193219
highlight();

‎templates/default/fulldoc/html/setup.rb

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,12 @@ def javascripts_full_list
104104
%w(js/jquery.js js/full_list.js)
105105
end
106106

107+
# Sets the HTML language lang="value" where value is the value returned from
108+
# this method. Defaults to nil which does not set the lang attribute.
109+
def html_lang
110+
nil
111+
end
112+
107113
def menu_lists
108114
Object.new.extend(T('layout')).menu_lists
109115
end
@@ -225,15 +231,17 @@ def class_list(root = Registry.root, tree = TreeContext.new)
225231
has_children = run_verifier(child.children).any? {|o| o.is_a?(CodeObjects::NamespaceObject) }
226232
out << "<li id='object_#{child.path}' class='#{tree.classes.join(' ')}'>"
227233
out << "<div class='item' style='padding-left:#{tree.indent}'>"
228-
out << "<a class='toggle'></a> " if has_children
234+
accessible_props = "aria-label='#{name} child nodes' aria-expanded='false' aria-controls='object_#{child.path}'"
235+
out << "<a tabindex='0' class='toggle' role='button' #{accessible_props}></a> " if has_children
229236
out << linkify(child, name)
230237
out << " &lt; #{child.superclass.name}" if child.is_a?(CodeObjects::ClassObject) && child.superclass
231238
out << "<small class='search_info'>"
232239
out << child.namespace.title
233240
out << "</small>"
234241
out << "</div>"
235242
tree.nest do
236-
out << "<ul>#{class_list(child, tree)}</ul>" if has_children
243+
labeled_by = "aria-labelledby='object_#{child.path}'"
244+
out << "<div #{labeled_by}><ul>#{class_list(child, tree)}</ul></div>" if has_children
237245
end
238246
out << "</li>"
239247
end

‎templates/default/tags/html/example.erb

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<% if object.has_tag?(:example) %>
22
<div class="examples">
3-
<p class="tag_title">Examples:</p>
3+
<h4 class="tag_title">Examples:</h4>
44
<% object.tags(:example).each do |tag| %>
55
<% unless tag.name.empty? %>
6-
<p class="example_title"><%= htmlify_line(tag.name) %></p>
6+
<h5 class="example_title"><%= htmlify_line(tag.name) %></h5>
77
<% end %>
88
<pre class="example code"><code><%= html_syntax_highlight(tag.text) %></code></pre>
99
<% end %>

0 commit comments

Comments
 (0)