New source found from dndbeyond.com

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

@@ -1,4 +1,3 @@
-import { visuallyHidden } from "@mui/utils";
 import { orderBy } from "lodash";
 import React from "react";
 
@@ -19,9 +18,12 @@ import {
   ValueLookup,
   ValueUtils,
 } from "@dndbeyond/character-rules-engine/es";
-import { RollType, DiceTools, IRollContext } from "@dndbeyond/dice";
 import { GameLogContext } from "@dndbeyond/game-log-components";
+import { RollTypes } from "@dndbeyond/pocket-dimension-dice/constants";
+import { RollContext } from "@dndbeyond/pocket-dimension-dice/types";
+
 import { NumberDisplay } from "~/components/NumberDisplay";
+import a11yStyles from "~/styles/accessibility.module.css";
 
 interface Props {
   skills: Array<Skill>;
@@ -33,7 +35,7 @@ interface Props {
   diceEnabled: boolean;
   theme: CharacterTheme;
   ruleData: RuleData;
-  rollContext: IRollContext;
+  rollContext: RollContext;
 }
 class Skills extends React.PureComponent<Props> {
   static defaultProps = {
@@ -87,9 +89,6 @@ class Skills extends React.PureComponent<Props> {
     const { customSkills, ruleData, diceEnabled, theme, rollContext } =
       this.props;
 
-    const [{ messageTargetOptions, defaultMessageTargetOption, userId }] =
-      this.context;
-
     return customSkills.map((skill) => {
       const modifier = SkillUtils.getModifier(skill);
       const statName = RuleDataUtils.getAbilityShortName(
@@ -150,26 +149,17 @@ class Skills extends React.PureComponent<Props> {
               "--"
             ) : (
               <DigitalDiceWrapper
-                diceNotation={DiceTools.CustomD20(
-                  SkillUtils.getModifier(skill)!
-                )}
-                rollType={RollType.Check}
-                rollAction={name ?? "UNKNOWN"}
-                diceEnabled={diceEnabled}
-                themeColor={theme.themeColor}
-                rollContext={rollContext}
-                rollTargetOptions={
-                  messageTargetOptions
-                    ? Object.values(messageTargetOptions?.entities)
-                    : undefined
-                }
-                rollTargetDefault={defaultMessageTargetOption}
-                userId={userId}
+                diceNotation={`1d20${
+                  modifier > 0 ? `+${modifier}` : modifier !== 0 ? modifier : ""
+                }`}
+                rollType={RollTypes.Check}
+                action={name ?? "UNKNOWN"}
+                isDiceEnabled={diceEnabled}
+                entityId={String(rollContext.entityId)}
+                entityType={String(rollContext.entityType)}
+                name={String(rollContext.name)}
               >
-                <NumberDisplay 
-                  number={modifier}
-                  type="signed"
-                />
+                <NumberDisplay number={modifier} type="signed" />
               </DigitalDiceWrapper>
             )}
           </div>
@@ -189,9 +179,6 @@ class Skills extends React.PureComponent<Props> {
       rollContext,
     } = this.props;
 
-    const [{ messageTargetOptions, defaultMessageTargetOption, userId }] =
-      this.context;
-
     let orderedSkills = orderBy(skills, (skill) => SkillUtils.getName(skill));
 
     return (
@@ -203,7 +190,7 @@ class Skills extends React.PureComponent<Props> {
       >
         <div className="ct-skills__header" role="row">
           <div className="ct-skills__col--proficiency" role="columnheader">
-            <span style={visuallyHidden}>Proficiency</span>
+            <span className={a11yStyles.screenreaderOnly}>Proficiency</span>
             <abbr
               aria-hidden="true"
               title="Proficiency"
@@ -215,7 +202,7 @@ class Skills extends React.PureComponent<Props> {
             </abbr>
           </div>
           <div className="ct-skills__col--stat" role="columnheader">
-            <span style={visuallyHidden}>Modifier</span>
+            <span className={a11yStyles.screenreaderOnly}>Modifier</span>
             <abbr
               aria-hidden="true"
               title="Modifier"
@@ -245,7 +232,11 @@ class Skills extends React.PureComponent<Props> {
             </span>
           </div>
         </div>
-        <div className="ct-skills__list" role="rowgroup">
+        <div
+          className="ct-skills__list"
+          role="rowgroup"
+          data-scrollable-container="true"
+        >
           {orderedSkills.map((skill) => {
             let valueTypes: Array<Constants.AdjustmentTypeEnum> = [
               Constants.AdjustmentTypeEnum.SKILL_STAT_OVERRIDE,
@@ -402,27 +393,25 @@ class Skills extends React.PureComponent<Props> {
                     "--"
                   ) : (
                     <DigitalDiceWrapper
-                      diceNotation={DiceTools.CustomD20(
-                        SkillUtils.getModifier(skill)!
-                      )}
-                      rollType={RollType.Check}
-                      rollAction={name ? name : "UNKNOWN"}
-                      diceEnabled={diceEnabled}
-                      themeColor={theme.themeColor}
-                      rollContext={rollContext}
-                      rollTargetOptions={
-                        messageTargetOptions
-                          ? Object.values(messageTargetOptions?.entities)
-                          : undefined
-                      }
-                      rollTargetDefault={defaultMessageTargetOption}
-                      userId={userId}
+                      diceNotation={`1d20${
+                        modifier > 0
+                          ? `+${modifier}`
+                          : modifier !== 0
+                          ? modifier
+                          : ""
+                      }`}
+                      rollType={RollTypes.Check}
+                      action={name ? name : "UNKNOWN"}
+                      isDiceEnabled={diceEnabled}
+                      entityId={String(rollContext.entityId)}
+                      entityType={String(rollContext.entityType)}
+                      name={String(rollContext.name)}
                     >
                       <NumberDisplay
                         number={modifier}
                         type="signed"
                         isModified={hasModifiedValue}
-                      /> 
+                      />
                     </DigitalDiceWrapper>
                   )}
                 </div>