update srtext to be in state

Author: kmcfaul

packages/module/src/DataViewTh/DataViewTh.tsx

@@ -53,20 +53,26 @@ export const DataViewTh: FC<DataViewThProps> = ({
   const thRef = useRef<HTMLTableCellElement>(null);
 
   const [ width, setWidth ] = useState(resizableProps?.width ? resizableProps.width : 0);
+  const [ screenreaderText, setScreenreaderText ] = useState(resizableProps?.screenreaderText || `Column ${width.toFixed(0)} pixels`);
+  let currWidth = 0;
 
   const isResizable = resizableProps?.isResizable || false;
   const increment = resizableProps?.increment || 5;
   const shiftIncrement = resizableProps?.shiftIncrement || 25;
   const resizeButtonAriaLabel = resizableProps?.resizeButtonAriaLabel || `Resize ${content}`;
   const onResize = resizableProps?.onResize || undefined;
-  const screenreaderText = resizableProps?.screenreaderText || `Column ${width} pixels`;
 
   const resizeButtonRef = useRef<HTMLButtonElement>(null);
   const setInitialVals = useRef(true);
   const dragOffset = useRef(0);
   const isResizing = useRef(false);
   const isInView = useRef(true);
-  let currWidth = 0;
+
+  useEffect(() => {
+    if (!resizableProps?.screenreaderText && currWidth > 0) {
+      setScreenreaderText(`Column ${currWidth.toFixed(0)} pixels`);
+    }
+  }, [ currWidth ]);
 
   useEffect(() => {
     if (!isResizable) {