fix: make accessibility and configuration improvements to TruncateToMiddle

- Outputs whole string in a second hidden span to play nicer with assistive
technologies.
- Accepts optional minCharsStart and minCharsEnd values to set the minimum
number of characters to display. This is an approximation based on the width
of the 0 (zero) character

Author: aaronbassett

apps/developer-hub/src/components/TruncateToMiddle/index.module.scss

@@ -1,6 +1,14 @@
 @use "@pythnetwork/component-library/theme";
 
+.sr-only {
+  @include theme.sr-only;
+}
+
 .truncateToMiddle {
+  // Defaults may get overridden by style on span
+  --min-chars-start-ch: 0ch;
+  --min-chars-end-ch: 0ch;
+
   &::before,
   &::after {
     display: inline-block;
@@ -12,11 +20,13 @@
   &::before {
     content: attr(data-text-start);
     text-overflow: ellipsis;
+    min-width: var(--min-chars-start-ch);
   }
 
   &::after {
     content: attr(data-text-end);
     text-overflow: clip;
     direction: rtl;
+    min-width: var(--min-chars-end-ch);
   }
 }

apps/developer-hub/src/components/TruncateToMiddle/index.tsx

@@ -1,16 +1,38 @@
+import type React from "react";
 import styles from "./index.module.scss";
 
 export type Props = {
   text: string;
+  minCharsStart?: number | undefined;
+  minCharsEnd?: number | undefined;
 };
 
-const TruncateToMiddle = ({ text }: Props) => {
+const TruncateToMiddle = ({
+  text,
+  minCharsStart = 0,
+  minCharsEnd = 0,
+}: Props) => {
+  // We're setting a minimum width using CSS 'ch' units, which are relative to the
+  // width of the '0' character. This provides a good approximation for showing
+  // a certain number of characters. However, since character widths vary
+  // (e.g., 'i' is narrower than 'W'), the exact count of visible characters
+  // might differ slightly from the specified 'ch' value.
+  const style = {
+    "--min-chars-start-ch": `${minCharsStart}ch`,
+    "--min-chars-end-ch": `${minCharsEnd}ch`,
+  } as React.CSSProperties;
+
   return (
-    <span
-      className={styles.truncateToMiddle}
-      data-text-start={text.slice(0, Math.floor(text.length / 2))}
-      data-text-end={text.slice(Math.floor(text.length / 2) * -1)}
-    />
+    <>
+      <span
+        className={styles.truncateToMiddle}
+        style={style}
+        data-text-start={text.slice(0, Math.floor(text.length / 2))}
+        data-text-end={text.slice(Math.floor(text.length / 2) * -1)}
+        aria-hidden="true"
+      />
+      <span className={styles["sr-only"]}>{text}</span>
+    </>
   );
 };