Comments (6)
Tabs and TabList component are under construction :)
from react-spectrum.
Yep though they were made a long time ago as a POC and never finished. I think at this point I would re-start the implementation or at least heavily modify it. If anyone would like to work on that, Iβd be happy to provide some guidance! π
from react-spectrum.
Ok, here's the API spec we came up with.
import {CollectionBase, SingleSelection} from '@react-types/shared';
import {SingleSelectListState} from '@react-stately/list';
interface TabsProps<T> extends CollectionBase<T>, SingleSelection {
/**
* Whether tabs are activated automatically on focus or manually.
* @default 'automatic'
*/
keyboardActivation?: 'automatic' | 'manual',
/**
* The orientation of the tabs.
* @default 'horizontal'
*/
orientation?: 'horizontal' | 'vertical'
}
interface TabsAria {
/** Props for the tablist container */
tabListProps: HTMLAttributes<HTMLElement>
}
declare function useTabs<T>(props: TabsProps<T>, state: SingleSelectListState<T>): TabsAria;
interface TabAria {
/** Props for the tab element */
tabProps: HTMLAttributes<HTMLElement>,
/** Props for the associated tabpanel element */
tabPanelProps: HTMLAttributes<HTMLElement>
}
interface TabAriaProps<T> {
/** Collection node for the tab. */
item: Node<T>
}
declare function useTab<T>(props: TabAriaProps, state: SingleSelectListState<T>): TabAria;
There's also some spectrum specific props. I can provide those if you want to implement the Spectrum part and not just the Aria/Stately parts.
Here's an example of what constructing a tab component would look like for an end user:
<Tabs selectedKey="files">
<Item key="files" title="Your files">
<Files />
</Item>
<Item key="shared" title="Shared with you">
<Shared />
</Item>
</Tabs>
The API follows our collection components API, using <Item>
to specify each tab item. In addition, it follows the same selection API that we use for other components.
In terms of implementation, there's a few pieces:
- For state, we can use the
useSingleSelectListState
hook. That will handle converting the children from JSX to a Collection object, along with setting up selection state and a SelectionManager. I don't think any other state is needed for tabs beyond this, but if so, we can add auseTabState
hook later on. - The
useTabs
hook should be created to manage the tab list and the associated tab panels. It should return ARIA props for the tablist element (see below). It should also call theuseSelectableCollection
hook, which will handle the keyboard navigation and focus management requirements. You'll need to either add a newKeyboardDelegate
implementation to handle the left and right arrow keys, or add anorientation
option to the existingListKeyboardDelegate
to allow switching from vertical to horizontal orientation. - The
useTab
hook should be created to handle an individual tab and its associated tabpanel element. It should return ARIA props for those elements, including generating ids and aria-labelledby attributes (see below). It should also call theuseSelectableItem
hook to handle selecting tabs and focusing accordingly. The hook should receive a Node object from the collection, and use thetitle
andrendered
properties for the tab and tabpanel contents respectively.
For accessibility, the spec is listed above in my previous comment. In addition, you can see the two examples from the WAI-ARIA Authoring Practices. They cover the two keyboardActivation
modes.
I'd start by making a basic example component using the hooks and use that in the storybook/tests for now. I'm happy to also provide guidance on the Spectrum-specific parts, but they're not required if you'd like to focus on React Aria/React Stately.
Another helpful thing is to start by running the yarn plop
command, which will help bootstrap the new packages you'll need to create with some templates. We've removed the existing implementation from the repo since it was old and probably harder to modify than to just start from scratch.
That was a lot. Hopefully I covered enough to get you started, but please let me know if you have any questions! π
from react-spectrum.
@devongovett
Hi. I was creating react-spectrum/tabs
for testing the behavior of newly created useTabs
and useTab
, I found something confusing.
// jsx
<Tabs selectedKey="files">
<Item key="files" title="Your files">
Files
</Item>
<Item key="shared" title="Shared with you">
Shared
</Item>
</Tabs>
// HTML created from jsx above
<div role="tabs">
<div role="tablist">
// could be a div, button is expected according to β. CSS changes are needed?
// https://www.w3.org/TR/wai-aria-practices-1.2/examples/tabs/tabs-2/tabs.html
<button role="tab">Your files</button>
<button role="tab">Shared with you</button>
</div>
<div role="tabpanel">
Files
</div>
</div>
// Role based architecture
<Tabs>
<TabList>
<Tab />
<Tab />
</TabList>
<TabPanel />
</Tabs>
tabPanelProps
are returned by useTab
, and useTab
is called inside of Tab
component,
ButTabPanel
is rendered outside of TabList
, which makes passing tabPanelProps
to it difficult.
Since they are Spectrum-specific parts, if this looks fine to you, I'll just focus on aria parts π
.
Please checkout the PR, any advice would be appreciated.
from react-spectrum.
I'm interested in implementing it. :)
from react-spectrum.
@so99ynoodles awesome! Let me get back to you with some updated API specs and we can go from there. In the meantime, hereβs the accessibility spec weβll need to follow: https://w3c.github.io/aria-practices/#tabpanel
from react-spectrum.
Related Issues (20)
- @internationalized: named regexp capture groups cause build failure in TypeScript 5.5
- @internationalized/date β invalid sourcemaps for `*.mjs` files from v3.5.3
- RAC Popover cannot be conditionally rendered via controlled props
- Programmatically toggle Switch HOT 4
- Card View Accessibility: ARIA role gridcell is not allowed for given element HOT 3
- `@react-stately/flags` stuck on old `@swc/helpers`? HOT 1
- Heads-up: repo can't be installed with Node.js 22 HOT 1
- Popover not changing position when triggerRef contents change HOT 3
- <Dialog> render props should include focus states
- Not compatible with `@types/react@19` HOT 2
- Circular dependency warnings when building
- Support use of external links when using `useHref` in `RouterProvider`
- [RAC] Checkbox should not be toggled with 'Enter' key HOT 2
- Table component randomly fails to render provided items. HOT 1
- Sliders aria-valuetext should match output element HOT 1
- Provide a way to control UI states HOT 4
- iOS keyboard overlaps with inputs when using useModalOverlay hook. HOT 1
- export internal types such as StyleRenderProps, ScrollableProps, etc
- When multiple slider thumbs are visually collapsed, the thumb with the highest index captures all pointer interaction. HOT 4
- The instructions for client side routing for Tantsack Router doesn't work. HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-spectrum.