New source found from dndbeyond.com

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}