Top 11 TypeScript A11y Projects
-
That said, there is a significant community of developers who choose to use css-in-js tooling (I'm a Chakra UI fan, myself) or things like tailwindcss as a way to avoid hand writing CSS/SCSS. I don't miss it writing SCSS by hand, myself.
-
headlessui
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Project mention: How should I handle my modals/popups? Conditionally render in component or place them all in a global provider? | reddit.com/r/reactjs | 2022-05-15So far in my app i've been writing components that conditionally render a modal within it. I use headlessui so it handles placing the modal in a portal for me.
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
Project mention: What styleless component library would you recommend? | reddit.com/r/Frontend | 2022-05-12
I'm currently considering React-aria, HeadlessUI, Radix-ui and Reakit for reimplementing the user-interface for a customer, but i find it hard to choose.
-
-
alfa
:wheelchair: Suite of open and standards-based tools for performing reliable accessibility conformance testing at scale
-
Project mention: I’ve built two React hooks that will help you in making your apps more accessible | reddit.com/r/Frontend | 2022-01-20
🗄 Repository: GitHub 💻 Live Demo: CodeSandbox
-
Project mention: I’ve built a fully themeable and accessible numeric stepper component for React. [Details in the comments] | reddit.com/r/webdev | 2022-04-09
The user who experiences issues caused by motion can use the component by clicking on the increment/decrement buttons or the thumb. In this way, there is no excessive motion, though I believe the physics-based animation as a response to drag is not excessive at all. I was deep-diving into the motion-related accessibility issues when building https://github.com/anatoliygatt/use-prefers-reduced-motion.
-
Scout APM
Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.
-
web-test-runner-voiceover
A small plugin for @web/test-runner that uses VoiceOver on Mac for integrated a11y screen reader testing.
Digging further started to yield a little more promise with the discovery of auto-vo, screen-reader-reader, and web-test-runner-voiceover (article - just found this while writing this post!) following the finding of a tweet from Smashing Magazine and then rabbit-holing on twitter... 🕳🐇
-
access-key-label-polyfill
Polyfills the accessKeyLabel property to improve discoverability of native keyboard shortcuts for your website. Tiny and dependency-free.
-
Project mention: I made an offline-shop demonstrating common accessibility features. Feedback welcome! | reddit.com/r/reactnative | 2021-06-11
Link to project: https://github.com/yduman/InclusiveShop
-
In the example, which can be found on GitHub), A user is able to fill in his/her name and email address, which will be validated in remix when submitting the form. There's two states of the form. The first one will occur if there are any validation errors and the second is a toast message which will appear and dissapear when the user has successfully submitted the form.
TypeScript A11y related posts
- Same UI component for all frameworks
- What styleless component library would you recommend?
- The A11Y Project Checklist
- Announcing Chakra UI Svelte
- I’ve built a fully themeable and accessible numeric stepper component for React. [Details in the comments]
- Creating Reusable React Components with TypeScript
- UI libraries for your next React project
Index
What are some of the best open-source A11y projects in TypeScript? This list will help you:
Project | Stars | |
---|---|---|
1 | chakra-ui | 26,115 |
2 | headlessui | 14,865 |
3 | reakit | 5,865 |
4 | react-colorful | 1,872 |
5 | alfa | 75 |
6 | use-prefers-color-scheme | 28 |
7 | use-prefers-reduced-motion | 9 |
8 | web-test-runner-voiceover | 5 |
9 | access-key-label-polyfill | 1 |
10 | InclusiveShop | 0 |
11 | accessible-forms | 0 |
Are you hiring? Post a new remote job listing for free.