WCAG related accessibility fixes to student facing pages

bases/rsptx/admin_server_api/routers/auth.py

@@ -724,6 +724,7 @@ async def profile_page(request: Request):
             "user": user,
             "errors": [],
             "success": None,
+            "student_page": True,
             **(await _navbar_context(user)),
         },
     )
@@ -753,6 +754,7 @@ async def profile_post(
                 "user": user,
                 "errors": errors,
                 "success": None,
+                "student_page": True,
                 **(await _navbar_context(user)),
             },
         )
@@ -769,6 +771,7 @@ async def profile_post(
             "user": updated,
             "errors": [],
             "success": "Profile updated successfully.",
+            "student_page": True,
             **(await _navbar_context(updated)),
         },
     )
@@ -788,6 +791,7 @@ async def delete_account(request: Request, confirm: str = Form(default="")):
                 "user": user,
                 "errors": ["Username confirmation did not match. Account not deleted."],
                 "success": None,
+                "student_page": True,
                 **(await _navbar_context(user)),
             },
         )

components/rsptx/templates/_base.html

@@ -37,11 +37,13 @@
         {% include "_navbar.html" %}
         {% endblock %}
 
-        <div class="container-fluid">
-            <!-- child template -->
-            {% block content %}
-            {% endblock %}
-        </div>
+        <main>
+            <div class="container-fluid">
+                <!-- child template -->
+                {% block content %}
+                {% endblock %}
+            </div>
+        </main>
 
         {% include 'footer.html' %}
 

components/rsptx/templates/admin/auth/_auth_base.html

@@ -18,18 +18,19 @@
     <a class="navbar-brand" href="https://runestone.academy">
         <img src="/staticAssets/RAIcon.png" height="30px" alt="Runestone Logo"/>
     </a>
+    {% 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 %}
 </nav>
 {% endif %}
 
-<div class="container-fluid">
-    {% block content %}{% endblock %}
-</div>
+    <main>
+        <div class="container-fluid">
+            {% block content %}{% endblock %}
+        </div>
+    </main>
 
 {% include 'footer.html' %}
 

components/rsptx/templates/admin/auth/courses.html

@@ -14,10 +14,10 @@ <h1>Choose Your Course</h1>
     <form method="post" action="/admin/auth/courses" id="coursesForm">
         <input type="hidden" name="institution" value="{{ institution }}">
 
-        <div class="section-title">Enter Course Name Directly</div>
+        <div class="section-title" id="direct-course-label">Enter Course Name Directly</div>
         <p class="text-muted small">If your instructor gave you a specific course name, type it here.</p>
         <div class="form-group">
-            <input type="text" class="form-control" id="direct_course" placeholder="e.g. luther_thinkcspy_fall25"
+            <input type="text" class="form-control" id="direct_course" aria-labelledby="direct-course-label" placeholder="e.g. luther_thinkcspy_fall25"
                    oninput="selectDirect(this.value)">
         </div>
 
@@ -28,7 +28,7 @@ <h1>Choose Your Course</h1>
         <div class="course-option">
             <div class="form-check">
                 <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">
                 <label class="form-check-label" for="ic_{{ course.course_name }}">
                     <strong>{{ course.course_name }}</strong>
                     {% if course.institution %}<span class="text-muted"> — {{ course.institution }}</span>{% endif %}
@@ -40,7 +40,7 @@ <h1>Choose Your Course</h1>
 
         <div class="section-title">Open Books (Self-Study)</div>
         <p class="text-muted small">These books are available to anyone. Pick the one you want to read.</p>
-        <input type="text" class="form-control" id="bookFilter" placeholder="Filter books by title or author…">
+        <input type="text" class="form-control" id="bookFilter" placeholder="Filter books by title or author…"  aria-label="Text filter for course or author name">
         <div id="bookList">
         {% for book in open_books %}
         <div class="course-option book-entry"

components/rsptx/templates/admin/auth/donate.html

@@ -42,7 +42,7 @@ <h1>Support Runestone Academy</h1>
                 <label for="donate100">$100</label>
             </div>
             <div class="amount-option other-amount">
