Top 23 TypeScript Accessibility Projects
-
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.
-
Project mention: Haachama apologizes to Vshojo’s Silvervale for mistakenly calling her Nyanners | reddit.com/r/Hololive | 2022-05-24
Here is link number 1 - Previous text "no"
-
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!
-
react-spectrum
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
It’s not perfect though. The only reason I’m not using preact is that my front-end library of choice, react-aria, does not work 100% with preact, though it sounds like it might now be close (unsure).
-
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.
-
noUiSlider
noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
-
primitives
An open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @modulz.
RadixUI: it is a low-level UI component library focused on accessibility, customization and developer experience. (Source: https://github.com/radix-ui/primitives)
-
date-picker
Duet Date Picker is an open source version of Duet Design System’s accessible date picker. Try live example at https://duetds.github.io/date-picker/
Project mention: Web Design Inspiration that isn't super artsy! | reddit.com/r/web_design | 2021-12-30This design system is not for public use, but it is a good source of inspiration for something not flashy; https://www.duetds.com
-
SonarQube
Static code analysis for 29 languages.. Your projects are multi-language. So is SonarQube analysis. Find Bugs, Vulnerabilities, Security Hotspots, and Code Smells so you can release quality code every time. Get started analyzing your projects today for free.
-
Project mention: are there any extensions to make the youtube search suggestions purple again? | reddit.com/r/chrome_extensions | 2022-05-06
I customize fonts/colors on a per-site basis with Stylebot.
-
-
-
Project mention: Which of the following browser extensions do you find the most useful? | reddit.com/r/nordvpn | 2022-02-19
Midnight Lizard, https://midnight-lizard.org/
-
lighthouse-check-action
GitHub Action for running @GoogleChromeLabs Lighthouse audits with all the bells and whistles 🔔 Multiple audits, Slack notifications, and more!
lighthouse-check-action
-
react-modal-sheet
Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
Project mention: How to create this animation for a mobile menu? (Video included) | reddit.com/r/reactjs | 2022-03-21 -
plyr-react
A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo
Type Maintainer Link WordPress Brandon Lavigne (@drrobotnik) https://wordpress.org/plugins/plyr/ Angular Simon Bobrov (@smnbbrv) https://github.com/smnbbrv/ngx-plyr React Chintan Prajapati (@chintan9) https://github.com/chintan9/plyr-react Vue Gabe Dunn (@redxtech) https://github.com/redxtech/vue-plyr Neos Jon Uhlmann (@jonnitto) https://packagist.org/packages/jonnitto/plyr Kirby Dominik Pschenitschni (@dpschen) https://github.com/dpschen/kirby-plyrtag REDAXO FriendsOfRedaxo / skerbis (@skerbis) https://github.com/FriendsOfREDAXO/plyr svelte-plyr Ben Woodward / benwoodward (@benwoodward) https://github.com/benwoodward/svelte-plyr
-
Syncfusion React UI Components Library (Essential JS 2)
Syncfusion React UI components library offer more than 50+ cross-browser, responsive, and lightweight react UI controls for building modern web applications.
Project mention: is there any component packages like mudblazor but for javascript/react? | reddit.com/r/Blazor | 2022-04-06React -https://www.syncfusion.com/react-ui-components
-
ej2-angular-ui-components
Syncfusion Angular UI components library offer more than 50+ cross-browser, responsive, and lightweight angular UI controls for building modern web applications.
Project mention: Entering Invalid Dates Is Not Possible Anymore in Angular Apps | dev.to | 2021-09-15For more information, refer to the Mask support in Angular DatePicker demos on the web and the GitHub repository.
-
react-interactive
Better hover, active and focus states than CSS pseudo-classes, and a callback when the interactive state changes.
-
And of course, it's open source 🤪 Repo: https://github.com/chakra-ui/zag Docs Repo: https://github.com/chakra-ui/zag-docs
-
alfa
:wheelchair: Suite of open and standards-based tools for performing reliable accessibility conformance testing at scale
-
aria-devtools
Easily spot missing ARIA labels, misused ARIA roles, and incomplete keyboard support in your web applications.
-
Project mention: How to implement scroll restoration for React Router SPA | reddit.com/r/codehunter | 2022-04-17
I considered using oaf-react-router, but it says nothing in the documentation about disabling scroll restoration or scroll-to-top for certain routes. Edit: It does actually handle this, as outlined in my answer.
-
Project mention: The Urdu font on Reddit is very difficult to read. Can I change it to Nastaliq font on my browser or can we request Reddit to have it changed? | reddit.com/r/Urdu | 2022-05-25
-
TypeScript Accessibility related posts
- Change the colour of grey text back to black on website using poor contrast text
- State Machine Library for UI Widgets?
- Same UI component for all frameworks
- How should I handle my modals/popups? Conditionally render in component or place them all in a global provider?
- What styleless component library would you recommend?
- The A11Y Project Checklist
- Announcing Chakra UI Svelte
Index
What are some of the best open-source Accessibility projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | headlessui | 14,945 |
| 2 | darkreader | 14,001 |
| 3 | react-spectrum | 6,496 |
| 4 | reakit | 5,865 |
| 5 | noUiSlider | 5,240 |
| 6 | primitives | 4,519 |
| 7 | date-picker | 1,546 |
| 8 | stylebot | 1,002 |
| 9 | zag | 940 |
| 10 | react-accessible-accordion | 712 |
| 11 | Midnight-Lizard | 505 |
| 12 | lighthouse-check-action | 328 |
| 13 | react-modal-sheet | 276 |
| 14 | plyr-react | 273 |
| 15 | Syncfusion React UI Components Library (Essential JS 2) | 226 |
| 16 | ej2-angular-ui-components | 204 |
| 17 | react-interactive | 150 |
| 18 | zag-docs | 98 |
| 19 | alfa | 75 |
| 20 | aria-devtools | 67 |
| 21 | oaf-react-router | 56 |
| 22 | Wudooh | 46 |
| 23 | react-micro-modal | 38 |
Are you hiring? Post a new remote job listing for free.
