New source found from dndbeyond.com

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

@@ -1,4 +1,3 @@
-import { visuallyHidden } from "@mui/utils";
 import React from "react";
 
 import {
@@ -11,6 +10,8 @@ import {
   ProficiencyGroup,
 } from "@dndbeyond/character-rules-engine/es";
 
+import a11yStyles from "~/styles/accessibility.module.css";
+
 import { StyleSizeTypeEnum } from "../../../Shared/reducers/appEnv";
 import { AppEnvDimensionsState } from "../../../Shared/stores/typings";
 import ProficiencyGroups from "../ProficiencyGroups";
@@ -36,7 +37,9 @@ export default class ProficiencyGroupsBox extends React.PureComponent<Props> {
     return (
       <section className="ct-proficiency-groups-box">
         <BoxBackground StyleComponent={BoxBackgroundComponent} theme={theme} />
-        <h2 style={visuallyHidden}>Proficiencies and Languages</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>
+          Proficiencies and Languages
+        </h2>
         <ProficiencyGroups
           proficiencyGroups={proficiencyGroups}
           onClick={onClick}