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

Merged
merged 4 commits into from
Dec 17, 2024
Merged

Eliminate the visually hidden spans injected by javascript. #2631

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e02ee86
Eliminate the visually hidden spans injected by javascript.
drgrice1 Nov 19, 2024
57a267d
Make the page help link text in the visually hidden span the title of
drgrice1 Dec 11, 2024
992b831
Make the aria labels for the course configuration page specific to the
drgrice1 Dec 11, 2024
c3cfa8c
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);
}
});
})();
5 changes: 3 additions & 2 deletions lib/WeBWorK/ConfigObject.pm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,9 @@ sub entry_widget ($self, $default, $is_secret = 0) {
);
}

sub help_title ($self) { return $self->{c}->maketext('Variable Documentation') }
sub help_name ($self) { return '$' . $self->{var} }
sub help_title ($self) { return $self->{c}->maketext('Variable Documentation') }
sub help_name ($self) { return '$' . $self->{var} }
sub help_link_aria_label ($self) { return $self->{c}->maketext('Variable documentation for [_1]', $self->help_name) }

# This produces the documentation string and modal containing detailed documentation.
# It is the same for all config types.
Expand Down
5 changes: 3 additions & 2 deletions lib/WeBWorK/ConfigObject/lms_context_id.pm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,8 @@ sub entry_widget ($self, $default, $is_secret = 0) {
return $self->SUPER::entry_widget($default);
}

sub help_title ($self) { return $self->{c}->maketext('Setting Documentation') }
sub help_name ($self) { return $self->{c}->maketext('[_1] setting', $self->{var}) }
sub help_title ($self) { return $self->{c}->maketext('Setting Documentation') }
sub help_name ($self) { return $self->{c}->maketext('[_1] setting', $self->{var}) }
sub help_link_aria_label ($self) { return $self->{c}->maketext('Setting documentation for [_1]', $self->{var}) }

1;
5 changes: 3 additions & 2 deletions lib/WeBWorK/ConfigObject/setting.pm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@ sub save_string ($self, $oldval, $use_current = 0) {
return '';
}

sub help_title ($self) { return $self->{c}->maketext('Setting Documentation') }
sub help_name ($self) { return $self->{c}->maketext('[_1] setting', $self->{var}) }
sub help_title ($self) { return $self->{c}->maketext('Setting Documentation') }
sub help_name ($self) { return $self->{c}->maketext('[_1] setting', $self->{var}) }
sub help_link_aria_label ($self) { return $self->{c}->maketext('Setting documentation for [_1]', $self->{var}) }

1;
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('[_1] Help', $properties{name}))
)->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
8 changes: 6 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,12 @@
. '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('Notes regarding copying the course configuration file') =%>
</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('Problem Score 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"><%= $configObject->help_link_aria_label %></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/format_code_form.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
. 'the functionality of the code and in general is desired to have a common problem layout.') =%>"
data-bs-placement="top" data-bs-toggle="popover" role="button">
<i aria-hidden="true" class="fas fa-question-circle"></i>
<span class="visually-hidden"><%= maketext('Help Icon') %></span>
<span class="visually-hidden"><%= maketext('Perltidy Help') %></span>
</a>
</div>
<div class="form-check">
Expand All @@ -27,7 +27,7 @@
. 'which may not be converted correctly.') =%>"
data-bs-placement="top" data-bs-toggle="popover" role="button">
<i aria-hidden="true" class="fas fa-question-circle"></i>
<span class="visually-hidden"><%= maketext('Help Icon') %></span>
<span class="visually-hidden"><%= maketext('PGML Conversion Help') %></span>
</a>
</div>
</div>
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('Hardcopy Format 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('Proctor Password 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('Success Index 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('Success Index 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('Set Status 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('Answer Availability 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('Success Index 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('Problem Score Help') =%></span>
</a>
</th>
% }
Expand Down
2 changes: 1 addition & 1 deletion templates/ContentGenerator/Instructor/UserDetail/set_date_table.html.ep
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
'If the test was timed, granting the user an additional version '
. 'may be preferred to changing its dates.' )%>">
<i class="icon fa-solid fa-question-circle fa-lg" aria-hidden="true"></i><% =%>\
<span class="visually-hidden"><%= maketext('Help Icon') %></span><% =%>\
<span class="visually-hidden"><%= maketext('Advice on changing test dates') %></span><% =%>\
</a>
% }
<%= $isVersioned ? maketext(q{User's Test Version Dates}) : maketext('User Overrides') =%>
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('Adjusted Status 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
Loading