Resizing with Hidden Header

[mathieu-lessard]

Hi there,

I have a resizable column with an action button column with a hidden header.

https://codesandbox.io/s/react-spectrum-table-resize-w-hidden-column-jgdfvn?file=/src/App.js

The resize controls feels like they are in the wrong place, and should be to the right of the hidden header. Is there a way to change this?

[snowystinger]

Yep, we no longer recommend using the hidden headers for this reason and purpose. Instead, you can do something like this https://codesandbox.io/s/table-col-resize-items-in-single-cell-forked-sbkcpk?file=/src/App.js

[mathieu-lessard]

Thank you. This perfectly helped.

[jaknas]

@snowystinger How can screen reader user read the text contents of a cell with action buttons? In this example, I guess it's read because it's rowheader. But what If the action buttons are placed next to the modified date? When moving with keyboard arrows, it just skips the text.

[snowystinger]

You can use Ctrl+Option+Arrow to read them with VoiceOver. I'll check with our accessibility team though if this is the only expected way.