WCAG related accessibility fixes to student facing pages by ascholerChemeketa · Pull Request #1401 · RunestoneInteractive/rs

ascholerChemeketa · 2026-08-21T00:00:02Z

Collection of fixes to remove hard fails using WAVE to audit student facing pages.

This pull request introduces several improvements across the codebase, focusing on accessibility enhancements, UI/UX updates, and improved maintainability. The main changes include adding ARIA attributes for accessibility, updating the course switching UI to a dropdown with improved feedback, and standardizing the use of CSS variables for theming. Additionally, minor UI refinements and template adjustments were made for consistency and clarity.

Accessibility improvements:

Added ARIA labels and descriptive attributes to form elements and interactive controls in courses.html and profile.html for better screen reader support. [1] [2] [3] [4] [5]
Updated table headers in studentreport.html to use <th> elements for semantic correctness and accessibility. [1] [2]

UI/UX enhancements:

Replaced the course chooser select menu with a dropdown menu in current_course.html, providing clearer feedback and improved interaction. Updated the associated JavaScript for better error handling and accessibility. [1] [2] [3]
Added a <main> element wrapper to base templates for improved document structure and accessibility. [1] [2]

Styling and theming:

Refactored admin.css to use CSS variables for colors, improving maintainability and theming consistency across admin pages. Updated button, link, and banner styles accordingly. [1] [2] [3] [4] [5]
Adjusted color variables in assignment_block.css for better visual contrast.
Minor color and style tweaks in legal and HEVCAT templates for consistency. [1] [2]

Template and content updates:

Improved labeling and structure in donation and profile forms for clarity and accessibility. [1] [2]
Updated navigation blocks and template inheritance for better extensibility and content separation. [1] [2]

Context flag propagation:

Ensured the "student_page": True context variable is consistently passed to profile-related views for correct template rendering. [1] [2] [3] [4]

Copilot

Pull request overview

This PR targets WCAG/WAVE “hard fail” accessibility issues and improves UI consistency across student-facing and auth/admin pages by introducing semantic HTML updates, better ARIA/labeling, and centralizing colors via CSS custom properties.

Changes:

Introduces a shared :root color token set in rs-core.css and refactors multiple CSS files to use those variables for contrast/theming consistency.
Improves page semantics/accessibility by adding <main> wrappers and upgrading some tables/inputs with more appropriate markup.
Updates the course switcher UI to a dropdown with status messaging and more robust client-side error handling.

Reviewed changes

Copilot reviewed 24 out of 24 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
components/rsptx/templates/staticAssets/main.css	Switches to flex layout for sticky-footer structure on non-PTX pages.
components/rsptx/templates/staticAssets/css/subchapoverview.css	Replaces hard-coded colors with shared CSS variables.
components/rsptx/templates/staticAssets/css/studentreport.css	Replaces hard-coded colors with shared CSS variables and contrast tweaks.
components/rsptx/templates/staticAssets/css/student_detail.css	Replaces hard-coded colors with shared CSS variables.
components/rsptx/templates/staticAssets/css/rs-core.css	Adds CSS variable palette and updates “bootstrap-like” core styles.
components/rsptx/templates/staticAssets/css/peer.css	Replaces hard-coded colors with shared CSS variables.
components/rsptx/templates/staticAssets/css/lti.css	Uses shared danger background variable for error rows.
components/rsptx/templates/staticAssets/css/auth.css	Applies shared variables and refines auth/danger-zone styling.
components/rsptx/templates/staticAssets/css/assignmentoverview.css	Uses shared surface/text variables for stat cells.
components/rsptx/templates/staticAssets/css/assignment.css	Replaces hard-coded colors with shared variables and improves dropdown theming defaults.
components/rsptx/templates/staticAssets/css/admin.css	Refactors admin styling to shared variables for maintainability/contrast.
components/rsptx/templates/staticAssets/course.css	Adds styling for the new course chooser toggle button.
components/rsptx/templates/staticAssets/assignment/assignment_block.css	Adjusts success/error colors (contrast) in assignment blocks.
components/rsptx/templates/legal/hecvat.html	Minor contrast tweak for “N/A” answer color.
components/rsptx/templates/legal/_legal_base.html	Tweaks legal template styling and removes a breadcrumb block.
components/rsptx/templates/book/course/current_course.html	Replaces course select with dropdown + JS status/error handling.
components/rsptx/templates/assignment/student/studentreport.html	Improves table header semantics by using `<th>` in Grades and adds headers to Recent Activity.
components/rsptx/templates/admin/auth/profile.html	Improves form labeling/ARIA and clarifies delete-account section structure.
components/rsptx/templates/admin/auth/login.html	Overrides auth navbar items (empty) for the login page.
components/rsptx/templates/admin/auth/donate.html	Adds an explicit label for the “Other” donation amount field.
components/rsptx/templates/admin/auth/courses.html	Adds ARIA/labeling improvements for course selection and filtering controls.
components/rsptx/templates/admin/auth/_auth_base.html	Introduces `nav_items` block and wraps content in `<main>`.
components/rsptx/templates/_base.html	Wraps main content in `<main>` for improved document structure.
bases/rsptx/admin_server_api/routers/auth.py	Propagates `student_page: True` context for profile-related views.

Suppressed comments (1)

components/rsptx/templates/staticAssets/main.css:35

