Accessibility Improvements

src/app/components/elements/CollapsibleList.tsx

@@ -59,7 +59,8 @@ export const CollapsibleList = (props: CollapsibleListProps) => {
             className={`collapsible-body overflow-hidden ${expanded ? "open" : "closed"}`} 
             style={{height: expanded ? expandedHeight : 0, maxHeight: expanded ? expandedHeight : 0, marginBottom: expanded ? (props.additionalOffset ?? 0) : 0}}
         >
-            <div ref={listRef} className={classNames({"ms-2": props.asSubList})}>
+            <div ref={listRef} className={classNames({"ms-2": props.asSubList})} {...{"inert": expanded ? undefined : "true"}}> 
+                {/* when react is updated to v19, switch inert definition to regular prop */}
                 {props.children}
             </div>
         </div>

src/app/components/elements/StudentDashboard.tsx

@@ -218,7 +218,7 @@ export const StudentDashboard = ({assignments, quizAssignments, streakRecord, gr
     const {assignmentsCount, quizzesCount} = getActiveWorkCount(assignments, quizAssignments);
 
     return <div className={classNames("dashboard w-100", {"dashboard-outer": !isTutorOrAbove(user)})}>
-        {nameToDisplay && <span className="welcome-text">Welcome back, {nameToDisplay}!</span>}
+        {nameToDisplay && <h3>Welcome back, {nameToDisplay}!</h3>}
         {deviceSize === "lg"
             ? <>
                 <Row>

src/app/components/elements/TeacherDashboard.tsx

@@ -23,7 +23,7 @@ const GroupsPanel = ({ groups }: GroupsPanelProps) => {
         <h4>Manage group progress</h4>
         {sortedGroups.length ?
             <>
-                <div className="overflow-hidden">
+                <div>
                     {sortedGroups.map(group => <Link key={group.id} to={`/assignment_progress#${group.id}`} className="d-block panel-my-isaac-link">{group.groupName}</Link>)}
                 </div>
                 <Spacer/>
@@ -175,7 +175,7 @@ export const TeacherDashboard = ({ assignmentsSetByMe, quizzesSetByMe, myAssignm
 
     return <div className="dashboard dashboard-outer w-100">
         <div className="d-flex">
-            {nameToDisplay && <span className="welcome-text">Welcome back, {nameToDisplay}!</span>}
+            {nameToDisplay && <h3>Welcome back, {nameToDisplay}!</h3>}
             <span className="ms-auto">
                 <div className="text-center">Dashboard view</div>
                 <StyledToggle

src/app/components/elements/list-groups/AbstractListViewItem.tsx

@@ -1,5 +1,5 @@
-import { Link } from "react-router-dom";
-import React from "react";
+import { Link, LinkProps } from "react-router-dom";
+import React, { HTMLAttributes } from "react";
 import { StageAndDifficultySummaryIcons } from "../StageAndDifficultySummaryIcons";
 import { ViewingContext} from "../../../../IsaacAppTypes";
 import classNames from "classnames";
@@ -35,12 +35,19 @@
     }
 };
 
-const LinkTags = ({linkTags}: {linkTags: {tag: string, url?: string}[];}) => {
+export interface ListViewTagProps extends HTMLAttributes<HTMLElement> {
+    tag: string;
+    url?: string;
+}
+
+const LinkTags = ({linkTags}: {linkTags: ListViewTagProps[];}) => {
     return <>
-        {linkTags.map(t => t.url ?
-            <Link to={t.url} className="card-tag" key={t.tag}>{t.tag}</Link> :
-            <div className="card-tag" key={t.tag}>{t.tag}</div>
-        )}
+        {linkTags.map(t => {
+            const {url, tag, ...rest} = t;
+            return url ?
+                <Link {...rest} to={url} className="card-tag" key={tag}>{tag}</Link> :
+                <div {...rest} className="card-tag" key={tag}>{tag}</div>;
+        })}
     </>;
 };
 
@@ -55,12 +62,6 @@
         {quizButton}
     </span>;
 };
-
-export interface ListViewTagProps {
-    tag: string;
-    url?: string;
-}
-
 export interface AbstractListViewItemProps extends ListGroupItemProps {
     title: string;
     icon?: TitleIconProps;

src/app/components/site/cs/FooterCS.tsx

@@ -10,7 +10,7 @@ export const FooterCS = () => (
             <Container fluid className="py-5">
                 <Row className="justify-content-start">
                     <Col xs={"auto"} className={"me-5 mb-4 mb-md-0"}>
-                        <Link to="/">
+                        <Link to="/" className="d-block">
                             <img
                                 src="/assets/common/logos/ada_logo_stamp_aqua.svg"
                                 className="footer-logo"

src/app/components/site/cs/HomepageCS.tsx

@@ -38,12 +38,12 @@ export const HomepageCS = () => {
                             </h1>
                             <Row className="justify-content-start align-items-center my-3">
                                 <Col xs={6} sm={3}>
-                                    <a href="https://www.cam.ac.uk/" target="_blank" rel="noopener">
+                                    <a href="https://www.cam.ac.uk/" target="_blank" rel="noopener" className="d-block">
                                         <img src="/assets/common/logos/university_of_cambridge.svg" alt='University of Cambridge website' className='img-fluid footer-org-logo' />
                                     </a>
                                 </Col>
                                 <Col xs={6} sm={3}>
-                                    <a href="https://www.raspberrypi.org/" target="_blank" rel="noopener">
+                                    <a href="https://www.raspberrypi.org/" target="_blank" rel="noopener" className="d-block">
                                         <img src="/assets/common/logos/ada_rpf_icon.svg" alt='Raspberry Pi website' className='img-fluid footer-org-logo' />
                                     </a>
                                 </Col>

src/app/components/site/phy/HomepagePhy.tsx

@@ -105,7 +105,7 @@ const getListViewSubjectCard = (sc: subjectCategory) => {
         item: item,
         icon: {type: "img", icon: `/assets/phy/icons/redesign/subject-${sc.subject}.svg`},
         subject: sc.subject as Subject,
-        linkTags: sc.subcategories.map((subcat) => ({tag: subcat.humanStage, url: subcat.href})),
+        linkTags: sc.subcategories.map((subcat) => ({tag: subcat.humanStage, url: subcat.href, "aria-label": `Explore ${subcat.humanStage} ${sc.humanSubject}`})),
     };
 
     return listViewSubjectCard;

src/scss/common/accessibility.scss

@@ -32,7 +32,15 @@
   @include reduced-motion-compliant-animation;
 }
 
-#main {
-  // default values for all accessibility variables
-  --focus-outline: 2px solid #000; // TODO use this
+@mixin focus-outline($color: var(--focus-outline-color), $width: var(--focus-outline-width)) {
+  // see https://stackoverflow.com/a/52616313
+  box-shadow: 0px 0px 0px var(--focus-outline-width) var(--focus-outline-color);
+
+  outline: $width solid transparent;
+}
+
+:root {
+  // default values for all accessibility variables; override as needed in /phy/accessibility.scss and /ada/accessibility.scss
+  --focus-outline-color: #000;
+  --focus-outline-width: 0.2rem;
 }

src/scss/common/assignments.scss

@@ -114,8 +114,5 @@
     &:focus {
       outline: none;
     }
-    &:focus-visible {
-      outline: 3px solid black;
-    }
   }
 }

src/scss/common/button.scss

@@ -43,11 +43,6 @@
 button {
   -webkit-appearance: none;
   border: none;
-  outline: none !important;
-}
-
-.btn.btn-primary:focus-visible, .btn.btn-outline-primary:focus-visible {
-  background-color: unset !important;
 }
 
 .btn-close {

src/scss/common/elements.scss

@@ -400,8 +400,7 @@ iframe.email-html {
   }
 
   &:has(> input:focus-visible) {
-    // TODO: find-replace all instances of this with some SCSS vars defined in isaac.scss
-    box-shadow: 0 0 0 2pt black !important;
+    @include focus-outline;
   }
 
   &:focus:not(:focus-visible) {

src/scss/common/focus.scss

@@ -4,78 +4,6 @@
   border-color: $gray-160;
 }
 
-/** Focus styles **/
-
-.form-control:focus, .form-select:focus {
-  box-shadow: none;
-  outline: 0.2rem solid $focus-blue;
-}
-
-.form-control-file:focus {
-  outline: none;
-  border: 0.2rem solid $focus-blue;
-  border-radius: 5px;
-}
-
-.form-check-input:focus {
-  outline: 0.2rem solid $focus-blue;
-}
-
-.page-link:focus {
-  box-shadow: none;
-  border: 0.2rem solid $focus-blue;
-  border-radius: 3px;
-}
-
-.navbar-toggler:focus {
-  box-shadow: none;
-  border: 0.2rem solid $focus-blue;
-  border-radius: 3px;
-}
-
-.link-list.a:focus {
-  box-shadow: none !important;
-  outline: 0.2rem solid $focus-blue !important;
-}
-
-.navbar-toggler:focus {
-  box-shadow: none;
-  outline: 0.2rem solid $black;
-}
-
-.nav-link.active:focus {
-  box-shadow: none;
-  outline: 0.2rem solid $secondary;
-}
-
-.book-chapter:focus {
-  box-shadow: 0 0 0 2pt black !important;
-  border-radius: 1px;
-  outline: none !important;
-}
-
-.nav-link:focus {
-  box-shadow: 0 0 0 2pt black !important;
-  border-radius: 1px;
-  outline: none !important;
-}
-
-.book-link:focus {
-  box-shadow: 0 0 0 2pt black !important;
-  border-radius: 0;
-  outline: none !important;
-}
-
-.login-b:focus {
-  box-shadow: none;
-  border: 0.2rem solid $focus-blue;
-}
-
-// Close modal button
-.close:not(:disabled):not(.disabled):focus {
-  box-shadow: none;
-  outline: 0.2rem solid $focus-blue;
-}
 
 ::placeholder { // Firefox, Chrome, Opera
   color: $gray-160 !important;
@@ -89,13 +17,11 @@
   color: $gray-160 !important;
 }
 
-:focus {
-  outline: 0.2rem solid $black;
+:focus-visible:not([tabindex="-1"]):not(.select__input) {
+  @include focus-outline;
 }
 
-// TODO: Review blanket suppression of focus indicator on keyboard-unfocusable elements.
-[tabindex="-1"]:focus {
-  outline: 0 !important;
+:focus-visible[tabindex="-1"] {
+  // remove UA styling too
+  outline: none;
 }
-
-/** End of focus styles **/

src/scss/common/scroll.scss

@@ -122,9 +122,3 @@
     }
   }
 }
-
-.expand-button > button:focus-visible {
-  div {
-    outline: 0.1rem solid #000 !important;
-  }
-}

src/scss/cs/accessibility.scss

@@ -0,0 +1,6 @@
+@import '../common/accessibility';
+
+:root {
+  --focus-outline-color: #{$focus-blue};
+  --focus-outline-width: 2px;
+}

src/scss/cs/boards.scss

@@ -37,7 +37,6 @@
   outline: none !important;
   border: none !important;
   &:focus-visible {
-    outline: 2px solid $focus-blue !important;
     border-radius: 50px !important;
   }
 }

src/scss/cs/button.scss

@@ -19,25 +19,13 @@
     background-color: $active-color !important;
     box-shadow: none !important;
   }
-  &:focus:not(.disabled) {
-    box-shadow: none;
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 3px $focus-blue !important;
-  }
   &.disabled, &:disabled {
     color: $cs-jet;
     background-color: $cs-silver;
     border-color: $cs-silver;
   }
 }
 
-.btn.btn-link:focus {
-  box-shadow: 0 0 0 0.2rem $focus-blue !important;
-  outline: none !important;
-  border-radius: 3px;
-}
-
 @mixin ada-button-outline($color, $hover-color, $active-color) {
   background-color: transparent;
   border: 3px solid $color;
@@ -56,12 +44,6 @@
     background-color: transparent !important;
     box-shadow: none !important;
   }
-  &:focus:not(.disabled) {
-    box-shadow: none;
-  }
-  &:focus-visible {
-    box-shadow: 0 0 0 3px $focus-blue !important;
-  }
   &.disabled, &:disabled {
     color: $cs-jet;
     border-color: $cs-silver;
@@ -132,7 +114,6 @@
     background: none !important;
     border: none !important;
     border-radius: 0 !important;
-    box-shadow: none !important;
   }
 }
 
@@ -147,7 +128,6 @@
     color: $light-active-dark-pink;
   }
   &:focus-visible {
-    outline: 2px solid $focus-blue !important;
     border-radius: 0 !important;
     z-index: 10;
   }
@@ -303,7 +283,6 @@ a:not(.btn):not(.nav-link) {
     outline: none;
   }
   &:focus-visible {
-    outline: 2px solid $focus-blue;
     border-radius: 0 !important;
     z-index: 10;
   }

src/scss/cs/header.scss

@@ -17,7 +17,6 @@ div.header-progress {
   .navbar-toggler {
     padding: 0.25rem;
     &:focus-visible {
-      border-color: $cyan-300;
       border-radius: 0;
     }
     &:focus:not(:focus-visible) {
@@ -54,7 +53,6 @@ div.header-progress {
     background: none;
     &:focus-visible {
       box-sizing: content-box;
-      border: 0.2rem solid $cyan-300;
       border-radius: 0;
     }
     &:focus:not(:focus-visible) {
@@ -75,6 +73,8 @@ header {
   position: relative;
   z-index: 20;
 
+  --focus-outline-color: #{$cyan-300};
+
   a:not(.navbar-brand), .nav-link {
     text-decoration: none !important;
     color: $cs-white;
@@ -99,7 +99,7 @@ header {
         top: 0;
         left: 0;
         height: 100%;
-        border: $cyan-300 solid 2px;
+        @include focus-outline;
       }
     }
 

src/scss/cs/isaac.scss

@@ -343,7 +343,7 @@ $enable-negative-margins: true;
 @import "../common/_utils";
 
 // Theming
-@import "../common/accessibility";
+@import "accessibility";
 
 // Atoms
 @import "fonts";