update keyboard interaction

Author: kmcfaul

packages/module/patternfly-docs/content/extensions/data-view/examples/Table/DataViewTableResizableColumnsExample.tsx

@@ -1,5 +1,10 @@
-import { FunctionComponent } from 'react';
-import { DataViewTable, DataViewTr, DataViewTh } from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
+import { FunctionComponent, useState } from 'react';
+import {
+  DataViewTable,
+  DataViewTr,
+  DataViewTh,
+  isDataViewThObject
+} from '@patternfly/react-data-view/dist/dynamic/DataViewTable';
 import { Button } from '@patternfly/react-core';
 import { ActionsColumn } from '@patternfly/react-table';
 
@@ -103,8 +108,7 @@ const columns: DataViewTh[] = [
   'Repositories',
   {
     cell: 'col',
-    // eslint-disable-next-line no-console
-    resizableProps: { isResizable: true, onResize: (e, width) => console.log('resized width: ', width) }
+    resizableProps: { isResizable: true }
   },
   'Pull requests',
   { cell: 'Workspaces', props: { info: { tooltip: 'More information' } } },
@@ -113,6 +117,17 @@ const columns: DataViewTh[] = [
 
 const ouiaId = 'TableExample';
 
-export const ResizableColumnsExample: FunctionComponent = () => (
-  <DataViewTable isResizable aria-label="Repositories table" ouiaId={ouiaId} columns={columns} rows={rows} />
-);
+export const ResizableColumnsExample: FunctionComponent = () => {
+  const [ screenReaderText, setScreenReaderText ] = useState('');
+
+  if (columns[2] && isDataViewThObject(columns[2]) && columns[2].resizableProps) {
+    columns[2].resizableProps.onResize = (_e, width) => {
+      // eslint-disable-next-line no-console
+      console.log('resized width: ', width);
+      setScreenReaderText(`Column ${width} pixels`);
+    };
+    columns[2].resizableProps.screenreaderText = screenReaderText;
+  }
+
+  return <DataViewTable isResizable aria-label="Repositories table" ouiaId={ouiaId} columns={columns} rows={rows} />;
+};

packages/module/src/DataViewTh/DataViewTh.tsx

@@ -29,6 +29,8 @@ export interface DataViewThResizableProps {
   shiftIncrement?: number;
   /** Aria label for the resize button */
   resizeButtonAriaLabel?: string;
+  /** Screenreader text for the column */
+  screenreaderText?: string;
 }
 export interface DataViewThProps {
   /** Cell content */
@@ -50,14 +52,16 @@ export const DataViewTh: FC<DataViewThProps> = ({
 }: DataViewThProps) => {
   const thRef = useRef<HTMLTableCellElement>(null);
 
+  const [ width, setWidth ] = useState(resizableProps?.width ? resizableProps.width : 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 [ width, setWidth ] = useState(resizableProps?.width ? resizableProps.width : 0);
   const setInitialVals = useRef(true);
   const dragOffset = useRef(0);
   const isResizing = useRef(false);
@@ -214,18 +218,19 @@ export const DataViewTh: FC<DataViewThProps> = ({
   const handleKeys = (e: ReactKeyboardEvent) => {
     const key = e.key;
 
-    if (key !== 'Enter' && key !== 'ArrowLeft' && key !== 'ArrowRight' && key !== 'Tab' && key !== 'Space') {
+    if (key === 'Tab') {
+      isResizing.current = false;
+    }
+
+    if (key !== 'ArrowLeft' && key !== 'ArrowRight') {
       if (isResizing) {
         e.preventDefault();
       }
       return;
     }
     e.preventDefault();
 
-    if (key === 'Enter' || key === 'Tab' || key === 'Space') {
-      onResize && onResize(e, currWidth);
-    }
-
+    isResizing.current = true;
     const isRTL = getLanguageDirection(thRef.current as HTMLElement) === 'rtl';
     const columnRect = thRef.current?.getBoundingClientRect();
 
@@ -247,6 +252,7 @@ export const DataViewTh: FC<DataViewThProps> = ({
       }
     }
     newSize = newSize + delta;
+    onResize && onResize(e, currWidth);
 
     thRef.current?.style.setProperty('min-width', newSize + 'px');
     currWidth = newSize;
@@ -268,6 +274,11 @@ export const DataViewTh: FC<DataViewThProps> = ({
           test
         </Button>
       )}
+      {isResizable && (
+        <div aria-live="polite" className="pf-v6-screen-reader">
+          {screenreaderText}
+        </div>
+      )}
     </Th>
   );
 };