|
| 1 | +# DEV Research tabs |
| 2 | + |
| 3 | +## Overview |
| 4 | + |
| 5 | +| Design System | Component | Comment | |
| 6 | +| --------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------: | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | |
| 7 | +| [Atlassian Design System](https://bitbucket.org/atlassian/atlaskit/src/master/) | [tabs](https://atlassian.design/components/tabs/examples) | 3 div-tags with aria- and role-attributes | |
| 8 | +| [Bootstrap](https://github.com/twbs/bootstrap) | [navs](https://getbootstrap.com/docs/4.3/components/navs/#tabs) | nav-component with .nav-tabs class, `ul role=tablist`, `li`, `a role=tab`, `div role=tabpanel` | |
| 9 | +| [GitHub Primer](https://github.com/primer/css) | [tab nav](https://primer.style/components/tab-nav) / [tab panels](https://primer.style/design/components/) | tab-nav: set of links to switch between views, tab-panels: list of buttons to switch between views | |
| 10 | +| [GitLab Pajamas](https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com) | [tabs](https://design.gitlab.com/components/tabs) | `ul role=tablist`, `li`, `a role=tab`, `div role=tabpanel` -> tabgroup + tab&label + tab panel | |
| 11 | +| [HP Enterprise Grommet](https://github.com/grommet/grommet) | [tabs](https://v2.grommet.io/tabs) | `div role=tablist`, `button role=tab`,`div role=tabpanel` -> Components:`<Tabs>` + `<Tab>` + `<any>` (with aria and role attributes) | |
| 12 | +| [IBM Carbon](https://github.com/carbon-design-system/carbon) | [tabs](https://carbondesignsystem.com/components/tabs/usage) | `div role=tablist`, `button role=tab`, `div role=tabpanel` -> `<TabList>` & `<Tab>` + `<TabPanels>` & `<TabPanel>` (with aria attributes) | |
| 13 | +| [Material UI](https://mui.com/material-ui/react-tabs/) | [tabs](https://mui.com/material-ui/react-tabs/) | `div role=tablist`, `button role=tab`, `div role=tabpanel` -> `<TabList>` & `<Tab>` + `<TabPanel>` (with aria attributes) | |
| 14 | +| [MongoDB.design](https://github.com/mongodb/design) | [tabs](https://www.mongodb.design/component/tabs/example/) | `div role=tablist`, `button role=tab`, `div role=tabpanel` | |
| 15 | +| [Porsche Design System](https://github.com/porsche-design-system/porsche-design-system) | [tabs](https://designsystem.porsche.com/v3/components/tabs/examples) | `div role=tablist`, `button role=tab`, `p role=tabpanel` | |
| 16 | +| [SBB Lyne](https://github.com/lyne-design-system/lyne-components) | [tab-group & tab-tile](https://lyne-storybook.app.sbb.ch/?path=/docs/components-sbb-tab-sbb-tab-group--docs) | tabgroup + tabtitle + any =>`div role=tablist`, `div role=tab`, `article role="tabpanel"` | |
| 17 | +| [Shopify Polaris](https://github.com/Shopify/polaris) | [tabs](https://polaris.shopify.com/components/navigation/tabs) | 1 component (`<Tabs>`)-> `<ul role=tablist>`,`<li><button role=tab>`,`<div role=tabpanel>`, `fittet` prop for 2-3 tabs, `action` prop to add new tab | |
| 18 | +| [SNCF Design System](https://gitlab.com/SNCF/wcs) | [navs/tabs](https://designmetier-bootstrap.sncf.fr/docs/4.3/layout/navs/#tabs) | `nav role="navigation"`,`<ul>`,`<li>` | |
| 19 | +| [Telefonica Mistica](https://github.com/Telefonica/mistica-web) | [tabs](https://brandfactory.telefonica.com/d/iSp7b1DkYygv/n-a#/components/tabs) | `div`, `button role=tab`, no panels | |
| 20 | +| [Telekom Scale](https://github.com/telekom/scale) | [tab-navigation](https://telekom.github.io/scale/?path=/docs/components-tab-navigation--text-icon) | `div role=tablist`, `span role=tab`, `div role="tabpanel"` | |
| 21 | +| [Washington Post Design System](https://build.washingtonpost.com/) | [tabs](https://build.washingtonpost.com/components/tabs) | `div role=tablist`, `button role=tab`, `div`, alignement, disabled, overflow, !activationMode! | |
| 22 | +| [W3C](https://www.w3.org/WAI/ARIA/apg/patterns/) | [tabs pattern](https://w3.org/WAI/https://w3.org/WAI/) | Tabs -> Tablist = set of tab-elements (serves as label for tabpanel) -> activation displays content of tabpanel; aria and role attributes accurately described | |
| 23 | + |
| 24 | +## Conclusion |
| 25 | + |
| 26 | +- we can use tab component of [db-ui/elements](https://github.com/db-ui/elements/blob/main/packages/db-ui-elements-stencil/src/components/db-tab/db-tab.tsx) |
| 27 | +- replace `<section>` by `<article>` |
| 28 | +- we use [`role=tablist`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tablist_role), [`role=tab`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tab_role), [`role=tabpanel`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tabpanel_role) |
| 29 | +- we use [`aria-controls`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls), [`aria-selected`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected), [`aria-labelledby`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby) |
| 30 | +- We could still explore to use hyperlinks `a href="#tab01"` with anchors and using `:target` to display each tab |
| 31 | +- We could still explore to use `details` and `summary` elements especially due to their `name`-attributes enhancement lately |
| 32 | + |
| 33 | +Findings: |
| 34 | + |
| 35 | +- Some design systems are using `activation-mode=auto/manual` - is this a vaild use-case for design? Default should be `auto` select which first tab selected |
| 36 | +- Prop `label` should be a slot to pass in e.g. a `<span>` and a `<DBBadge>` |
| 37 | +- Shall we provide a `badgeNumber` as a default property? |
| 38 | +- `fitted` property should be `width=auto/full` |
0 commit comments