Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Eliminate the visually hidden spans injected by javascript. #2631

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open

Eliminate the visually hidden spans injected by javascript. #2631

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
888de1d
Eliminate the visually hidden spans injected by javascript.
drgrice1 Nov 19, 2024
d9df60e
Make the page help link text in the visually hidden span the title of
drgrice1 Dec 11, 2024
fc43d68
Make the aria labels for the course configuration page specific to the
drgrice1 Dec 11, 2024
af515d5
Change "Help" links to be more specific.
drgrice1 Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 0 additions & 14 deletions htdocs/js/System/system.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,18 +117,4 @@
messages.forEach((message) => bootstrap.Alert.getOrCreateInstance(message)?.close())
);
}

// Accessibility
// Present the contents of the data-alt attribute as alternative content for screen reader users.
// The icon should be formatted as <i class="icon fas fa-close" data-alt="close"></i>
// FIXME: Don't add these by javascript. Just add these in place instead.
document.querySelectorAll('i.icon').forEach((icon) => {
if (typeof icon.dataset.alt !== 'undefined') {
const glyph = document.createElement('span');
glyph.classList.add('visually-hidden');
glyph.style.fontSize = icon.style.fontSize;
glyph.textContent = icon.dataset.alt;
icon.after(glyph);
}
});
})();
17 changes: 6 additions & 11 deletions lib/WeBWorK/ContentGenerator.pm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -967,18 +967,13 @@ if defined.
sub helpMacro ($c, $name, $args = {}) {
my $ce = $c->ce;
return '' unless -e "$ce->{webworkDirs}{root}/templates/HelpFiles/$name.html.ep";

my $label = $args->{label} // $c->tag(
'i',
class => 'icon fa-solid fa-circle-question ' . ($args->{label_size} // ''),
'aria-hidden' => 'true',
data => { alt => ' ? ' },
''
return $c->include(
"HelpFiles/$name",
name => $name,
label => delete $args->{label} // '',
labelSize => delete $args->{label_size} // '',
args => $args
);
delete $args->{label};
delete $args->{label_size};

return $c->include("HelpFiles/$name", name => $name, label => $label, args => $args);
}

=item feedbackMacro(%params)
Expand Down
10 changes: 4 additions & 6 deletions lib/WeBWorK/ContentGenerator/Instructor/ProblemSetDetail.pm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -998,12 +998,10 @@ sub fieldHTML ($c, $userID, $setID, $problemID, $globalRecord, $userRecord, $fie
bs_placement => 'top',
bs_toggle => 'popover'
},
$c->tag(
'i',
class => 'icon fas fa-question-circle',
data => { alt => $c->maketext('Help Icon') },
'aria-hidden' => 'true'
)
$c->c(
$c->tag('i', class => 'icon fas fa-question-circle', 'aria-hidden' => 'true'),
$c->tag('span', class => 'visually-hidden', $c->maketext('Help'))
)->join('')
)
: '';

