New source found from dndbeyond.com

ddb_main/tools/js/CharacterSheet/containers/tablet/ActionsTablet/ActionsTablet.tsx

@@ -1,19 +1,23 @@
-import { visuallyHidden } from "@mui/utils";
 import React from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 
 import {
   CharacterTheme,
   rulesEngineSelectors,
 } from "@dndbeyond/character-rules-engine/es";
 
+import a11yStyles from "~/styles/accessibility.module.css";
+
 import { appEnvSelectors } from "../../../../Shared/selectors";
 import SubsectionTablet from "../../../components/SubsectionTablet";
 import TabletBox from "../../../components/TabletBox";
 import { SheetAppState } from "../../../typings";
 import Actions from "../../Actions";
 
-interface Props extends DispatchProp {
+// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
+// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
+interface Props extends DispatchProp<AnyAction> {
   isReadonly: boolean;
   theme: CharacterTheme;
 }
@@ -25,7 +29,7 @@ class ActionsTablet extends React.PureComponent<Props> {
       <SubsectionTablet>
         <TabletBox theme={theme} header="Actions" className="ct-actions-tablet">
           <section>
-            <h2 style={visuallyHidden}>Actions</h2>
+            <h2 className={a11yStyles.screenreaderOnly}>Actions</h2>
             <Actions />
           </section>
         </TabletBox>

ddb_main/tools/js/CharacterSheet/containers/tablet/DescriptionTablet/DescriptionTablet.tsx

@@ -1,7 +1,7 @@
-import { visuallyHidden } from "@mui/utils";
 import { FC } from "react";
 
 import { useCharacterEngine } from "~/hooks/useCharacterEngine";
+import a11yStyles from "~/styles/accessibility.module.css";
 
 import SubsectionTablet from "../../../components/SubsectionTablet";
 import TabletBox from "../../../components/TabletBox";
@@ -18,7 +18,7 @@ export const DescriptionTablet: FC = () => {
         theme={characterTheme}
       >
         <section>
-          <h2 style={visuallyHidden}>Background</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Background</h2>
           <Description theme={characterTheme} />
         </section>
       </TabletBox>

ddb_main/tools/js/CharacterSheet/containers/tablet/EquipmentTablet/EquipmentTablet.tsx

@@ -1,4 +1,3 @@
-import { visuallyHidden } from "@mui/utils";
 import React from "react";
 import { connect } from "react-redux";
 
@@ -8,6 +7,7 @@ import {
 } from "@dndbeyond/character-rules-engine/es";
 
 import { PaneInfo, useSidebar } from "~/contexts/Sidebar/Sidebar";
+import a11yStyles from "~/styles/accessibility.module.css";
 import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
 
 import { appEnvSelectors } from "../../../../Shared/selectors";
@@ -43,7 +43,7 @@ class EquipmentTablet extends React.PureComponent<Props> {
           theme={theme}
         >
           <section>
-            <h2 style={visuallyHidden}>Inventory</h2>
+            <h2 className={a11yStyles.screenreaderOnly}>Inventory</h2>
             <Equipment />
           </section>
         </TabletBox>

ddb_main/tools/js/CharacterSheet/containers/tablet/ExtrasTablet/ExtrasTablet.tsx

@@ -1,4 +1,3 @@
-import { visuallyHidden } from "@mui/utils";
 import React from "react";
 import { connect } from "react-redux";
 
@@ -8,6 +7,7 @@ import {
 } from "@dndbeyond/character-rules-engine/es";
 
 import { PaneInfo, useSidebar } from "~/contexts/Sidebar/Sidebar";
+import a11yStyles from "~/styles/accessibility.module.css";
 import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
 
 import { appEnvSelectors } from "../../../../Shared/selectors";
@@ -43,7 +43,7 @@ class ExtrasTablet extends React.PureComponent<Props> {
           theme={theme}
         >
           <section>
-            <h2 style={visuallyHidden}>Extras</h2>
+            <h2 className={a11yStyles.screenreaderOnly}>Extras</h2>
             <Extras />
           </section>
         </TabletBox>

ddb_main/tools/js/CharacterSheet/containers/tablet/FeaturesTablet/FeaturesTablet.tsx

@@ -1,18 +1,22 @@
-import { visuallyHidden } from "@mui/utils";
 import React from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 
 import {
   CharacterTheme,
   rulesEngineSelectors,
 } from "@dndbeyond/character-rules-engine/es";
 
+import a11yStyles from "~/styles/accessibility.module.css";
+
 import SubsectionTablet from "../../../components/SubsectionTablet";
 import TabletBox from "../../../components/TabletBox";
 import { SheetAppState } from "../../../typings";
 import Features from "../../Features";
 
-interface Props extends DispatchProp {
+// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
+// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
+interface Props extends DispatchProp<AnyAction> {
   theme: CharacterTheme;
 }
 class FeaturesTablet extends React.PureComponent<Props> {
@@ -27,7 +31,7 @@ class FeaturesTablet extends React.PureComponent<Props> {
           theme={theme}
         >
           <section>
-            <h2 style={visuallyHidden}>Features and Traits</h2>
+            <h2 className={a11yStyles.screenreaderOnly}>Features and Traits</h2>
             <Features />
           </section>
         </TabletBox>

ddb_main/tools/js/CharacterSheet/containers/tablet/MainTablet/MainTablet.tsx

@@ -1,5 +1,5 @@
-import { visuallyHidden } from "@mui/utils";
 import { useSelector } from "react-redux";
+import { useSearchParams } from "react-router-dom";
 
 import {
   AbilitySummary,
@@ -15,6 +15,7 @@ import {
 
 import { useSidebar } from "~/contexts/Sidebar";
 import { useAbilities } from "~/hooks/useAbilities";
+import a11yStyles from "~/styles/accessibility.module.css";
 
 import { PaneComponentEnum } from "../../../../../../subApps/sheet/components/Sidebar/types";
 import {
@@ -67,6 +68,9 @@ export default function MainTablet() {
     characterRollContextSelectors.getCharacterRollContext
   );
   const gameLog = useSelector(appEnvSelectors.getGameLog);
+  const [searchParams] = useSearchParams();
+  const isVttView = searchParams.get("view") === "vtt";
+
   const handleSensesManageShow = (): void => {
     paneHistoryStart(PaneComponentEnum.SENSE_MANAGE);
   };
@@ -120,7 +124,7 @@ export default function MainTablet() {
   return (
     <SubsectionTablet name="Main">
       <div className="ct-main-tablet">
-        {campaign && (
+        {!isVttView && campaign && !isReadonly && (
           <CampaignSummary
             campaign={campaign}
             onCampaignShow={handleCampaignShow}
@@ -134,7 +138,7 @@ export default function MainTablet() {
           />
         )}
         <section className="ct-main-tablet__abilities">
-          <h2 style={visuallyHidden}>Abilities</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Abilities</h2>
           {abilities.map((ability) => (
             <div className="ct-main-tablet__ability" key={ability.getStatKey()}>
               <AbilitySummary

ddb_main/tools/js/CharacterSheet/containers/tablet/NotesTablet/NotesTablet.tsx

@@ -1,18 +1,22 @@
-import { visuallyHidden } from "@mui/utils";
 import React from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 
 import {
   CharacterTheme,
   rulesEngineSelectors,
 } from "@dndbeyond/character-rules-engine/es";
 
+import a11yStyles from "~/styles/accessibility.module.css";
+
 import SubsectionTablet from "../../../components/SubsectionTablet";
 import TabletBox from "../../../components/TabletBox";
 import { SheetAppState } from "../../../typings";
 import Notes from "../../Notes";
 
-interface Props extends DispatchProp {
+// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
+// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
+interface Props extends DispatchProp<AnyAction> {
   theme: CharacterTheme;
 }
 class NotesTablet extends React.PureComponent<Props> {
@@ -23,7 +27,7 @@ class NotesTablet extends React.PureComponent<Props> {
       <SubsectionTablet>
         <TabletBox header="Notes" className="ct-notes-tablet" theme={theme}>
           <section>
-            <h2 style={visuallyHidden}>Notes</h2>
+            <h2 className={a11yStyles.screenreaderOnly}>Notes</h2>
             <Notes />
           </section>
         </TabletBox>

ddb_main/tools/js/CharacterSheet/containers/tablet/SpellsTablet/SpellsTablet.tsx

@@ -1,4 +1,3 @@
-import { visuallyHidden } from "@mui/utils";
 import React from "react";
 import { connect } from "react-redux";
 
@@ -8,6 +7,7 @@ import {
 } from "@dndbeyond/character-rules-engine/es";
 
 import { PaneInfo, useSidebar } from "~/contexts/Sidebar/Sidebar";
+import a11yStyles from "~/styles/accessibility.module.css";
 import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
 
 import { appEnvSelectors } from "../../../../Shared/selectors";
@@ -43,7 +43,7 @@ class SpellsTablet extends React.PureComponent<Props> {
           theme={theme}
         >
           <section>
-            <h2 style={visuallyHidden}>Spells</h2>
+            <h2 className={a11yStyles.screenreaderOnly}>Spells</h2>
             <Spells />
           </section>
         </TabletBox>