Skip to content

Commit 888de1d

Browse files
drgrice1drgrice1
committed
Eliminate the visually hidden spans injected by javascript.
The spans are simply added where needed. No javascript is needed for them to be in the page. The "?" help label is changed to just "Help" in most cases. The "?" is usually not read by screen readers. Note that these all go through the `helpMacro` method and a help file template is rendered. The template can also set the ariaLabel stash value to override the default "Help" text. Most pages shouldn't use the override though (I think). For example, on the "Accounts Manager" page the screen reader says something like "accounts manager heading level 1 link help link" (at least that is what Gnome Orca says for this). I don't think it should be read as "account manager heading level 1 link accounts manager help link". It increases the verbosity unnecessarily. However, on the "Assignments" page the title of the page is the course title. So the default aria label is overridden with "Assignments Help", and the screen reader says something like "course title heading level 1 link assignments help link". Note the help title in the dialog was also changed to "Assigments Help". It still said "Course Home Help". It seems we missed this when the page name was changed. Of course mileage will vary as to what different screen readers say on different systems and with different browsers.
1 parent e9ef2fa commit 888de1d

File tree

22 files changed

+73
-76
lines changed

22 files changed

+73
-76
lines changed

‎htdocs/js/System/system.js

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -117,18 +117,4 @@
117117
messages.forEach((message) => bootstrap.Alert.getOrCreateInstance(message)?.close())
118118
);
119119
}
120-
121-
// Accessibility
122-
// Present the contents of the data-alt attribute as alternative content for screen reader users.
123-
// The icon should be formatted as <i class="icon fas fa-close" data-alt="close"></i>
124-
// FIXME: Don't add these by javascript. Just add these in place instead.
125-
document.querySelectorAll('i.icon').forEach((icon) => {
126-
if (typeof icon.dataset.alt !== 'undefined') {
127-
const glyph = document.createElement('span');
128-
glyph.classList.add('visually-hidden');
129-
glyph.style.fontSize = icon.style.fontSize;
130-
glyph.textContent = icon.dataset.alt;
131-
icon.after(glyph);
132-
}
133-
});
134120
})();

‎lib/WeBWorK/ContentGenerator.pm

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -967,18 +967,13 @@ if defined.
967967
sub helpMacro ($c, $name, $args = {}) {
968968
my $ce = $c->ce;
969969
return '' unless -e "$ce->{webworkDirs}{root}/templates/HelpFiles/$name.html.ep";
970-
971-
my $label = $args->{label} // $c->tag(
972-
'i',
973-
class => 'icon fa-solid fa-circle-question ' . ($args->{label_size} // ''),
974-
'aria-hidden' => 'true',
975-
data => { alt => ' ? ' },
976-
''
970+
return $c->include(
971+
"HelpFiles/$name",
972+
name => $name,
973+
label => delete $args->{label} // '',
974+
labelSize => delete $args->{label_size} // '',
975+
args => $args
977976
);
978-
delete $args->{label};
979-
delete $args->{label_size};
980-
981-
return $c->include("HelpFiles/$name", name => $name, label => $label, args => $args);
982977
}
983978

984979
=item feedbackMacro(%params)

‎lib/WeBWorK/ContentGenerator/Instructor/ProblemSetDetail.pm

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -998,12 +998,10 @@ sub fieldHTML ($c, $userID, $setID, $problemID, $globalRecord, $userRecord, $fie
998998
bs_placement => 'top',
999999
bs_toggle => 'popover'
10001000
},
1001-
$c->tag(
1002-
'i',
1003-
class => 'icon fas fa-question-circle',
1004-
data => { alt => $c->maketext('Help Icon') },
1005-
'aria-hidden' => 'true'
1006-
)
1001+
$c->c(
1002+
$c->tag('i', class => 'icon fas fa-question-circle', 'aria-hidden' => 'true'),
1003+
$c->tag('span', class => 'visually-hidden', $c->maketext('Help'))
1004+
)->join('')
10071005
)
10081006
: '';
10091007

‎templates/ContentGenerator/Base/login_status.html.ep

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
%
99
<%= maketext('Logged in as [_1].', $userName) %>
1010
<%= link_to $c->systemLink(url_for 'logout'), class => 'btn btn-light btn-sm ms-2', begin %>
11-
<%= maketext('Log Out') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true" data-alt="signout"></i>
11+
<%= maketext('Log Out') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true"></i>
1212
<% end %>
1313
%
1414
% if ($effectiveUserID ne $userID) {
@@ -26,7 +26,7 @@
2626
<%= maketext('Acting as [_1].', $effectiveUserName) %>
2727
<%= link_to $c->systemLink(url_for, params => { effectiveUser => $userID }),
2828
class => 'btn btn-light btn-sm ms-2', begin %>
29-
<%= maketext('Stop Acting') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true" data-alt="signout"></i>
29+
<%= maketext('Stop Acting') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true"></i>
3030
<% end %>
3131
% }
3232
% } else {

‎templates/ContentGenerator/CourseAdmin/add_course_form.html.ep

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -227,8 +227,10 @@
227227
. 'the course configuration file. Then if there is something in the course configuration '
228228
. 'file that should be carried into the new course, the administrator can copy that manually. '
229229
. 'Alternatively, do copy the course configuration file, but then the administrator should '
230-
. 'inspect the new course configuration file and make adjustments for the new instructor.') =%>">
231-
<i class="icon fas fa-question-circle" data="<%= maketext('Help Icon') =%>" aria-hidden="true"></i>
230+
. 'inspect the new course configuration file and make adjustments for the new instructor.') =%>"
231+
>
232+
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
233+
<span class="visually-hidden"><%= maketext('Help') =%></span>
232234
</a>
233235
</label>
234236
</div>

