fix: Use slider role for table column resize controls (#3419)

Author: avinashbot

src/table/__tests__/resizable-columns.test.tsx

@@ -412,13 +412,13 @@ describe('resize with keyboard', () => {
     mockWidth = 80;
     const { wrapper } = renderTable(<Table {...defaultProps} />);
     const columnResizerWrapper = wrapper.findColumnResizer(1)!;
-    const columnResizerSeparatorWrapper = wrapper.findColumnHeaders()[0].find('[role="separator"]')!;
+    const columnResizerSliderWrapper = wrapper.findColumnHeaders()[0].find('[role="slider"]')!;
 
     columnResizerWrapper.focus();
     columnResizerWrapper.keydown(KeyCode.enter);
     columnResizerWrapper.keydown(KeyCode.left);
 
-    expect(columnResizerSeparatorWrapper.getElement()).toHaveAttribute('aria-valuenow', '80');
+    expect(columnResizerSliderWrapper.getElement()).toHaveAttribute('aria-valuenow', '80');
   });
 });
 

src/table/resizer/index.tsx

@@ -234,14 +234,14 @@ export function Resizer({
         data-awsui-table-suppress-navigation={true}
         ref={resizerSeparatorRef}
         id={separatorId}
-        role="separator"
+        role="slider"
         tabIndex={-1}
+        aria-labelledby={ariaLabelledby}
         aria-hidden={!isKeyboardDragging}
-        aria-orientation="vertical"
-        aria-valuenow={headerCellWidth}
-        // aria-valuetext is needed because the VO announces "collapsed" when only aria-valuenow set without aria-valuemax
-        aria-valuetext={headerCellWidth.toFixed(0)}
         aria-valuemin={minWidth}
+        // aria-valuemax is needed because the slider is inoperable in VoiceOver without it
+        aria-valuemax={Number.MAX_SAFE_INTEGER}
+        aria-valuenow={headerCellWidth}
         data-focus-id={focusId}
         onBlur={() => {
           setResizerHasFocus(false);