New source found from dndbeyond.com

ddb_main/tools/js/CharacterSheet/components/SkillsBox/SkillsBox.tsx

@@ -1,4 +1,3 @@
-import { visuallyHidden } from "@mui/utils";
 import React from "react";
 
 import {
@@ -13,7 +12,9 @@ import {
   Skill,
   ValueLookup,
 } from "@dndbeyond/character-rules-engine/es";
-import { IRollContext } from "@dndbeyond/dice";
+import { RollContext } from "@dndbeyond/pocket-dimension-dice/types";
+
+import a11yStyles from "~/styles/accessibility.module.css";
 
 import { StyleSizeTypeEnum } from "../../../Shared/reducers/appEnv";
 import { AppEnvDimensionsState } from "../../../Shared/stores/typings";
@@ -30,7 +31,7 @@ interface Props {
   theme: CharacterTheme;
   diceEnabled: boolean;
   ruleData: RuleData;
-  rollContext: IRollContext;
+  rollContext: RollContext;
 }
 export default class SkillsBox extends React.PureComponent<Props> {
   static defaultProps = {
@@ -63,7 +64,7 @@ export default class SkillsBox extends React.PureComponent<Props> {
     return (
       <section className="ct-skills-box">
         <BoxBackground StyleComponent={BoxBackgroundComponent} theme={theme} />
-        <h2 style={visuallyHidden}>Skills</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>Skills</h2>
         <Skills
           skills={skills}
           customSkills={customSkills}