New source found from dndbeyond.com

ddb_main/tools/js/CharacterSheet/containers/mobile/ActionsMobile/ActionsMobile.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 MobileDivider from "../../../components/MobileDivider";
 import SubsectionMobile from "../../../components/SubsectionMobile";
 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> {
   theme: CharacterTheme;
 }
 class ActionsMobile extends React.PureComponent<Props> {
@@ -21,12 +25,12 @@ class ActionsMobile extends React.PureComponent<Props> {
 
     return (
       <SubsectionMobile>
+        <MobileDivider label="Actions" theme={theme} />
         <section className="ct-actions-mobile">
-          <h2 style={visuallyHidden}>Actions</h2>
-          <MobileDivider label="Actions" theme={theme} />
+          <h2 className={a11yStyles.screenreaderOnly}>Actions</h2>
           <Actions showNotes={false} />
-          <MobileDivider isEnd={true} theme={theme} />
         </section>
+        <MobileDivider isEnd={true} theme={theme} />
       </SubsectionMobile>
     );
   }

ddb_main/tools/js/CharacterSheet/containers/mobile/CombatMobile/CombatMobile.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import React from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 
 import {
   CharacterPreferences,
@@ -25,7 +26,9 @@ import { appEnvSelectors } from "../../../../Shared/selectors";
 import { SheetAppState } from "../../../typings";
 import styles from "./styles.module.css";
 
-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> {
   armorClass: number;
   speeds: SpeedInfo;
   proficiencyBonus: number;
@@ -232,6 +235,8 @@ function mapStateToProps(state: SheetAppState) {
   };
 }
 
+CombatMobile.contextType = GameLogContext;
+
 const CombatMobileContainer = (props) => {
   const {
     pane: { paneHistoryStart },
@@ -239,6 +244,4 @@ const CombatMobileContainer = (props) => {
   return <CombatMobile {...props} paneHistoryStart={paneHistoryStart} />;
 };
 
-CombatMobileContainer.contextType = GameLogContext;
-
 export default connect(mapStateToProps)(CombatMobileContainer);

ddb_main/tools/js/CharacterSheet/containers/mobile/DescriptionMobile/DescriptionMobile.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 MobileDivider from "../../../components/MobileDivider";
 import SubsectionMobile from "../../../components/SubsectionMobile";
@@ -13,7 +13,7 @@ export const DescriptionMobile: FC = () => {
     <SubsectionMobile className="ct-description-mobile">
       <MobileDivider label={"Background"} theme={characterTheme} />
       <section>
-        <h2 style={visuallyHidden}>Background</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>Background</h2>
         <Description theme={characterTheme} isVertical={true} />
       </section>
       <MobileDivider isEnd={true} theme={characterTheme} />

ddb_main/tools/js/CharacterSheet/containers/mobile/EquipmentMobile/EquipmentMobile.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";
@@ -42,7 +42,7 @@ class EquipmentMobile extends React.PureComponent<Props> {
           theme={theme}
         />
         <section className="ct-equipment-mobile">
-          <h2 style={visuallyHidden}>Inventory</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Inventory</h2>
           <Equipment showNotes={false} />
         </section>
         <MobileDivider isEnd={true} theme={theme} />

ddb_main/tools/js/CharacterSheet/containers/mobile/ExtrasMobile/ExtrasMobile.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";
@@ -42,7 +42,7 @@ class ExtrasMobile extends React.PureComponent<Props> {
           theme={theme}
         />
         <section className="ct-extras-mobile">
-          <h2 style={visuallyHidden}>Extras</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Extras</h2>
           <Extras showNotes={false} />
         </section>
         <MobileDivider isEnd={true} theme={theme} />

ddb_main/tools/js/CharacterSheet/containers/mobile/FeaturesMobile/FeaturesMobile.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 MobileDivider from "../../../components/MobileDivider";
 import SubsectionMobile from "../../../components/SubsectionMobile";
 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 FeaturesMobile extends React.PureComponent<Props> {
@@ -23,7 +27,7 @@ class FeaturesMobile extends React.PureComponent<Props> {
       <SubsectionMobile>
         <MobileDivider label="Features & Traits" theme={theme} />
         <section className="ct-features-mobile">
-          <h2 style={visuallyHidden}>Features and Traits</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Features and Traits</h2>
           <Features />
         </section>
         <MobileDivider isEnd={true} theme={theme} />

ddb_main/tools/js/CharacterSheet/containers/mobile/MainMobile/MainMobile.tsx

@@ -1,10 +1,12 @@
-import { visuallyHidden } from "@mui/utils";
 import { useSelector } from "react-redux";
+import { useSearchParams } from "react-router-dom";
 
 import {
   AbilitySummary,
   CampaignSummary,
   SavingThrowsSummary,
+  ThemedLongRestSvg,
+  ThemedShortRestSvg,
 } from "@dndbeyond/character-components/es";
 import {
   AbilityManager,
@@ -12,8 +14,10 @@ import {
   rulesEngineSelectors,
 } from "@dndbeyond/character-rules-engine/es";
 
+import { Button } from "~/components/Button";
 import { useSidebar } from "~/contexts/Sidebar";
 import { useAbilities } from "~/hooks/useAbilities";
+import a11yStyles from "~/styles/accessibility.module.css";
 
 import { getDataOriginComponentInfo } from "../../../../../../subApps/sheet/components/Sidebar/helpers/paneUtils";
 import { PaneComponentEnum } from "../../../../../../subApps/sheet/components/Sidebar/types";
@@ -26,6 +30,7 @@ import MobileDivider from "../../../components/MobileDivider";
 import SavingThrowsDetails from "../../../components/SavingThrowsDetails";
 import Senses from "../../../components/Senses";
 import SubsectionMobile from "../../../components/SubsectionMobile";
+import styles from "./styles.module.css";
 
 export default function MainMobile() {
   const abilities = useAbilities();
@@ -35,18 +40,18 @@ export default function MainMobile() {
   const preferences = useSelector(rulesEngineSelectors.getCharacterPreferences);
   const savingThrowDiceAdjustments = useSelector(
     rulesEngineSelectors.getSavingThrowDiceAdjustments
-  ); // TODO: GFS move to mangers
+  );
   const situationalBonusSavingThrowsLookup = useSelector(
     rulesEngineSelectors.getSituationalBonusSavingThrowsLookup
-  ); // TODO: GFS move to mangers
+  );
   const passivePerception = useSelector(
     rulesEngineSelectors.getPassivePerception
-  ); // TODO: GFS move to mangers
+  );
   const passiveInvestigation = useSelector(
     rulesEngineSelectors.getPassiveInvestigation
-  ); // TODO: GFS move to mangers
-  const passiveInsight = useSelector(rulesEngineSelectors.getPassiveInsight); // TODO: GFS move to mangers
-  const senses = useSelector(rulesEngineSelectors.getSenseInfo); // TODO: GFS move to mangers
+  );
+  const passiveInsight = useSelector(rulesEngineSelectors.getPassiveInsight);
+  const senses = useSelector(rulesEngineSelectors.getSenseInfo);
   const ruleData = useSelector(rulesEngineSelectors.getRuleData);
   const campaign = useSelector(rulesEngineSelectors.getCampaign);
   const theme = useSelector(rulesEngineSelectors.getCharacterTheme);
@@ -56,6 +61,9 @@ export default function MainMobile() {
     characterRollContextSelectors.getCharacterRollContext
   );
   const gameLog = useSelector(appEnvSelectors.getGameLog);
+  const [searchParams] = useSearchParams();
+  const isVttView = searchParams.get("view") === "vtt";
+  const isReadonly = useSelector(appEnvSelectors.getIsReadonly);
 
   const handleSensesManageShow = (): void => {
     paneHistoryStart(PaneComponentEnum.SENSE_MANAGE);
@@ -90,6 +98,20 @@ export default function MainMobile() {
     paneHistoryStart(PaneComponentEnum.CAMPAIGN);
   };
 
+  const handleShortResetClick = (evt: React.MouseEvent): void => {
+    evt.stopPropagation();
+    evt.nativeEvent.stopImmediatePropagation();
+
+    paneHistoryStart(PaneComponentEnum.SHORT_REST);
+  };
+
+  const handleLongResetClick = (evt: React.MouseEvent): void => {
+    evt.stopPropagation();
+    evt.nativeEvent.stopImmediatePropagation();
+
+    paneHistoryStart(PaneComponentEnum.LONG_REST);
+  };
+
   return (
     <SubsectionMobile name="Main">
       <div
@@ -97,7 +119,31 @@ export default function MainMobile() {
           theme.isDarkMode ? "ct-main-mobile--dark-mode" : ""
         }`}
       >
-        {campaign && (
+        {isVttView && (
+          <div className={styles.restButtonsGroup}>
+            <Button
+              variant="outline"
+              onClick={handleShortResetClick}
+              themed
+              size="x-small"
+              className={styles.restButton}
+            >
+              <ThemedShortRestSvg theme={theme} />
+              <span>Short Rest</span>
+            </Button>
+            <Button
+              variant="outline"
+              onClick={handleLongResetClick}
+              themed
+              size="x-small"
+              className={styles.restButton}
+            >
+              <ThemedLongRestSvg theme={theme} />
+              <span>Long Rest</span>
+            </Button>
+          </div>
+        )}
+        {!isVttView && campaign && !isReadonly && (
           <CampaignSummary
             campaign={campaign}
             onCampaignShow={handleCampaignShow}
@@ -111,7 +157,7 @@ export default function MainMobile() {
           />
         )}
         <section className="ct-main-mobile__abilities">
-          <h2 style={visuallyHidden}>Ability Scores</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Ability Scores</h2>
           {abilities.map((ability) => (
             <div className="ct-main-mobile__ability" key={ability.getStatKey()}>
               <AbilitySummary
@@ -135,7 +181,7 @@ export default function MainMobile() {
             theme.isDarkMode ? "ct-main-mobile__saving-throws--dark-mode" : ""
           }`}
         >
-          <h2 style={visuallyHidden}>Saving Throws</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Saving Throws</h2>
           <SavingThrowsSummary
             abilities={abilities}
             situationalBonusSavingThrowsLookup={
@@ -156,17 +202,18 @@ export default function MainMobile() {
         </section>
         <MobileDivider isEnd={true} theme={theme} />
         <MobileDivider
-          label="Senses"
+          label="Passive Senses"
           onClick={handleSensesManageShow}
           theme={theme}
         />
-        <h2 style={visuallyHidden}>Senses</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>Passive Senses</h2>
         <Senses
           senses={senses}
           theme={theme}
           passiveInsight={Number(passiveInsight)}
           passiveInvestigation={Number(passiveInvestigation)}
           passivePerception={Number(passivePerception)}
+          rowStyle="minimal"
           onClick={handleSensesManageShow}
         />
         <MobileDivider isEnd={true} theme={theme} />

ddb_main/tools/js/CharacterSheet/containers/mobile/NotesMobile/NotesMobile.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 MobileDivider from "../../../components/MobileDivider";
 import SubsectionMobile from "../../../components/SubsectionMobile";
 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 NotesMobile extends React.PureComponent<Props> {
@@ -23,7 +27,7 @@ class NotesMobile extends React.PureComponent<Props> {
       <SubsectionMobile className="ct-notes-mobile">
         <MobileDivider label="Notes" theme={theme} />
         <section>
-          <h2 style={visuallyHidden}>Notes</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Notes</h2>
           <Notes />
         </section>
         <MobileDivider isEnd={true} theme={theme} />

ddb_main/tools/js/CharacterSheet/containers/mobile/ProficiencyGroupsMobile/ProficiencyGroupsMobile.tsx

@@ -1,9 +1,9 @@
-import { visuallyHidden } from "@mui/utils";
 import { FC } from "react";
 import { useSelector } from "react-redux";
 
 import { useSidebar } from "~/contexts/Sidebar";
 import { useCharacterEngine } from "~/hooks/useCharacterEngine";
+import a11yStyles from "~/styles/accessibility.module.css";
 import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
 
 import { appEnvSelectors } from "../../../../Shared/selectors";
@@ -35,7 +35,9 @@ export const ProficiencyGroupsMobile: FC<Props> = () => {
         theme={characterTheme}
       />
       <section className="ct-proficiency-groups-mobile">
-        <h2 style={visuallyHidden}>Proficiencies and Training</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>
+          Proficiencies and Training
+        </h2>
         <ProficiencyGroups
           proficiencyGroups={proficiencyGroups}
           onClick={handleManageShow}

ddb_main/tools/js/CharacterSheet/containers/mobile/SkillsMobile/SkillsMobile.tsx

@@ -1,4 +1,3 @@
-import { visuallyHidden } from "@mui/utils";
 import React from "react";
 import { connect } from "react-redux";
 
@@ -10,10 +9,11 @@ import {
   CharacterTheme,
   RuleData,
 } from "@dndbeyond/character-rules-engine/es";
-import { IRollContext } from "@dndbeyond/dice";
+import { RollContext } from "@dndbeyond/pocket-dimension-dice/types";
 
 import { useSidebar } from "~/contexts/Sidebar";
 import { PaneInfo } from "~/contexts/Sidebar/Sidebar";
+import a11yStyles from "~/styles/accessibility.module.css";
 import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
 
 import {
@@ -33,7 +33,7 @@ interface Props {
   theme: CharacterTheme;
   diceEnabled: boolean;
   ruleData: RuleData;
-  characterRollContext: IRollContext;
+  characterRollContext: RollContext;
   paneHistoryStart: PaneInfo["paneHistoryStart"];
 }
 class SkillsBox extends React.PureComponent<Props> {
@@ -88,7 +88,7 @@ class SkillsBox extends React.PureComponent<Props> {
             onClick={this.handleManageShow}
             theme={theme}
           />
-          <h2 style={visuallyHidden}>Skills</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Skills</h2>
           <Skills
             skills={skills}
             customSkills={customSkills}

ddb_main/tools/js/CharacterSheet/containers/mobile/SpellsMobile/SpellsMobile.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";
@@ -42,7 +42,7 @@ class SpellsMobile extends React.PureComponent<Props> {
           theme={theme}
         />
         <section className="ct-spells-mobile">
-          <h2 style={visuallyHidden}>Spells</h2>
+          <h2 className={a11yStyles.screenreaderOnly}>Spells</h2>
           <Spells showNotes={false} />
         </section>
         <MobileDivider isEnd={true} theme={theme} />