Merge pull request openwebwork#3096 from Alex-Jordan/button-space

make a few anchors with 'role="button"' respond to space

Author: somiaj

htdocs/js/System/system.js

@@ -93,6 +93,16 @@
 		});
 	}
 
+	// Make elements with role="button" (that have been given the class below) activate upon use of the spacebar.
+	for (const btn of document.querySelectorAll('.spacebar-activatable')) {
+		btn.addEventListener('keydown', (e) => {
+			if (e.key === ' ') {
+				e.preventDefault();
+				btn.click();
+			}
+		});
+	}
+
 	// Turn help boxes into popovers
 	document.querySelectorAll('.help-popup').forEach((popover) => {
 		popover.addEventListener('click', (e) => e.preventDefault());

templates/ContentGenerator/CourseAdmin/manage_lti_course_map_form.html.ep

@@ -30,7 +30,7 @@
 						</td>
 						<td class="text-center">
 							% if ($ltiConfigs->{$_}{LTIVersion} && $ltiConfigs->{$_}{LTIVersion} =~ /^v1p[13]$/) {
-								<a href="#" role="button" data-bs-toggle="modal"
+								<a href="#" role="button" class="lti-config-btn spacebar-activatable" data-bs-toggle="modal"
 									data-bs-target="#<%= $_ %>-config-modal">
 									<i class="fa-solid fa-circle-question fa-xl"></i>
 									<span class="visually-hidden"><%= maketext('LTI Configuration') %></span>

templates/ContentGenerator/Instructor/JobManager.html.ep

@@ -183,8 +183,8 @@
 							<div class="d-flex justify-content-between gap-1">
 								<%= maketext($jobs->{$jobID}{state}) =%>
 								% if (defined $jobs->{$jobID}{result}) {
-									<a role="button" class="result-btn" tabindex="0" data-bs-toggle="modal" href="#"
-										data-bs-target="<%= "#result-$jobID" %>">
+									<a role="button" class="result-btn spacebar-activatable" data-bs-toggle="modal"
+										href="#" data-bs-target="<%= "#result-$jobID" %>">
 										<i class="fa-solid fa-circle-info fa-xl" aria-hidden="true"></i>
 										<span class="visually-hidden">
 											<%= maketext('Result for job [_1]', $jobID) %>