New source found from dndbeyond.com

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

@@ -1,7 +1,7 @@
-import { visuallyHidden } from "@mui/utils";
 import clsx from "clsx";
 import React, { useContext } from "react";
 import { connect, DispatchProp } from "react-redux";
+import { AnyAction } from "redux";
 
 import {
   AlignmentContract,
@@ -28,6 +28,7 @@ import { NumberDisplay } from "~/components/NumberDisplay";
 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 } from "~/subApps/sheet/components/Sidebar/types";
 import { CharacterFeaturesManagerContext } from "~/tools/js/Shared/managers/CharacterFeaturesManagerContext";
 
@@ -45,7 +46,9 @@ import styles from "./styles.module.css";
 
 const DEFAULT_VALUE = "--";
 
-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> {
   isVertical: boolean;
   background: Background | null;
   alignment: AlignmentContract | null;
@@ -187,14 +190,9 @@ class Description extends React.PureComponent<Props> {
       traits,
     } = this.props;
 
-    const infoItemProps = {
-      role: "listitem",
-      inline: isVertical,
-    };
-
     return (
       <section className="ct-description">
-        <h2 style={visuallyHidden}>Description</h2>
+        <h2 className={a11yStyles.screenreaderOnly}>Description</h2>
         <TabFilter
           filters={[
             {
@@ -240,34 +238,34 @@ class Description extends React.PureComponent<Props> {
                         )
                       }
                     >
-                      <InfoItem label="Alignment" {...infoItemProps}>
+                      <InfoItem label="Alignment" inline={isVertical}>
                         {alignment === null ? DEFAULT_VALUE : alignment.name}
                       </InfoItem>
-                      <InfoItem label="Gender" {...infoItemProps}>
+                      <InfoItem label="Gender" inline={isVertical}>
                         {this.renderDescriptionItem(gender)}
                       </InfoItem>
-                      <InfoItem label="Eyes" {...infoItemProps}>
+                      <InfoItem label="Eyes" inline={isVertical}>
                         {this.renderDescriptionItem(eyes)}
                       </InfoItem>
-                      <InfoItem label="Size" {...infoItemProps}>
+                      <InfoItem label="Size" inline={isVertical}>
                         {this.renderDescriptionItem(size ? size.name : null)}
                       </InfoItem>
-                      <InfoItem label="Height" {...infoItemProps}>
+                      <InfoItem label="Height" inline={isVertical}>
                         {this.renderDescriptionItem(height)}
                       </InfoItem>
-                      <InfoItem label="Faith" {...infoItemProps}>
+                      <InfoItem label="Faith" inline={isVertical}>
                         {this.renderDescriptionItem(faith)}
                       </InfoItem>
-                      <InfoItem label="Hair" {...infoItemProps}>
+                      <InfoItem label="Hair" inline={isVertical}>
                         {this.renderDescriptionItem(hair)}
                       </InfoItem>
-                      <InfoItem label="Skin" {...infoItemProps}>
+                      <InfoItem label="Skin" inline={isVertical}>
                         {this.renderDescriptionItem(skin)}
                       </InfoItem>
-                      <InfoItem label="Age" {...infoItemProps}>
+                      <InfoItem label="Age" inline={isVertical}>
                         {this.renderDescriptionItem(age)}
                       </InfoItem>
-                      <InfoItem label="Weight" {...infoItemProps}>
+                      <InfoItem label="Weight" inline={isVertical}>
                         {weight === null ? (
                           DEFAULT_VALUE
                         ) : (