body is now a flex column with main { flex: 1; }, but .footer is still position: absolute and body no longer has a bottom margin. This can cause the footer to overlap page content (especially on short pages) and defeats the sticky-footer flex layout.

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50px;

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

                <input class="form-check-input" type="radio" name="course_name"
-                       id="ic_{{ course.course_name }}" value="{{ course.course_name }}">
+                       id="ic_{{ course.course_name }}" value="{{ course.course_name }}" aria-label="Text filter for course or author name">


          <table class="nodec">
+            <tr>
+              <th>Timestamp</th>
+              <th>Event</th>
+              <th>Div ID</th>


 .form-check {
    position: relative;
    display: block;
-    padding-left: 1.25rem;
-}
-
-.form-check-input {
-    position: absolute;
-    margin-top: 0.3rem;
-    margin-left: -1.25rem;
+    display: flex;
+    gap: 20px;


+    {% block nav_items %}
    <div class="ml-auto nav-item">
        <a class="nav-link" href="/admin/auth/login">Log In</a>
    </div>
-    <div class="nav-item">
-        <a class="nav-link" href="https://blog.runestone.academy/pages/faq.html">Help</a>
-    </div>
+    {% endblock %}


bnmnetp · 2026-08-21T13:10:05Z

Thanks, my assistant had done some work as well and is now merging and testing with the changes you added. Surprisingly small amount of overlap, lots of complementary work.

Measured pass over the admin/auth pages, the student-facing assignment and peer pages, and the interactives, layered on top of the token refactor from #1401. Every value below was chosen against the surface it actually renders on and verified in a browser rather than by eye; the ratio is in a comment next to each one. The most serious finding was not contrast at all: there was no visible focus indicator anywhere. rs-core.css set `outline: 0` on .btn:focus and .form-control:focus and replaced it with a 1.39:1 shadow, admin.css had two bare `outline: none`, and index.css disabled outlines on every input on the page -- including the instructor gradebook and invoice pages. That is WCAG 2.4.7, Level A. A single :focus-visible rule now draws a 3px ring in --rs-color-focus-ring with outline-offset, so the ring sits on the page background and keeps 8.79:1 whatever it wraps. Do not reintroduce `outline: none`. #1401 moved these colors into --rs-color-* but kept the failing values, so this fixes them in place: the .btn:hover opacity that faded white labels to 2.97:1, .btn:disabled on #ccc (1.61:1, and a bare .btn keeps a dark label so the color is set explicitly), #999 muted text, badge-instructor at 2.90:1, and control borders at 1.36:1 where 1.4.11 wants 3:1 -- hence the new --rs-color-border-input, kept distinct from the decorative --rs-color-border. Student-facing pages neither of us had checked: - peer_student.html / peer_instructor.html still carried the old #4a90e2 in inline <style> blocks, putting white table headers at 3.29:1. - .parsons .block code was hardcoded to `black`. At (0,3,1) it outranks every prettify rule, so assignment code rendered black on the dark canvas at 1.56:1 regardless of the syntax palette. Interactives: light mode was close to clean, the dark themes were not. Both dark blocks inherited light values they never overrode (.dark-mode had no --dropdownBg, so #e1e1e1 menu items sat on white at 1.31:1; [data-theme=dark] defined no parsons colors at all), the dark correct/incorrect fills were light colors that the matching component reuses for graded feedback (1.8:1), and parsons.js forced backgroundColor="#fff" / borderColor="#000" during block animations. Syntax highlighting had no dark treatment, so prettify and pygments token colors are now mapped onto shared --syn* variables; component CSS is imported inside .ptx-runestone-container/.runestone-sphinx, where a theme selector cannot match, so variables are the only mechanism available. Verified with a browser probe over the real app in light and dark, including after firing the Check controls so feedback states render: 0 issues across the 21 admin/auth pages, and the book, assignment and peer pages are down to PreTeXt's own theme.css (.byline, .token.comment, .token.keyword), which is not ours to change. 549 Python and 307 JS tests pass. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Andrew Scholer added 9 commits August 20, 2026 16:55

Consolidate core page colors and initial audit for WCAG

ef8e477

Add main landmark to _base and _auth-base

dadc75e

Fix accessibility issues with change course select

99794f0

Fix accessibility issues on profile page

aecaf61

Remove login help link to blog

e484691

Mark auth/profile as student_page

8fc0406

Fix accessibility on legal & compliance

ffc572f

Fix accessibility issues on course add and donate pages

11de325

Fix accessibility issues on student report

993cabc

ascholerChemeketa requested a review from bnmnetp as a code owner August 21, 2026 00:00

Copilot AI lite review requested due to automatic review settings August 21, 2026 00:00

Copilot AI reviewed Aug 21, 2026

View reviewed changes

Copilot started reviewing on behalf of ascholerChemeketa August 21, 2026 00:22 View session

bnmnetp merged commit f7c8911 into RunestoneInteractive:main Aug 21, 2026
1 check passed

Navigation Menu

Uh oh!

Uh oh!

WCAG related accessibility fixes to student facing pages - #1401

WCAG related accessibility fixes to student facing pages#1401
bnmnetp merged 9 commits into
RunestoneInteractive:mainfrom
ascholerChemeketa:accessibility-stuff

ascholerChemeketa commented Aug 21, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

bnmnetp commented Aug 21, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Uh oh!

Conversation

ascholerChemeketa commented Aug 21, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

bnmnetp commented Aug 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

bnmnetp commented Aug 21, 2026 •

edited

Loading