‎templates/ContentGenerator/Grades/student_stats.html.ep

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,8 @@
1616
'The top number is the percent score on the problem. A period (.) indicates a problem '
1717
. 'has not been attempted. The bottom number is the number of incorrect attempts.'
1818
) =%>">
19-
<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') =%>"
20-
aria-hidden="true">
21-
</i>
19+
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
20+
<span class="visually-hidden"><%= maketext('Help') %></span>
2221
</a>
2322
</th>
2423
</tr>

‎templates/ContentGenerator/Instructor/AchievementList/default_table.html.ep

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,8 @@
4949
params => { editMode => 1, selected_achievements => $achievement_id }
5050
),
5151
begin %>
52-
<i class="icon fas fa-pencil-alt" data-alt="edit" aria-hidden="true"></i>
52+
<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
53+
<span class="visually-hidden"><%= maketext('Edit') =%></span>
5354
<% end %>
5455
</div>
5556
</td>

‎templates/ContentGenerator/Instructor/Config/config_help.html.ep

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,8 @@
1010
</div>
1111
<div>
1212
<%= link_to '#', data => { bs_toggle => 'modal', bs_target => "#$configObject->{name}_help_modal" }, begin =%>
13-
<i class="icon fas fa-question-circle" aria-hidden="true" data-alt="help"></i>
13+
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
14+
<span class="visually-hidden"><%= maketext('Help') =%></span>
1415
<% end =%>
1516
<% content_for 'modal-dialog-area', begin =%>
1617
<div class="modal fade" id="<%= "$configObject->{name}_help_modal" %>" tabindex="-1"

‎templates/ContentGenerator/Instructor/PGProblemEditor/hardcopy_form.html.ep

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@
3232
role => 'button',
3333
tabindex => 0,
3434
begin =%>
35-
<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true">
36-
</i>
35+
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
36+
<span class="visually-hidden"><%= maketext('Help') =%></span>
3737
<% end =%>
3838
<% end =%>
3939
<div class="col-auto">

‎templates/ContentGenerator/Instructor/ProblemSetDetail.html.ep

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -256,8 +256,8 @@
256256
bs_placement => 'top'
257257
},
258258
begin =%>
259-
<i class="icon fas fa-pencil-alt" data-alt="<%= maketext('Edit') =%>">
260-
</i>
259+
<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
260+
<span class="visually-hidden"><%= maketext('Edit') =%></span>
261261
<% end =%>
262262
<%= link_to $c->systemLink(url_for(
263263
{
@@ -274,7 +274,8 @@
274274
bs_title => maketext('Open in New Window')
275275
},
276276
begin =%>
277-
<i class="icon far fa-eye" data-alt="<%= maketext('View') %>"></i>
277+
<i class="icon far fa-eye" aria-hidden="true"></i>
278+
<span class="visually-hidden"><%= maketext('View') =%></span>
278279
<% end =%>
279280
</td>
280281
</tr>
@@ -481,9 +482,8 @@
481482
data-bs-toggle="tooltip" data-bs-placement="top"
482483
data-bs-title="<%= maketext('Render Problem') %>"
483484
type="button">
484-
<i class="icon far fa-image" data-alt="<%= maketext('Render') %>"
485-
aria-hidden="true">
486-
</i>
485+
<i class="icon far fa-image" aria-hidden="true"></i>
486+
<span class="visually-hidden"><%= maketext('Render') %></span>
487487
</button>
488488
<%= link_to $c->systemLink(url_for(
489489
'instructor_problem_editor_withset_withproblem',
@@ -497,7 +497,8 @@
497497
bs_title => maketext('Edit Problem')
498498
},
499499
begin =%>
500-
<i class="icon fas fa-pencil-alt" data-alt="<%= maketext('Edit') %>"></i>
500+
<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
501+
<span class="visually-hidden"><%= maketext('Edit') =%></span>
501502
<% end =%>
502503
% my $problemLink;
503504
% if ($isGatewaySet) {
@@ -546,7 +547,8 @@
546547
bs_title => maketext('Open in New Window')
547548
},
548549
begin =%>
549-
<i class="icon far fa-eye" data-alt="<%= maketext('View') %>"></i>
550+
<i class="icon far fa-eye" aria-hidden="true"></i>
551+
<span class="visually-hidden"><%= maketext('View') =%></span>
550552
<% end =%>
551553
% }
552554
% if ($authz->hasPermissions(param('user'), 'problem_grader')) {
@@ -562,7 +564,8 @@
562564
bs_title => maketext("Grade Problem")
563565
},
564566
begin =%>
565-
<i class="icon fas fa-edit" data-alt="<%= maketext("Grade") %>"></i>
567+
<i class="icon fas fa-edit" aria-hidden="true"></i>
568+
<span class="visually-hidden"><%= maketext('Grade') =%></span>
566569
<% end =%>
567570
% }
568571
</div>

0 commit comments

Comments
 (0)