Tabs: add dismissable functionality to tab

[tay1orjones]

This issue is for the implementation of dismissible functionality for tabs.

Open questions:

• There's lots of conversation around dismissible tabs with regards to accessibility:
  • Non-optional popup menu on Tab seems problematic w3c/aria#1630
  • close button probably doesn't have to be in the keyboard nav, could be aria-hidden
  • but it could be if we'd like to give the user more affordance to discovery of the delete function
  • aria tab role spec says children are presentational only
• Does the design allow for users to put non-operable icon tabs next to dismissasble tabs in the tablist?
  • A: No, the entire tab group/list must be all the same type
• Will this actually unmount the tab component, or will it just be a handler?
  • We'll probably want to provide users a callback that they can use to unmount the component
  • This should support consumer's ability to add a confirmation dialog or similar before actually closing/unmounting the tab.
  • This also will need to support the use case of an tab containing unsaved work, to prompt for save, and/or allow devs to save data in the background
• Does this apply to ContainedTabs? Can they be dismissed?

#12813 (comment)

[francinelucca]

Does the design allow for users to put non-operable icon tabs next to dismissasble tabs in the tablist?
A: No, the entire tab group/list must be all the same type

@laurenmrice @kingtraceyj What's the expected behavior if this happens? what should be rendered if a user tries to mix dismissable tabs with non-operable tabs?

[francinelucca]

[ ] Dismissible tabs: add delete/close via keyboard and operable 'x' icons

is the keyboard close interaction performed through focus > space/enter or just the Escape key?
CC @tay1orjones @mbgower

[tay1orjones]

@francinelucca The WAI-ARIA Tabs pattern states Delete should be used, not Escape.

All children elements of tab are presentational in nature and I believe should not receive focus, so this would additionally rule out the focus > space/enter.

[tay1orjones]

What's the expected behavior if this happens? what should be rendered if a user tries to mix dismissable tabs with non-operable tabs?

I'd vote for dismissable to "win" and the icons on all other tabs are not rendered. With how composable the API is though we won't always be able to restrict this I think. It might be something we could warn about in dev mode though through conditional props or something?

[tay1orjones]

@francinelucca for clarity though, the spec does allow for tabs to be dismissable and have a descriptive icon #8487 (comment), it's just that all tabs must be dismissable or not I think

Adding this functionality is slated for a separate issue #12845