feat: #10121 Implemented the Table Column Header Focus

[jsmitrah]

Closes #10121

✅ Pull Request Checklist:

• Included link to corresponding React Spectrum GitHub Issue.
• Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• Filled out test instructions.
• Updated documentation (if it already exists for this component).
• Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

• Pass the props as initialFocus="columnheader" to the table.
• Press the Tab button to focus the table column header.

🧢 Your Project:

[snowystinger]

Thanks, this looks pretty good. Will bring it to the team and see how we feel about the prop/name etc

[jsmitrah]

Thanks @snowystinger, I'll wait for the team feedback

[jsmitrah]

@LFDanLu Thanks for the feedback. I have removed the prop and moved those tests into RAC.

[snowystinger]

some minor cleanup

[jsmitrah]

@snowystinger Cleaned up the code and made the suggested changes

[snowystinger]

This is starting to worry me that we're making a breaking change

[jsmitrah]

Thanks for the feedback. I looked into both points a bit more

I agree that we should avoid a breaking change! The reason I added getFirstItemKey is to make the DnD code use an actual item key. DnD expects drop target to be either item or root, so the column header returned by getFirstKey() shouldn't be passed to it, and this helper function will skip non-item nodes and find the first valid item instead.

So this supports columnheader as the initial focus for Tables without changing the shared APIs or passing an invalid key into the DnD logic.

[snowystinger]

Right, but the fact that this helper is needed means that we broke an assumption on how the function worked. So even though we didn't break the api contract, there was an implicit requirement. And it's one that typescript has trouble representing, so hard to see.

[jsmitrah]

I have handled different approaches without breaking. This keeps the existing getFirstKey() behavior unchanged while allowing it to return the columnheader when explicitly requested during focus entry.

[LFDanLu]

@snowystinger and I have been discussing this a bit and would like to explore some different options. IMO, I think the "initialFocus" option is a bit unclear (just like how global is pretty unclear), maybe it would be good to either have the option declare intent (aka "interaction" where only the first drag and droppable table row key would be returned if "interaction=drag", and the first column would be returned for "interaction=navigation", naming TBD), or to borrow from

react-spectrum/packages/react-aria/src/grid/GridKeyboardDelegate.ts

Lines 91 to 93 in 4ab7d39

	protected findPreviousKey(
	fromKey?: Key,
	pred?: (item: Node<T>) => boolean,

where the caller of this function can pass in a filter function so they can determine what kind nodes are "valid" for their use case. Open to other options, but ideally we'd make it generic AND non-breaking for other call sites that were assuming this would only return item type nodes