Merge pull request #2631 from drgrice1/aria-spans

Eliminate the visually hidden spans injected by javascript.
openwebwork · Dec 17, 2024 · af70879 · af70879
2 parents 44e76a4 + c3cfa8c
commit af70879
Show file tree

Hide file tree

Showing 26 changed files with 87 additions and 87 deletions.
diff --git a/htdocs/js/System/system.js b/htdocs/js/System/system.js
@@ -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);
-		}
-	});
 })();
diff --git a/lib/WeBWorK/ConfigObject.pm b/lib/WeBWorK/ConfigObject.pm
@@ -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.

diff --git a/lib/WeBWorK/ConfigObject/lms_context_id.pm b/lib/WeBWorK/ConfigObject/lms_context_id.pm
@@ -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;
diff --git a/lib/WeBWorK/ConfigObject/setting.pm b/lib/WeBWorK/ConfigObject/setting.pm
@@ -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;
diff --git a/lib/WeBWorK/ContentGenerator.pm b/lib/WeBWorK/ContentGenerator.pm
@@ -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)

diff --git a/lib/WeBWorK/ContentGenerator/Instructor/ProblemSetDetail.pm b/lib/WeBWorK/ContentGenerator/Instructor/ProblemSetDetail.pm
@@ -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('')
 		)
 		: '';
 

diff --git a/templates/ContentGenerator/Base/login_status.html.ep b/templates/ContentGenerator/Base/login_status.html.ep
@@ -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) {
@@ -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>
 		<% end %>
 	% }
 % } else {

diff --git a/templates/ContentGenerator/CourseAdmin/add_course_form.html.ep b/templates/ContentGenerator/CourseAdmin/add_course_form.html.ep
@@ -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>

diff --git a/templates/ContentGenerator/Grades/student_stats.html.ep b/templates/ContentGenerator/Grades/student_stats.html.ep
@@ -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>

diff --git a/templates/ContentGenerator/Instructor/AchievementList/default_table.html.ep b/templates/ContentGenerator/Instructor/AchievementList/default_table.html.ep
@@ -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>

diff --git a/templates/ContentGenerator/Instructor/Config/config_help.html.ep b/templates/ContentGenerator/Instructor/Config/config_help.html.ep
@@ -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"

diff --git a/templates/ContentGenerator/Instructor/PGProblemEditor/format_code_form.html.ep b/templates/ContentGenerator/Instructor/PGProblemEditor/format_code_form.html.ep
@@ -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">
@@ -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>
diff --git a/templates/ContentGenerator/Instructor/PGProblemEditor/hardcopy_form.html.ep b/templates/ContentGenerator/Instructor/PGProblemEditor/hardcopy_form.html.ep
@@ -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">

diff --git a/templates/ContentGenerator/Instructor/ProblemSetDetail.html.ep b/templates/ContentGenerator/Instructor/ProblemSetDetail.html.ep
@@ -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(
 													{
@@ -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>
@@ -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',
@@ -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) {
@@ -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')) {
@@ -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>

diff --git a/...ontentGenerator/Instructor/ProblemSetDetail/restricted_login_proctor_password_row.html.ep b/...ontentGenerator/Instructor/ProblemSetDetail/restricted_login_proctor_password_row.html.ep
@@ -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>

diff --git a/templates/ContentGenerator/Instructor/SetMaker/problem_row.html.ep b/templates/ContentGenerator/Instructor/SetMaker/problem_row.html.ep
@@ -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',

diff --git a/templates/ContentGenerator/Instructor/Stats/problem_stats.html.ep b/templates/ContentGenerator/Instructor/Stats/problem_stats.html.ep
@@ -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>
@@ -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->();

diff --git a/templates/ContentGenerator/Instructor/Stats/set_stats.html.ep b/templates/ContentGenerator/Instructor/Stats/set_stats.html.ep
@@ -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>
@@ -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>
@@ -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
 %

diff --git a/templates/ContentGenerator/Instructor/StudentProgress/set_progress.html.ep b/templates/ContentGenerator/Instructor/StudentProgress/set_progress.html.ep
@@ -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>
 				% }

diff --git a/templates/ContentGenerator/Instructor/UserDetail/set_date_table.html.ep b/templates/ContentGenerator/Instructor/UserDetail/set_date_table.html.ep
@@ -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') =%>

diff --git a/templates/ContentGenerator/Instructor/UserList/user_row.html.ep b/templates/ContentGenerator/Instructor/UserList/user_row.html.ep
@@ -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>

diff --git a/templates/ContentGenerator/ProblemSet/problem_list.html.ep b/templates/ContentGenerator/ProblemSet/problem_list.html.ep
@@ -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>

diff --git a/templates/ContentGenerator/ProblemSet/version_list.html.ep b/templates/ContentGenerator/ProblemSet/version_list.html.ep
@@ -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>
@@ -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 =%>
 						% }
 						%