New source found from dndbeyond.com

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