Accessibility Improvements

src/app/components/elements/Assignments.tsx

@@ -58,9 +58,9 @@ const CSAssignmentCard = ({assignment}: {assignment: AssignmentDTO}) => {
     const assignmentStartDate = assignment.scheduledStartDate ?? assignment.creationDate;
     return <Row data-testid={"my-assignment"} className={"pt-3 mb-3 border-top"}>
         <Col xs={8} sm={9} md={7} lg={8}>
-            <Link to={`${PATHS.GAMEBOARD}#${assignment.gameboardId}`}>
-                <h4>{isDefined(assignment.gameboard) && assignment.gameboard.title}</h4>
-            </Link>
+            <h4><Link to={`${PATHS.GAMEBOARD}#${assignment.gameboardId}`}>
+                {isDefined(assignment.gameboard) && assignment.gameboard.title}
+            </Link></h4>
             {isDefined(assignmentStartDate) && <p className="mb-0" data-testid={"gameboard-assigned"}><strong>Assigned:</strong> {formatDate(assignmentStartDate)}</p>}
             {isDefined(assignment.dueDate) && isDefined(assignment.gameboard) && isOverdue(assignment) && assignment.gameboard.percentageAttempted !== 100
                 ? <p className="mb-0"><strong className="overdue">Overdue:</strong> {formatDate(assignment.dueDate)}</p>

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/EditContentButton.tsx

@@ -13,9 +13,11 @@ export const EditContentButton = ({doc, className}: EditContentButtonProps) => {
     const {data: segueEnvironment} = useGetSegueEnvironmentQuery();
     if (segueEnvironment === "DEV" && doc?.canonicalSourceFile) {
         return <div className="not-mobile">
-            <ExternalLink href={EDITOR_URL + doc.canonicalSourceFile} className={className || ""}>
-                <h3>{doc.published ? "Published" : "Unpublished"} ✎</h3>
-            </ExternalLink>
+            <h3>
+                <ExternalLink href={EDITOR_URL + doc.canonicalSourceFile} className={className || ""}>
+                    {doc.published ? "Published" : "Unpublished"} ✎
+                </ExternalLink>
+            </h3>
         </div>;
     } else {
         return null; // does not render

src/app/components/elements/NavigationLinks.tsx

@@ -6,7 +6,7 @@ import classNames from "classnames";
 
 export const NavigationLinks = ({navigation}: {navigation: PageNavigation}) => {
     const backToCollectionLink = navigation.backToCollection && <div className="w-50 w-md-auto mb-4">
-        <Link to={navigation.backToCollection.to ?? ""}>
+        <Link to={navigation.backToCollection.to ?? ""} className="d-inline-block">
             <div className="isaac-nav-link text-decoration-none">{navigation.collectionType}:</div>
             <div className="isaac-nav-link a-alt d-block lrg-text text-dark fw-bold">
                 <Markup trusted-markup-encoding={"html"}>{navigation.backToCollection.title}</Markup>
@@ -15,7 +15,7 @@ export const NavigationLinks = ({navigation}: {navigation: PageNavigation}) => {
     </div>;
 
     const nextItemLink = navigation.nextItem && <div className="w-50 w-md-auto text-end mb-4">
-        <Link to={{pathname: navigation.nextItem.to, search: navigation.search}}>
+        <Link to={{pathname: navigation.nextItem.to, search: navigation.search}} className="d-inline-block">
             <div className={classNames("isaac-nav-link float-end lrg-text fw-bold", {"a-alt": isAda}, {"text-dark": isPhy})}>
                 <Markup trusted-markup-encoding={"html"}>{navigation.nextItem.title}</Markup>
             </div>
@@ -24,7 +24,7 @@ export const NavigationLinks = ({navigation}: {navigation: PageNavigation}) => {
     </div>;
 
     const previousItemLink = navigation.previousItem && <div className="w-50 w-md-auto text-start mb-4">
-        <Link to={{pathname: navigation.previousItem.to, search: navigation.search}}>
+        <Link to={{pathname: navigation.previousItem.to, search: navigation.search}} className="d-inline-block">
             <div className={classNames("isaac-nav-link float-start lrg-text fw-bold", {"a-alt": isAda}, {"text-dark": isPhy})}>
                 <Markup trusted-markup-encoding={"html"}>{navigation.previousItem.title}</Markup>
             </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