Toolkit with accessible components, styles, and examples for your next web app
- Tweets 556
- Following 4
- Followers 2,569
- Likes 767
Ariakit retweeted
Testing an animated custom select widget using VoiceOver on iOS.
In the first half of the video, you can see that VO doesn't move its virtual cursor to the popup in response to DOM focus.
We must wait for the animation to complete before moving DOM focus (second half).
1
2
12
Ariakit retweeted
Testing various Ariakit components with different compositions and CSS transitions.
Can you spot all the details here?
2
3
25
Ariakit retweeted
I'm impressed with how easy it is to set up a remote code environment in the browser these days.
Here is VSCode running in the browser with terminal panels running install, dev, and test commands in parallel.
Everything you need to work on Ariakit by just clicking on a link 🤯
1
3
37
Ariakit retweeted
Virtualized list with keyboard navigation built with Ariakit (work in progress):
2
2
32
Ariakit retweeted
Appreciation tweet to @diegohaz for the amazing DX he poured into the @ariakitjs codebase.
Just TRY IT. It's amazing.
The examples files are the source of truth for live playground and the generated codesandboxes + storybook like experience but faster.
2
3
41
Ariakit retweeted
Using the @ariakitjs Menu, Dialog, and Form components with CSS transitions:
1
6
116
Ariakit retweeted
I went a bit further with the dialog example using <details><summary>
The dialog can be opened by the user BEFORE JavaScript has finished loading.
Once JS loads, the state is synced, and all dialog features are restored (focus management, portal, etc.).
2
3
25
Ariakit retweeted
Here's a little React trick we use in Ariakit to execute some logic when the Dialog is closed, either by passing a prop or unmounting the component.
Complete code in the thread.
![A code snippet:
// Inside Dialog component:
useEffect(() => {
const restoreFocus = () => {
// ...
}
if (!props.visible) return restoreFocus()
return restoreFocus
}, [props.visible])
// Works with both
isOpen && <Dialog />
<Dialog visible={false} />](/pic/orig/media%2FFTh8gCHXwAMd3mq.jpg)
ALT A code snippet: // Inside Dialog component: useEffect(() => { const restoreFocus = () => { // ... } if (!props.visible) return restoreFocus() return restoreFocus }, [props.visible]) // Works with both isOpen && <Dialog /> <Dialog visible={false} />
2
5
85
Ariakit retweeted
Syncing the Ariakit Dialog state with the URL using React Router.
Code example in the thread.
1
2
25
Ariakit retweeted
I just published an example of the Ariakit Dialog built with <details><summary>.
One cool thing I found: in Google Chrome, you can search the dialog's contents, which automatically expands the details.
4
4
80
Ariakit retweeted
Published an example of the Dialog component using <details>: ariakit.org/examples/dialog-…
As I said, it's not really accessible without JavaScript enabled, but at least it's not entirely unusable.
2
1
3
Ariakit retweeted
Shoutout to @diegohaz, using @ariakitjs even without docs is such a nice experience. The code is very well commented and easy to implement based on the dozens of examples
seriously, look at this
codesandbox.io/s/ratio-selec…
2
5
18
Ariakit retweeted
Coming back here to show how easy it is to build a modal with a smooth transition and still respecting accessibility.
@ariakitjs it's really good 🥰
4
3
23
Ariakit retweeted
Just updated the Ariakit contribution guide. This is written as a tutorial and covers all the important aspects of the project workflow.
I've actually made UX tests (!) with real people on calls to see if this worked, and the feedback was positive.
👉 github.com/ariakit/ariakit/b…
2
2
26
Ariakit retweeted
In a few minutes I made this animated popover with @ariakitjs + @stitchesjs.
It's amazing how easy it is to animate these elements, with just a few lines of css.
#buildinpublic
1
1
10
Ariakit retweeted
Running ariakit-test-utils in the browser to interact with this custom select component.
Click, type, press, and hover. All done through code. ✨
1
8
100
Ariakit retweeted
hi @diegohaz 👋
1
1
8