Expand Down
4 changes: 2 additions & 2 deletions templates/ContentGenerator/Base/login_status.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
%
<%= maketext('Logged in as [_1].', $userName) %>
<%= link_to $c->systemLink(url_for 'logout'), class => 'btn btn-light btn-sm ms-2', begin %>
<%= maketext('Log Out') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true" data-alt="signout"></i>
<%= maketext('Log Out') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true"></i>
<% end %>
%
% if ($effectiveUserID ne $userID) {
Expand All @@ -26,7 +26,7 @@
<%= maketext('Acting as [_1].', $effectiveUserName) %>
<%= link_to $c->systemLink(url_for, params => { effectiveUser => $userID }),
class => 'btn btn-light btn-sm ms-2', begin %>
<%= maketext('Stop Acting') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true" data-alt="signout"></i>
<%= maketext('Stop Acting') %> <i class="icon fas fa-sign-out-alt" aria-hidden="true"></i>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that the changes in this file completely remove the visually hidden spans, and instead make the icons aria-hidden. These icons are really purely decorative symbols that don't actually add anything for screen reader users. The button text says what is needed. It does not make sense to have the button text say "Log Out" and have the icon say "signout", so that the screen reader will say "Log Out signout". In fact in one case (depending on how you arrive at this point in the page) Gnome Orca says "Log Out visited link signout visited link", making it seem like there are two links where there is only one.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, the "signout" text was incorrect for the "Stop Acting" button.

<% end %>
% }
% } else {
Expand Down
6 changes: 4 additions & 2 deletions templates/ContentGenerator/CourseAdmin/add_course_form.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -227,8 +227,10 @@
. 'the course configuration file. Then if there is something in the course configuration '
. 'file that should be carried into the new course, the administrator can copy that manually. '
. 'Alternatively, do copy the course configuration file, but then the administrator should '
. 'inspect the new course configuration file and make adjustments for the new instructor.') =%>">
<i class="icon fas fa-question-circle" data="<%= maketext('Help Icon') =%>" aria-hidden="true"></i>
. 'inspect the new course configuration file and make adjustments for the new instructor.') =%>"
>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
</a>
</label>
</div>
Expand Down
5 changes: 2 additions & 3 deletions templates/ContentGenerator/Grades/student_stats.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,8 @@
'The top number is the percent score on the problem. A period (.) indicates a problem '
. 'has not been attempted. The bottom number is the number of incorrect attempts.'
) =%>">
<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') =%>"
aria-hidden="true">
</i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') %></span>
</a>
</th>
</tr>
Expand Down
3 changes: 2 additions & 1 deletion templates/ContentGenerator/Instructor/AchievementList/default_table.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,8 @@
params => { editMode => 1, selected_achievements => $achievement_id }
),
begin %>
<i class="icon fas fa-pencil-alt" data-alt="edit" aria-hidden="true"></i>
<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Edit') =%></span>
<% end %>
</div>
</td>
Expand Down
3 changes: 2 additions & 1 deletion templates/ContentGenerator/Instructor/Config/config_help.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@
</div>
<div>
<%= link_to '#', data => { bs_toggle => 'modal', bs_target => "#$configObject->{name}_help_modal" }, begin =%>
<i class="icon fas fa-question-circle" aria-hidden="true" data-alt="help"></i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
<% end =%>
<% content_for 'modal-dialog-area', begin =%>
<div class="modal fade" id="<%= "$configObject->{name}_help_modal" %>" tabindex="-1"
Expand Down
4 changes: 2 additions & 2 deletions templates/ContentGenerator/Instructor/PGProblemEditor/hardcopy_form.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,8 @@
role => 'button',
tabindex => 0,
begin =%>
<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true">
</i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
<% end =%>
<% end =%>
<div class="col-auto">
Expand Down
21 changes: 12 additions & 9 deletions templates/ContentGenerator/Instructor/ProblemSetDetail.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -256,8 +256,8 @@
bs_placement => 'top'
},
begin =%>
<i class="icon fas fa-pencil-alt" data-alt="<%= maketext('Edit') =%>">
</i>
<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Edit') =%></span>
<% end =%>
<%= link_to $c->systemLink(url_for(
{
Expand All @@ -274,7 +274,8 @@
bs_title => maketext('Open in New Window')
},
begin =%>
<i class="icon far fa-eye" data-alt="<%= maketext('View') %>"></i>
<i class="icon far fa-eye" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('View') =%></span>
<% end =%>
</td>
</tr>
Expand Down Expand Up @@ -481,9 +482,8 @@
data-bs-toggle="tooltip" data-bs-placement="top"
data-bs-title="<%= maketext('Render Problem') %>"
type="button">
<i class="icon far fa-image" data-alt="<%= maketext('Render') %>"
aria-hidden="true">
</i>
<i class="icon far fa-image" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Render') %></span>
</button>
<%= link_to $c->systemLink(url_for(
'instructor_problem_editor_withset_withproblem',
Expand All @@ -497,7 +497,8 @@
bs_title => maketext('Edit Problem')
},
begin =%>
<i class="icon fas fa-pencil-alt" data-alt="<%= maketext('Edit') %>"></i>
<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Edit') =%></span>
<% end =%>
% my $problemLink;
% if ($isGatewaySet) {
Expand Down Expand Up @@ -546,7 +547,8 @@
bs_title => maketext('Open in New Window')
},
begin =%>
<i class="icon far fa-eye" data-alt="<%= maketext('View') %>"></i>
<i class="icon far fa-eye" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('View') =%></span>
<% end =%>
% }
% if ($authz->hasPermissions(param('user'), 'problem_grader')) {
Expand All @@ -562,7 +564,8 @@
bs_title => maketext("Grade Problem")
},
begin =%>
<i class="icon fas fa-edit" data-alt="<%= maketext("Grade") %>"></i>
<i class="icon fas fa-edit" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Grade') =%></span>
<% end =%>
% }
</div>
Expand Down
3 changes: 2 additions & 1 deletion ...ontentGenerator/Instructor/ProblemSetDetail/restricted_login_proctor_password_row.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@
. 'Alternatively, leave this blank if you would like to have a proctor level user enter '
. 'their username and password on the student\'s screen for authentication.'
) =%>">
<i class="icon fas fa-question-circle" aria-hidden="true" data-alt="<%= maketext('Help Icon') %>"></i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
</a>
</td>
<td>
Expand Down
3 changes: 2 additions & 1 deletion templates/ContentGenerator/Instructor/SetMaker/problem_row.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -221,7 +221,8 @@
bs_placement => 'top'
},
begin =%>
<i class="icon fas fa-pencil-alt" data-alt="edit" aria-hidden="true"></i>
<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Edit') =%></span>
<% end =%>
<%= link_to $c->systemLink(
url_for($isGatewaySet ? 'gateway_quiz' : 'problem_detail',
Expand Down
7 changes: 4 additions & 3 deletions templates/ContentGenerator/Instructor/Stats/problem_stats.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,8 @@
data-bs-content="<%= maketext(
'Success index is the square of the average score divided by the average number of attempts.'
) %>">
<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true">
</i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
</a>
</th>
<td><%= sprintf('%0.1f', 100 * $successIndex) %></td>
Expand Down Expand Up @@ -87,7 +87,8 @@
<a class="help-popup ms-2" role="button" tabindex="0" data-bs-placement="top" data-bs-toggle="popover"
data-bs-content="<%=
maketext('Success index is the square of the score divided by the number of attempts.') =%>">
<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true"></i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
</a>
% end
% push @tableHeaders, $successIndexHeader->();
Expand Down
12 changes: 6 additions & 6 deletions templates/ContentGenerator/Instructor/Stats/set_stats.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@
'This gives the status and dates of the main set. '
. 'Indvidual students may have different settings.'
) %>">
<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true">
</i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
</a>
</th>
<td>
Expand Down Expand Up @@ -48,9 +48,8 @@
'Answer availability for tests depends on multiple settings. This only indicates the '
. 'template answer date has passed. See Set Detail page for actual availability.'
) =%>">
<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') =%>"
aria-hidden="true">
</i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
</a>
% }
</td>
Expand Down Expand Up @@ -108,7 +107,8 @@
<a class="help-popup ms-2" role="button" tabindex="0" data-bs-placement="top" data-bs-toggle="popover"
data-bs-content="<%= maketext(
'Success index is the square of the average score divided by the average number of attempts.') %>">
<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') %>" aria-hidden="true"></i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
</a>
% end
%
Expand Down
5 changes: 2 additions & 3 deletions templates/ContentGenerator/Instructor/StudentProgress/set_progress.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,9 +196,8 @@
'The top number is the percent score on the problem. A period (.) indicates a problem '
. 'has not been attempted. The bottom number is the number of incorrect attempts.'
) =%>">
<i class="icon fas fa-question-circle" data-alt="<%= maketext('Help Icon') =%>"
aria-hidden="true">
</i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
</a>
</th>
% }
Expand Down
5 changes: 2 additions & 3 deletions templates/ContentGenerator/Instructor/UserList/user_row.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,8 @@
% if ($editable) {
<%= link_to $c->systemLink(url_for, params => { editMode => 1, visible_users => $user->user_id }),
begin =%>
<i class="icon fas fa-pencil-alt" aria-hidden="true"
data-alt="<%= maketext('Link to Edit Page for [_1]', $user->user_id) %>">
</i>
<i class="icon fas fa-pencil-alt" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Edit [_1]', $user->user_id) %></span>
% end
% }
</div>
Expand Down
3 changes: 2 additions & 1 deletion templates/ContentGenerator/ProblemSet/problem_list.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,8 @@
)
},
begin =%>
<i class="icon fas fa-question-circle" aria-hidden="true" data-alt="Help Icon"></i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
<% end =%>
</th>
<th><%= maketext('Counts for Parent') %></th>
Expand Down
10 changes: 6 additions & 4 deletions templates/ContentGenerator/ProblemSet/version_list.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +173,8 @@
<th scope="col"><%= maketext('End') %></th>
<th scope="col" class="hardcopy">
<i class="icon far fa-lg fa-arrow-alt-circle-down" aria-hidden="true"
title="<%= maketext('Generate Hardcopy') %>"
data-alt="<%= maketext('Generate Hardcopy') %>"></i>
title="<%= maketext('Generate Hardcopy') %>"></i>
<span class="visually-hidden"><%= maketext('Generate Hardcopy') =%></span>
</th>
</tr>
</thead>
Expand Down Expand Up @@ -210,8 +210,10 @@
class => 'hardcopy-link',
begin =%>
<i class="icon far fa-arrow-alt-circle-down fa-lg" aria-hidden="true"
title="<%= maketext('Download [_1]', $ver->{id} =~ s/_/ /gr) %>"
data-alt="<%= maketext('Download [_1]', $ver->{id} =~ s/_/ /gr) %>"></i>
title="<%= maketext('Download [_1]', $ver->{id} =~ s/_/ /gr) %>"></i>
<span class="visually-hidden">
<%= maketext('Download [_1]', $ver->{id} =~ s/_/ /gr) %>
</span>
<% end =%>
% }
%
Expand Down
3 changes: 2 additions & 1 deletion templates/HTML/SingleProblemGrader/grader.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@
bs_toggle => 'popover'
},
begin =%>
<i class="icon fas fa-question-circle" aria-hidden="true" data-alt="Help Icon"></i>
<i class="icon fas fa-question-circle" aria-hidden="true"></i>
<span class="visually-hidden"><%= maketext('Help') =%></span>
<% end =%>
<% end =%>
<div class="col-sm">
Expand Down
1 change: 1 addition & 0 deletions templates/HelpFiles/Levels.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
%
% layout 'help_macro';
% title maketext('OPL Problem Levels Help');
% stash->{ariaLabel} = title;
%
<p>
<%= maketext('Some OPL problems have been rated for difficulty/educational objective. The levels are loosely '
Expand Down
3 changes: 2 additions & 1 deletion templates/HelpFiles/ProblemSets.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
%################################################################################
%
% layout 'help_macro';
% title maketext('Course Home Help');
% title maketext('Assignments Help');
% stash->{ariaLabel} = title;
%
<p><%= maketext('This is the standard entry point for the course.') %></p>
<p><%= maketext('It lists the assignments available for the students.') %></p>
Expand Down
7 changes: 6 additions & 1 deletion templates/layouts/help_macro.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
<%= link_to '#', data => { bs_toggle => 'modal', bs_target => "#${name}_help_modal" }, %$args, begin =%>
<%== $label =%>
% if ($label) {
<%== $label =%>
% } else {
<i class="icon fa-solid fa-circle-question <%= $labelSize %>" aria-hidden="true"></i>
<span class="visually-hidden"><%= stash->{ariaLabel} // maketext('Help') %></span>
% }
<% end =%>
<% content_for 'modal-dialog-area' => begin =%>
<div class="modal fade" id="<%= "${name}_help_modal" %>" tabindex="-1"
Expand Down