New source found from dndbeyond.com

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

@@ -1,6 +1,6 @@
-import { visuallyHidden } from "@mui/utils";
 import React, { useContext } from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 
 import {
   AbilityLookup,
@@ -38,12 +38,13 @@ import {
   SpellUtils,
   WeaponSpellDamageGroup,
 } from "@dndbeyond/character-rules-engine/es";
-import { IRollContext } from "@dndbeyond/dice";
+import { RollContext } from "@dndbeyond/pocket-dimension-dice/types";
 
 import { Link } from "~/components/Link";
 import { TabFilter } from "~/components/TabFilter";
 import { useSidebar } from "~/contexts/Sidebar";
 import { PaneInfo } from "~/contexts/Sidebar/Sidebar";
+import a11yStyles from "~/styles/accessibility.module.css";
 import {
   PaneComponentEnum,
   PaneIdentifiers,
@@ -79,10 +80,12 @@ interface ActionListConfig {
   theme: CharacterTheme;
   dataOriginRefData: DataOriginRefData;
   proficiencyBonus: number;
-  rollContext: IRollContext;
+  rollContext: RollContext;
 }
 
-interface Props extends DispatchProp {
+// TODO: We are typing with AnyAction here to work around issues with UnknownAction, the type that was introduced in Redux 5.
+// If we decide to modernize to Redux 5, we will need to refactor much of the Rules Engine redux usage.
+interface Props extends DispatchProp<AnyAction> {
   showNotes: boolean;
 
   activatables: Array<Activatable>;
@@ -100,7 +103,7 @@ interface Props extends DispatchProp {
   theme: CharacterTheme;
   dataOriginRefData: DataOriginRefData;
   proficiencyBonus: number;
-  characterRollContext: IRollContext;
+  characterRollContext: RollContext;
   inventoryManager: InventoryManager;
   paneHistoryStart: PaneInfo["paneHistoryStart"];
 }
@@ -429,7 +432,7 @@ class Actions extends React.PureComponent<Props, State> {
     const { attacksPerActionInfo, theme } = this.props;
 
     return (
-      <React.Fragment>
+      <>
         <div className="ct-actions__attacks-heading">
           Actions &bull;{" "}
           <span
@@ -447,7 +450,7 @@ class Actions extends React.PureComponent<Props, State> {
             {attacksPerActionInfo.restriction}
           </div>
         )}
-      </React.Fragment>
+      </>
     );
   };
 
@@ -546,7 +549,7 @@ class Actions extends React.PureComponent<Props, State> {
 
     return (
       <section className="ct-actions">
-        <h2 style={visuallyHidden}>Actions</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>Actions</h2>
         <TabFilter
           filters={[
             ...(!hasAttackGroups