From 9608d995c814c48bcfd8cc6f97fe9c8ac11f4c92 Mon Sep 17 00:00:00 2001
From: Kelly Dwan <ryelle@users.noreply.github.com>
Date: Thu, 1 Aug 2024 13:32:15 -0400
Subject: [PATCH] Sensei Quizzes: Accessibility fixes for questions (#2802)

* Sensei Quiz: Wrap question answers in fieldset with question title.

* Fix accessibility of multiple choice options

* Remove margin on list items
---
 .../themes/pub/wporg-learn-2024/functions.php | 23 ++++++++++++
 .../wporg-learn-2024/src/style/_sensei.scss   | 37 +++++++++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/wp-content/themes/pub/wporg-learn-2024/functions.php b/wp-content/themes/pub/wporg-learn-2024/functions.php
index d8058d1ee..f8225b68e 100644
--- a/wp-content/themes/pub/wporg-learn-2024/functions.php
+++ b/wp-content/themes/pub/wporg-learn-2024/functions.php
@@ -44,6 +44,9 @@
 add_filter( 'wporg_block_site_breadcrumbs', __NAMESPACE__ . '\set_site_breadcrumbs' );
 add_filter( 'taxonomy_template_hierarchy', __NAMESPACE__ . '\modify_taxonomy_template_hierarchy' );
 
+// Attached at 50 to inject after title, description, etc, so that only answers are in the fieldset.
+add_action( 'sensei_quiz_question_inside_before', __NAMESPACE__ . '\sensei_question_add_opening_fieldset', 50 );
+add_action( 'sensei_quiz_question_inside_after', __NAMESPACE__ . '\sensei_question_add_closing_fieldset' );
 add_filter( 'sensei_learning_mode_lesson_status_icon', __NAMESPACE__ . '\modify_lesson_status_icon_add_aria', 10, 2 );
 
 remove_filter( 'template_include', array( 'Sensei_Templates', 'template_loader' ), 10, 1 );
@@ -461,3 +464,23 @@ function modify_lesson_status_icon_add_aria( $icon, $status ) {
 	$html->set_attribute( 'role', 'img' );
 	return $html->get_updated_html();
 }
+
+/**
+ * Use the "before question" hook to open a fieldset and add a ledgend to label the input options.
+ *
+ * @param int $question_id The question ID.
+ */
+function sensei_question_add_opening_fieldset( $question_id ) {
+	$title = strip_tags( get_the_title( $question_id ) );
+	?>
+	<fieldset>
+		<legend class="screen-reader-text"><?php echo esc_html( $title ); ?></legend>
+	<?php
+}
+
+/**
+ * Use the "after question" hook to close the fieldset opened in `sensei_question_add_opening_fieldset`.
+ */
+function sensei_question_add_closing_fieldset() {
+	echo '</fieldset>';
+}
diff --git a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
index 7c395d3cd..75f90e850 100644
--- a/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
+++ b/wp-content/themes/pub/wporg-learn-2024/src/style/_sensei.scss
@@ -124,10 +124,47 @@ body.sensei {
 			margin-bottom: var(--wp--preset--spacing--20);
 		}
 
+		#sensei-quiz-list fieldset {
+			padding: 0;
+			border: none;
+
+			ul {
+				margin-top: 0;
+			}
+		}
+
 		#sensei-quiz-list li ul li input,
 		#sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox + label::before {
 			flex-shrink: 0;
 		}
+
+		#sensei-quiz-list li ul li input:focus,
+		#sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox:focus + label::before {
+			outline: 1.5px solid var(--wp--preset--color--blueberry-1);
+			outline-offset: 1.5px;
+		}
+
+		#sensei-quiz-list .sensei-multiple-choice-answer-option-checkbox {
+			// Checkboxes need to be displayed, otherwise keyboard nav will not work.
+			// The following code is copied from `screen-reader-text` so that the checkboxes
+			// exist on the page, but are not shown visually. The visual checkboxes are added
+			// by `::before` on the label.
+			display: initial !important;
+			clip: rect(1px, 1px, 1px, 1px);
+			word-wrap: normal !important;
+			border: 0;
+			clip-path: inset(50%);
+			height: 1px;
+			margin: -1px;
+			overflow: hidden;
+			padding: 0;
+			position: absolute;
+			width: 1px;
+
+			+ label {
+				margin-left: 0;
+			}
+		}
 	}
 
 	section.wp-block-sensei-lms-course-outline {