From 807f3f215c33c385ac9886a911a84447d4deedc6 Mon Sep 17 00:00:00 2001 From: Sol Dubock <94075844+sjd210@users.noreply.github.com> Date: Fri, 22 May 2026 11:47:30 +0100 Subject: [PATCH 1/7] Add accessibility tags to Ada question finder --- src/app/components/elements/ContentPropertyTags.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/elements/ContentPropertyTags.tsx b/src/app/components/elements/ContentPropertyTags.tsx index ef230b5d09..3ca1c4a572 100644 --- a/src/app/components/elements/ContentPropertyTags.tsx +++ b/src/app/components/elements/ContentPropertyTags.tsx @@ -17,7 +17,7 @@ export const ContentPropertyTags = ({ deprecated, supersededByPath, tags, ...res const accessibilitySettings = useAccessibilitySettings(); return
- {isPhy && accessibilitySettings?.SHOW_INACCESSIBLE_WARNING && getAccessibilityTags(tags)?.map(tag => { + {accessibilitySettings?.SHOW_INACCESSIBLE_WARNING && getAccessibilityTags(tags)?.map(tag => { const id = `access-warn-${uuid_v4()}`; // must be globally unique. making refs in a loop was too painful. return From d220019009d35be3a6552e9dca287936bd52c0c8 Mon Sep 17 00:00:00 2001 From: Sol Dubock <94075844+sjd210@users.noreply.github.com> Date: Fri, 22 May 2026 11:50:42 +0100 Subject: [PATCH 2/7] Add icon to accessibility warning banner on Ada --- .../navigation/InaccessibleContentWarningBanner.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/components/navigation/InaccessibleContentWarningBanner.tsx b/src/app/components/navigation/InaccessibleContentWarningBanner.tsx index b216e6374e..b2ad04f09d 100644 --- a/src/app/components/navigation/InaccessibleContentWarningBanner.tsx +++ b/src/app/components/navigation/InaccessibleContentWarningBanner.tsx @@ -1,9 +1,11 @@ import React from 'react'; import { Alert } from 'reactstrap'; import { ACCESSIBILITY_WARNINGS } from '../../services/accessibility'; +import { isAda } from '../../services'; export const InaccessibleContentWarningBanner = ({type}: {type: keyof typeof ACCESSIBILITY_WARNINGS}) => { - return + return + {isAda && } {ACCESSIBILITY_WARNINGS[type].description} ; }; From de9f5a98c651266b8897fd006701f6e5e72b10c5 Mon Sep 17 00:00:00 2001 From: Sol Dubock <94075844+sjd210@users.noreply.github.com> Date: Fri, 22 May 2026 11:55:54 +0100 Subject: [PATCH 3/7] Remove unused import --- src/app/components/elements/ContentPropertyTags.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/elements/ContentPropertyTags.tsx b/src/app/components/elements/ContentPropertyTags.tsx index 3ca1c4a572..f41aa94ff9 100644 --- a/src/app/components/elements/ContentPropertyTags.tsx +++ b/src/app/components/elements/ContentPropertyTags.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { isPhy, isStaff, isTeacherOrAbove } from "../../services"; +import { isStaff, isTeacherOrAbove } from "../../services"; import { selectors, useAppSelector } from "../../state"; import classNames from "classnames"; import {v4 as uuid_v4} from "uuid"; From 4e3d2504b23c5c68e6356a57ea4a2d07c9e5e36d Mon Sep 17 00:00:00 2001 From: Sol Dubock <94075844+sjd210@users.noreply.github.com> Date: Fri, 22 May 2026 14:05:44 +0100 Subject: [PATCH 4/7] Use correct device size for non-sidebar Ada pages --- src/app/components/elements/sidebar/MyAdaSidebar.tsx | 2 +- src/app/services/device.ts | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/components/elements/sidebar/MyAdaSidebar.tsx b/src/app/components/elements/sidebar/MyAdaSidebar.tsx index 105419b103..0dbe2e223c 100644 --- a/src/app/components/elements/sidebar/MyAdaSidebar.tsx +++ b/src/app/components/elements/sidebar/MyAdaSidebar.tsx @@ -14,7 +14,7 @@ interface MyAdaTab { user: "STUDENT" | "TUTOR" | "TEACHER" | "ALL"; // Which user roles can see this tab – n.b. teacher means teacherOrAbove } -const MyAdaTabs: Record = { +export const MyAdaTabs: Record = { overview: { title: "Overview", url: "/dashboard", diff --git a/src/app/services/device.ts b/src/app/services/device.ts index 0655cc48e2..15240ccb67 100644 --- a/src/app/services/device.ts +++ b/src/app/services/device.ts @@ -1,6 +1,7 @@ import {useEffect, useState} from "react"; import { siteSpecific } from "./siteConstants"; import { isAda } from "./siteConstants"; +import { MyAdaTabs } from "../components/elements/sidebar/MyAdaSidebar"; const MOBILE_WINDOW_WIDTH = 768; @@ -34,7 +35,8 @@ const descDeviceSizes = [DeviceSize.XXXL, DeviceSize.XXL, DeviceSize.XL, DeviceS export const useDeviceSize = () => { const getSize = (): DeviceSize => { - const shouldIncludeSidebar = isAda && window.innerWidth >= 768; + const shouldIncludeSidebar = + isAda && Object.values(MyAdaTabs).some(tab => window.location.pathname.includes(tab.url)) && window.innerWidth >= 768; const width = window.innerWidth - (shouldIncludeSidebar ? 220 : 0); if (width >= 1800) return DeviceSize.XXXL; else if (width >= 1400) return DeviceSize.XXL; From 4036339d66390eedf3d421cc082b6bf6f0736065 Mon Sep 17 00:00:00 2001 From: Sol Dubock <94075844+sjd210@users.noreply.github.com> Date: Fri, 22 May 2026 14:26:33 +0100 Subject: [PATCH 5/7] Remove external import to fix tests --- src/app/services/device.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/app/services/device.ts b/src/app/services/device.ts index 15240ccb67..d2a0a14bcd 100644 --- a/src/app/services/device.ts +++ b/src/app/services/device.ts @@ -1,7 +1,6 @@ import {useEffect, useState} from "react"; import { siteSpecific } from "./siteConstants"; import { isAda } from "./siteConstants"; -import { MyAdaTabs } from "../components/elements/sidebar/MyAdaSidebar"; const MOBILE_WINDOW_WIDTH = 768; @@ -34,9 +33,9 @@ export enum DeviceOrientation { const descDeviceSizes = [DeviceSize.XXXL, DeviceSize.XXL, DeviceSize.XL, DeviceSize.LG, DeviceSize.MD, DeviceSize.SM, DeviceSize.XS]; export const useDeviceSize = () => { + const myAdaTabUrls = ["/dashboard", "/groups", "/quizzes/set", "/set_tests", "/my_markbook", "/assignments", "/tests", "/progress", "/account"]; const getSize = (): DeviceSize => { - const shouldIncludeSidebar = - isAda && Object.values(MyAdaTabs).some(tab => window.location.pathname.includes(tab.url)) && window.innerWidth >= 768; + const shouldIncludeSidebar = isAda && myAdaTabUrls.some(url => window.location.pathname.includes(url)) && window.innerWidth >= 768; const width = window.innerWidth - (shouldIncludeSidebar ? 220 : 0); if (width >= 1800) return DeviceSize.XXXL; else if (width >= 1400) return DeviceSize.XXL; From c0f973f49c8f2eab2d33de6d83386bb873a9af12 Mon Sep 17 00:00:00 2001 From: Sol Dubock <94075844+sjd210@users.noreply.github.com> Date: Fri, 22 May 2026 14:33:58 +0100 Subject: [PATCH 6/7] Update dependency array --- src/app/services/device.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/services/device.ts b/src/app/services/device.ts index d2a0a14bcd..fb639390b3 100644 --- a/src/app/services/device.ts +++ b/src/app/services/device.ts @@ -1,4 +1,4 @@ -import {useEffect, useState} from "react"; +import {useCallback, useEffect, useState} from "react"; import { siteSpecific } from "./siteConstants"; import { isAda } from "./siteConstants"; @@ -33,8 +33,8 @@ export enum DeviceOrientation { const descDeviceSizes = [DeviceSize.XXXL, DeviceSize.XXL, DeviceSize.XL, DeviceSize.LG, DeviceSize.MD, DeviceSize.SM, DeviceSize.XS]; export const useDeviceSize = () => { - const myAdaTabUrls = ["/dashboard", "/groups", "/quizzes/set", "/set_tests", "/my_markbook", "/assignments", "/tests", "/progress", "/account"]; - const getSize = (): DeviceSize => { + const getSize = useCallback((): DeviceSize => { + const myAdaTabUrls = ["/dashboard", "/groups", "/quizzes/set", "/set_tests", "/my_markbook", "/assignments", "/tests", "/progress", "/account"]; const shouldIncludeSidebar = isAda && myAdaTabUrls.some(url => window.location.pathname.includes(url)) && window.innerWidth >= 768; const width = window.innerWidth - (shouldIncludeSidebar ? 220 : 0); if (width >= 1800) return DeviceSize.XXXL; @@ -44,7 +44,7 @@ export const useDeviceSize = () => { else if (width >= 768) return DeviceSize.MD; else if (width >= 576) return DeviceSize.SM; else return DeviceSize.XS; - }; + }, []); const [windowSize, setWindowSize] = useState(getSize); @@ -52,7 +52,7 @@ export const useDeviceSize = () => { const handleResize = () => {setWindowSize(getSize());}; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); - }, []); + }, [getSize]); return windowSize; }; From bfb634bbda3bac87755fa305b0ee1adcbc9df21b Mon Sep 17 00:00:00 2001 From: Sol Dubock <94075844+sjd210@users.noreply.github.com> Date: Fri, 22 May 2026 15:24:51 +0100 Subject: [PATCH 7/7] Move MyAdaTabs to /constants for use in /device --- .../elements/sidebar/MyAdaSidebar.tsx | 69 +------------------ src/app/services/constants.ts | 67 ++++++++++++++++++ src/app/services/device.ts | 4 +- 3 files changed, 70 insertions(+), 70 deletions(-) diff --git a/src/app/components/elements/sidebar/MyAdaSidebar.tsx b/src/app/components/elements/sidebar/MyAdaSidebar.tsx index 0dbe2e223c..4c5ccd8de3 100644 --- a/src/app/components/elements/sidebar/MyAdaSidebar.tsx +++ b/src/app/components/elements/sidebar/MyAdaSidebar.tsx @@ -3,77 +3,10 @@ import { ContentSidebar, ContentSidebarProps } from "../layout/SidebarLayout"; import { StyledTabPicker } from "../inputs/StyledTabPicker"; import classNames from "classnames"; import { selectors, sidebarSlice, useAppDispatch, useAppSelector } from "../../../state"; -import { above, below, isStudent, isTeacherOrAbove, isTutorOrAbove, useDeviceSize, useUserNotifications } from "../../../services"; +import { above, below, isStudent, isTeacherOrAbove, isTutorOrAbove, MyAdaTabs, useDeviceSize, useUserNotifications } from "../../../services"; import { Spacer } from "../Spacer"; import { useLocation } from "react-router"; -interface MyAdaTab { - title: string; - url: string; - icon: string; - user: "STUDENT" | "TUTOR" | "TEACHER" | "ALL"; // Which user roles can see this tab – n.b. teacher means teacherOrAbove -} - -export const MyAdaTabs: Record = { - overview: { - title: "Overview", - url: "/dashboard", - icon: "icon-home", - user: "ALL" - }, - groups: { - title: "Groups", - url: "/groups", - icon: "icon-group", - user: "TUTOR" - }, - setQuizzes: { - title: "Quizzes", - url: "/quizzes/set", - icon: "icon-file", - user: "TUTOR" - }, - setTests: { - title: "Tests", - url: "/set_tests", - icon: "icon-school", - user: "TEACHER" - }, - markbook: { - title: "Markbook", - url: "/my_markbook", - icon: "icon-done-all", - user: "TUTOR" - }, - - assignedToMe: { - title: "Assigned to me", - url: "/assignments", - icon: "icon-person-check", - user: "ALL" - }, - - myTests: { - title: "Tests", - url: "/tests", - icon: "icon-school", - user: "STUDENT" - }, - progress: { - title: "Progress", - url: "/progress", - icon: "icon-done-all", - user: "STUDENT" - }, - - account: { - title: "Account", - url: "/account", - icon: "icon-cog", - user: "ALL" - } -}; - interface AdaSidebarCollapserProps extends React.HTMLAttributes { collapsed: boolean; toggleSidebar: () => void; diff --git a/src/app/services/constants.ts b/src/app/services/constants.ts index 7b71ff085a..9ec73217aa 100644 --- a/src/app/services/constants.ts +++ b/src/app/services/constants.ts @@ -1075,6 +1075,73 @@ export const ACCOUNT_TABS_ALIASES: {[alias: string]: ACCOUNT_TAB} = { export enum MANAGE_QUIZ_TAB {set = 1, manage = 2} export enum MARKBOOK_TYPE_TAB {assignments = 1, tests = 2} +interface MyAdaTab { + title: string; + url: string; + icon: string; + user: "STUDENT" | "TUTOR" | "TEACHER" | "ALL"; // Which user roles can see this tab – n.b. teacher means teacherOrAbove +} + +export const MyAdaTabs: Record = { + overview: { + title: "Overview", + url: "/dashboard", + icon: "icon-home", + user: "ALL" + }, + groups: { + title: "Groups", + url: "/groups", + icon: "icon-group", + user: "TUTOR" + }, + setQuizzes: { + title: "Quizzes", + url: "/quizzes/set", + icon: "icon-file", + user: "TUTOR" + }, + setTests: { + title: "Tests", + url: "/set_tests", + icon: "icon-school", + user: "TEACHER" + }, + markbook: { + title: "Markbook", + url: "/my_markbook", + icon: "icon-done-all", + user: "TUTOR" + }, + + assignedToMe: { + title: "Assigned to me", + url: "/assignments", + icon: "icon-person-check", + user: "ALL" + }, + + myTests: { + title: "Tests", + url: "/tests", + icon: "icon-school", + user: "STUDENT" + }, + progress: { + title: "Progress", + url: "/progress", + icon: "icon-done-all", + user: "STUDENT" + }, + + account: { + title: "Account", + url: "/account", + icon: "icon-cog", + user: "ALL" + } +}; + export const ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; export const HOME_CRUMB = {title: "Home", to: "/"}; diff --git a/src/app/services/device.ts b/src/app/services/device.ts index fb639390b3..9d3fc354a7 100644 --- a/src/app/services/device.ts +++ b/src/app/services/device.ts @@ -1,6 +1,7 @@ import {useCallback, useEffect, useState} from "react"; import { siteSpecific } from "./siteConstants"; import { isAda } from "./siteConstants"; +import { MyAdaTabs } from "./constants"; const MOBILE_WINDOW_WIDTH = 768; @@ -34,8 +35,7 @@ const descDeviceSizes = [DeviceSize.XXXL, DeviceSize.XXL, DeviceSize.XL, DeviceS export const useDeviceSize = () => { const getSize = useCallback((): DeviceSize => { - const myAdaTabUrls = ["/dashboard", "/groups", "/quizzes/set", "/set_tests", "/my_markbook", "/assignments", "/tests", "/progress", "/account"]; - const shouldIncludeSidebar = isAda && myAdaTabUrls.some(url => window.location.pathname.includes(url)) && window.innerWidth >= 768; + const shouldIncludeSidebar = isAda && Object.values(MyAdaTabs).some(tab => window.location.pathname.includes(tab.url)) && window.innerWidth >= 768; const width = window.innerWidth - (shouldIncludeSidebar ? 220 : 0); if (width >= 1800) return DeviceSize.XXXL; else if (width >= 1400) return DeviceSize.XXL;