-                Other: <input type="text" class="form-control" name="donate" id="donateother" value=""/>
+                <label for="donateother">Other:</label> <input type="text" class="form-control" name="donate" id="donateother" value=""/>
                 Anything more than $1 is appreciated.
             </div>
             <div class="donate-actions">

components/rsptx/templates/admin/auth/login.html

@@ -2,6 +2,10 @@
 
 {% block title %}Log In — Runestone Academy{% endblock %}
 
+
+{% block nav_items %}
+{% endblock %}
+
 {% block content %}
 <div class="auth-card">
     <h1>Log In</h1>

components/rsptx/templates/admin/auth/profile.html

@@ -38,10 +38,10 @@ <h1>Edit Profile</h1>
                    value="{{ user.email }}" required>
         </div>
 
-        <div class="section-label">Username</div>
+        <div class="section-label" id="username-label">Username</div>
         <div class="form-group">
-            <input type="text" class="form-control" value="{{ user.username }}" disabled>
-            <small class="form-text text-muted">Usernames cannot be changed.</small>
+            <input type="text" class="form-control" value="{{ user.username }}" disabled aria-describedby="username-help" aria-labelledby="username-label">
+            <small class="form-text text-muted" id="username-help">Usernames cannot be changed.</small>
         </div>
 
         <button type="submit" class="btn btn-rs-primary btn-rs-primary--inline">Save Changes</button>
@@ -53,18 +53,18 @@ <h1>Edit Profile</h1>
     </div>
 
     <div class="danger-zone">
-        <h5>Delete Account</h5>
-        <p class="text-muted small">This permanently removes your account and all associated data. This cannot be undone.</p>
+        <h2>Delete Account</h2>
+        <p class="small">This permanently removes your account and all associated data. This cannot be undone.</p>
         <button class="btn-danger-outline" data-toggle="collapse" data-target="#deleteForm">
             Delete My Account
         </button>
         <div id="deleteForm" class="collapse mt-3">
             <form method="post" action="/admin/auth/delete-account"
                   onsubmit="return confirm('This will permanently delete your account. Are you sure?')">
                 <div class="form-group">
-                    <label>Type your username <strong>{{ user.username }}</strong> to confirm:</label>
+                    <label for="confirm">Type your username <strong>{{ user.username }}</strong> to confirm:</label>
                     <input type="text" class="form-control" name="confirm" required
-                           placeholder="{{ user.username }}">
+                           placeholder="{{ user.username }}" id="confirm">
                 </div>
                 <button type="submit" class="btn-danger-outline">Permanently Delete Account</button>
             </form>

components/rsptx/templates/assignment/student/studentreport.html

@@ -40,11 +40,11 @@ <h2>Student Report - {{ user.first_name }} {{ user.last_name }}</h2>
           <table>
             <thead>
               <tr>
-                <td>Assignment</td>
-                <td>Due Date</td>
-                <td>Score</td>
-                <td>Percent</td>
-                <td>Avg Score</td>
+                <th>Assignment</th>
+                <th>Due Date</th>
+                <th>Score</th>
+                <th>Percent</th>
+                <th>Avg Score</th>
               </tr>
             </thead>
             <tbody>
@@ -74,6 +74,11 @@ <h2>Student Report - {{ user.first_name }} {{ user.last_name }}</h2>
         <div class="dash-section-header">Recent Activity (Time in UTC)</div>
         <div class="dash-section-content scroll">
           <table class="nodec">
+            <tr>
+              <th>Timestamp</th>
+              <th>Event</th>
+              <th>Div ID</th>
+            </tr>
             {% for row in activity %}
             <tr>
               <td>{{ row.timestamp }}</td>

components/rsptx/templates/book/course/current_course.html

@@ -16,17 +16,20 @@
 
 {% set navitems %}
 {% if course_list|length > 1 %}
