New source found from dndbeyond.com

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

@@ -1,4 +1,3 @@
-import { visuallyHidden } from "@mui/utils";
 import React from "react";
 
 import {
@@ -8,6 +7,7 @@ import {
 import { CharacterTheme } from "@dndbeyond/character-rules-engine/es";
 
 import { NumberDisplay } from "~/components/NumberDisplay";
+import a11yStyles from "~/styles/accessibility.module.css";
 
 interface Props {
   proficiencyBonus: number;
@@ -31,7 +31,7 @@ export default class ProficiencyBonusBox extends React.PureComponent<Props> {
     return (
       <section className="ct-proficiency-bonus-box" onClick={this.handleClick}>
         <BoxBackground StyleComponent={BeveledBoxSvg94x89} theme={theme} />
-        <h2 style={visuallyHidden}>Proficiency Bonus</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>Proficiency Bonus</h2>
         <div
           className={`ct-proficiency-bonus-box__heading ${
             theme.isDarkMode