Enable accessibility warnings on Ada

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";
@@ -17,7 +17,7 @@ export const ContentPropertyTags = ({ deprecated, supersededByPath, tags, ...res
     const accessibilitySettings = useAccessibilitySettings();
 
     return <div {...rest} className={classNames("d-flex gap-2 align-items-center", rest.className)}>
-        {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 <React.Fragment key={tag}>
                 <i className={`icon icon-md ${ACCESSIBILITY_WARNINGS[tag].icon} icon-access-visual icon-color-black z-2`} id={id} />

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
-}
-
-const MyAdaTabs: Record<string, MyAdaTab> = {
-    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<HTMLButtonElement> {
     collapsed: boolean;
     toggleSidebar: () => void;

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 <Alert color="warning" className="no-print my-2">
+    return <Alert color="warning" className="d-flex no-print my-2 align-items-center">
+        {isAda && <i className={`icon icon-md ${ACCESSIBILITY_WARNINGS[type].icon} icon-access-visual icon-color-black me-2 mb-1`} />}
         {ACCESSIBILITY_WARNINGS[type].description}
     </Alert>;
 };

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<string, MyAdaTab> = {
+    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: "/"};

src/app/services/device.ts

@@ -1,6 +1,7 @@
-import {useEffect, useState} from "react";
+import {useCallback, useEffect, useState} from "react";
 import { siteSpecific } from "./siteConstants";
 import { isAda } from "./siteConstants";
+import { MyAdaTabs } from "./constants";
 
 const MOBILE_WINDOW_WIDTH = 768;
 
@@ -33,8 +34,8 @@ export enum DeviceOrientation {
 const descDeviceSizes = [DeviceSize.XXXL, DeviceSize.XXL, DeviceSize.XL, DeviceSize.LG, DeviceSize.MD, DeviceSize.SM, DeviceSize.XS];
 
 export const useDeviceSize = () => {
-    const getSize = (): DeviceSize => {
-        const shouldIncludeSidebar = isAda && window.innerWidth >= 768;
+    const getSize = useCallback((): DeviceSize => {
+        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;
@@ -43,15 +44,15 @@ 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);
 
     useEffect(() => {
         const handleResize = () => {setWindowSize(getSize());};
         window.addEventListener('resize', handleResize);
         return () => window.removeEventListener('resize', handleResize);
-    }, []);
+    }, [getSize]);
 
     return windowSize;
 };