Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Request]: Add dismissibility to single tab #18053

Open
1 task done
phooning opened this issue Nov 12, 2024 · 4 comments
Open
1 task done

[Feature Request]: Add dismissibility to single tab #18053

phooning opened this issue Nov 12, 2024 · 4 comments

Comments

@phooning
Copy link

phooning commented Nov 12, 2024

The problem

If <Tabs dismissible> is applied, all Tabs have the close button displayed. There is no way to remove the close button on an individual tab.

The solution

A tab should have its own dismissible prop, or a solution that leads to specifying undismissible or tabs without the close icon. An example solution might be

<Tabs dismissible>
  <Tab dismissible={false}>
    {content}
  </Tab>
</Tabs>

Which could be conditioned to render the close button in the Carbon Tab component: https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Tabs/Tabs.tsx#L1446

Examples

Image

This example exists hierarchically in popular applications. For example, in Google Drive, nested folders and its details will open up on the path tabs, which will have different actions (like delete), but the main (first) folder "My Drive" will never have that action.

Application/PAL

IBM DataPower Gateway UI

Business priority

Medium Priority = upcoming release but is not pressing

Available extra resources

No response

Code of Conduct

Copy link
Contributor

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

@tay1orjones
Copy link
Member

Thanks for opening up this request! This was an intentional decision made when the design spec for dismissible tabs was researched and defined, ultimately delivered in #13529

If I'm remembering right, it was grounded in supporting consistency of users' mental model across all the tabs. Mixing dismissible and non-dismissible is prone to confuse users both sighted and non-sighted. Having them all the same ensures consistent keyboard focus and interaction as well as visual and structural cohesion.

That's not to say we can't do this request - just something to consider. @kingtraceyj @laurenmrice what are your thoughts?

@tay1orjones tay1orjones added proposal: open This request has gone through triaging. We're determining whether we take this on or not. status: needs triage 🕵️‍♀️ status: needs accessibility info and removed status: needs triage 🕵️‍♀️ proposal: open This request has gone through triaging. We're determining whether we take this on or not. labels Nov 13, 2024
@tay1orjones
Copy link
Member

@mbgower I remember these tabs enhancements being particularly finicky to get right accessibility-wise. Do you have any thoughts on this?

@mbgower
Copy link

mbgower commented Nov 13, 2024

@tay1orjones, this closed issue for tablist supporting children seems to outline an approach that had support from aria WG, and is supported with current technology. If you read through to the end, they added in aria-actions as a future-proof method.

Basically, if the currently selected tab has a child button, it will end up as the next item in the tab order. If it doesn't a tab will just proceed to the tabpanel.

I'm cc'ing @tombrunet on this, in case he has any input on what they outline.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Triage
Development

No branches or pull requests

4 participants