New source found from dndbeyond.com

ddb_main/tools/js/CharacterSheet/containers/QuickInfo/QuickInfo.tsx

@@ -1,5 +1,4 @@
-import { visuallyHidden } from "@mui/utils";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 
 import { AbilitySummary } from "@dndbeyond/character-components/es";
 import {
@@ -10,6 +9,8 @@ import {
 
 import { useSidebar } from "~/contexts/Sidebar";
 import { useAbilities } from "~/hooks/useAbilities";
+import { useDispatch } from "~/hooks/useDispatch";
+import a11yStyles from "~/styles/accessibility.module.css";
 import { HitPointsBox } from "~/subApps/sheet/components/HitPointsBox/HitPointsBox";
 import { Inspiration } from "~/subApps/sheet/components/Inspiration";
 import { PaneComponentEnum } from "~/subApps/sheet/components/Sidebar/types";
@@ -76,7 +77,7 @@ export default function QuickInfo() {
   return (
     <div className="ct-quick-info">
       <section className="ct-quick-info__abilities">
-        <h2 style={visuallyHidden}>Ability Scores</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>Ability Scores</h2>
         {abilities.map((ability) => (
           <div className="ct-quick-info__ability" key={ability.getStatKey()}>
             <AbilitySummary
@@ -107,7 +108,7 @@ export default function QuickInfo() {
         />
       </div>
       <section className="ct-quick-info__inspiration">
-        <h2 style={visuallyHidden}>Inspiration</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>Inspiration</h2>
         <Inspiration
           inspiration={!!inspiration}
           onToggle={handleToggleInspiration}