-<li class="nav-item">
-  <span class="nav-link">
-    Change course:
-    <select id="course_chooser" onchange="change_course()">
-      {% for c in course_list: %}
-      <option {% if c.course_name == course.course_name %}selected{% endif %} value="{{c.course_name}}">
-        {{c.course_name}}
-      </option>
-      {% endfor %}
-    </select>
-  </span>
+<li class="nav-item dropdown">
+  <button class="nav-link dropdown-toggle course-chooser-toggle" type="button" id="course_chooser_toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+    Change course
+  </button>
+  <div class="dropdown-menu" aria-labelledby="course_chooser_toggle">
+    {% for c in course_list: %}
+      {% if c.course_name == course.course_name %}
+      <span class="dropdown-item active" aria-current="page">{{c.course_name}} (current)</span>
+      {% else %}
+      <button type="button" class="dropdown-item course-chooser-option" data-course-name="{{c.course_name}}">{{c.course_name}}</button>
+      {% endif %}
+    {% endfor %}
+  </div>
+  <span id="course_chooser_status" class="sr-only" role="status" aria-live="polite"></span>
 </li>
 {% endif %}
 {% endset %}
@@ -108,14 +111,30 @@ <h2 class="heading">Get help, learn about updates, share resources!</h2>
 {% endif %}
 
 <script>
-async function change_course(course_name) {
-    let new_course = document.getElementById("course_chooser").value
-    let request = new Request(`/ns/course/changeCourse/${new_course}`, {
-        method: "GET",
-    });
-    await fetch(request);
-    window.location.href = "/ns/course/index"
+async function change_course(button) {
+    const newCourse = button.dataset.courseName;
+    const status = document.getElementById("course_chooser_status");
+
+    button.disabled = true;
+    status.textContent = "Changing course…";
+
+    try {
+        const response = await fetch("/ns/course/changeCourse/" + encodeURIComponent(newCourse), {
+            method: "GET",
+        });
+        if (!response.ok) {
+            throw new Error("Unable to change course");
+        }
+        window.location.assign("/ns/course/index");
+    } catch (error) {
+        status.textContent = "Unable to change course. Please try again.";
+        button.disabled = false;
+    }
 }
+
+document.querySelectorAll(".course-chooser-option").forEach((button) => {
+    button.addEventListener("click", () => change_course(button));
+});
 </script>
 </section>
 

components/rsptx/templates/legal/_legal_base.html

@@ -29,7 +29,7 @@
         margin-bottom: 28px;
     }
     .legal-header h1 { margin: 0 0 6px; line-height: 1.2; }
-    .legal-updated { margin: 0; color: #6a6a6a; font-size: 0.9rem; }
+    .legal-updated { margin: 0; color: #6c6c6c; font-size: 0.9rem; }
     .legal-doc h2 { margin-top: 2rem; font-size: 1.4rem; }
     .legal-doc h3 { margin-top: 1.6rem; font-size: 1.15rem; }
     .legal-doc ul, .legal-doc ol { padding-left: 1.4rem; }
@@ -51,9 +51,6 @@
 
 {% block content %}
 <div class="legal-doc">
-    <nav class="legal-breadcrumb">
-        <a href="/admin/legal">&larr; Legal &amp; Compliance</a>
-    </nav>
     <header class="legal-header">
         <h1>{{ page_title }}</h1>
         {% if updated %}<p class="legal-updated">Last updated: {{ updated }}</p>{% endif %}

components/rsptx/templates/legal/hecvat.html

@@ -30,7 +30,7 @@
     .hecvat-ans { font-weight: 600; white-space: nowrap; }
     .hecvat-ans.yes { color: #1b7a2f; }
     .hecvat-ans.no { color: #a06a00; }
-    .hecvat-ans.na { color: #777; }
+    .hecvat-ans.na { color: #585858; }
     .hecvat-scroll { overflow-x: auto; }
     .hecvat-note {
         margin: 1.25rem 0;

components/rsptx/templates/staticAssets/assignment/assignment_block.css

@@ -41,8 +41,8 @@ This is used in the chooseAssignment page and the current_course page.
 
 
 :root {
-  --color-success: #11b70e;
-  --color-error: #ff0000;
+  --color-success: #077e05;
+  --color-error: #e30000;
   --rs-assignment-meta: #fafafa;
   --rs-assignment-meta-border: #aaa;
 }

components/rsptx/templates/staticAssets/course.css

@@ -19,4 +19,10 @@
     margin-left: auto;
     margin-right: auto;
   }
-}
+}
+.course-chooser-toggle {
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  font: inherit;
+}