Enable accessibility layers

code/src/ui/src/components/AccessibilityLayersButton.tsx

@@ -16,7 +16,13 @@ interface Props {
 
 export const AccessibilityLayersButton: React.FC<Props> = ({ designSystem}) => {
 
-    const layersProperty = (designSystem.layers).properties;
+    //TODO until we support color blindness styling, don't offer it as an
+    // accessibility layer option to select from
+    //const layersProperty = (designSystem.layers).properties;
+    const layersProperty = [
+        designSystem.layers.dyslexia,
+        designSystem.layers.motionSensitivity
+    ]
     const getValueFromLayersProperty = () => {
         let r = [];
         for (var i=0; i<layersProperty.length; i++) {

code/src/ui/src/mui-a11y-tb/themes/Theme.css

@@ -5021,7 +5021,7 @@ footer .MuiGrid-container {
   --tablebodySpacing: var(--body1LetterSpacing);
   --tablebodyTransform: var(--body1TextTransform);
 }
-.motion-sensative {
+.motion-sensitive {
   --animation-speed: 0ms;
   --animation-distance: 0px;
   --animation-focus-distance: 0px;

code/src/ui/src/pages/DesignSystemPage.tsx

@@ -6,7 +6,7 @@ import React, { useRef, useLayoutEffect, ReactNode } from 'react';
 import { useParams } from "react-router-dom";
 import { Tab, Tabs, styled } from '@mui/material';
 import { useEffect, useState } from 'react';
-import { ThemeBuilder, DesignSystem, Storage } from 'a11y-theme-builder-sdk';
+import { ThemeBuilder, DesignSystem, EventValueChange, Layers, Storage } from 'a11y-theme-builder-sdk';
 import { DesignSystemTitleBar } from '../components/DesignSystemTitleBar';
 import { AtomContent } from './content/atoms/AtomContent';
 import { MoleculeContent } from './content/molecules/MoleculeContent';
@@ -29,6 +29,11 @@ interface Props {
     setThemeName(name: string): void;
 }
 
+interface AccessibleLayerContainerAttributes {
+    "data-typography"?: string;
+    "data-animation"?: string;
+}
+
 let initComplete = false;
 
 const DesignSystemPage: React.FC<Props> = ({user, storage, themeName, setThemeName}) => {
@@ -40,6 +45,8 @@ const DesignSystemPage: React.FC<Props> = ({user, storage, themeName, setThemeNa
     const [themeBuilder, setThemeBuilder] = useState<ThemeBuilder>();
     const [designSystemNames, setDesignSystemNames] = useState<string[]>([]);
     const [designSystem, setDesignSystem] = useState<DesignSystem>();
+    const [designSystemContentClassName, setDesignSystemContentClassName] = useState<string>("design-system-container");
+    const [designSystemContainerAttributes, setDesignSystemContentAttributes] = useState<AccessibleLayerContainerAttributes>({})
 
     const [tabIndex, setTabIndex] = useState<string|null>(null);
     const handleTabChange = (event:any, newTabIndex:string) => {
@@ -94,9 +101,47 @@ const DesignSystemPage: React.FC<Props> = ({user, storage, themeName, setThemeNa
             designSystem.code.setCSSVarListener("css", setCssValue);
             const pref = new Preferences(designSystem.name);
             setTabIndex(pref.get("content-selected") || "atoms");
+
+            // listen for changes in selected accessibility layers so that appropriate
+            //  styles can be set
+            const layerChangeListener = function (event: EventValueChange<Boolean>) {
+                UpdateContainerLayerInfo();
+            };
+            designSystem.layers.colorBlind.setPropertyListener("colorBlindListener", layerChangeListener);
+            designSystem.layers.dyslexia.setPropertyListener("dyslexiaListener", layerChangeListener);
+            designSystem.layers.motionSensitivity.setPropertyListener("motionSensativityListener", layerChangeListener);
+
+            UpdateContainerLayerInfo();
         }
     }, [designSystem])
 
+    // Update the class names on the design system container div
+    //  taking into account which accessibility layers have been
+    //  selected by the user
+    const UpdateContainerLayerInfo = () => {
+        let dsccn = "design-system-container";
+        let attributes: AccessibleLayerContainerAttributes = {};
+        if (designSystem) {
+            //TODO re-enable when color blindness styling is available
+            // and the color blind accessibility layer is
+            // re-introduced to the UI
+            //if (designSystem.layers.colorBlind.getValue()) {
+            //    dsccn += " color-blind";
+            //}
+            if (designSystem.layers.dyslexia.getValue()) {
+                dsccn += " dyslexic";
+                attributes["data-typography"] = "dyslexic";
+            }
+            if (designSystem.layers.motionSensitivity.getValue()) {
+                dsccn += " motion-sensitive";
+                attributes["data-animation"] = "sensitive";
+            }
+        }
+
+        setDesignSystemContentClassName(dsccn);
+        setDesignSystemContentAttributes(attributes);
+    }
+
     const TopNavTab = styled(Tab)(({ theme }) => ({
         ":hover": {
             backgroundColor: "rgba(0, 0, 0, 0.04)",
@@ -116,9 +161,10 @@ const DesignSystemPage: React.FC<Props> = ({user, storage, themeName, setThemeNa
     }
 
     if (designSystem && themeBuilder && tabIndex)
+
         return (
             <ThemeProvider theme={(themes as any)[themeName]}>
-                <div className="design-system-container">
+                <div {...designSystemContainerAttributes} className={designSystemContentClassName}>
                     <MeasureDiv setHeight={setDivHeight}>
                         <DesignSystemTitleBar designSystemNames={designSystemNames} designSystem={designSystem} />
                         <div className="design-system-tab-bar">
@@ -170,7 +216,6 @@ const DesignSystemPage: React.FC<Props> = ({user, storage, themeName, setThemeNa
                 </div>
             </ThemeProvider>
         );
-
     return(<div>No design system loaded</div>)
 }