Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression. Learn more →
Top 23 TypeScript Accessibility Projects
-
headlessui
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Though I'm not a great fan of everything going on with https://headlessui.com/ I think it integrates at the right level I would like to see and balances both integration packages for react and vue on a good level.
-
Project mention: [Announcement] RES & Reddit's upcoming API changes | /r/RESAnnouncements | 2023-06-05
In case you need it, I found the DarkReader extension to be very useful for any site that doesn't offer a dark mode.
-
Klotho
AWS Cloud-aware infrastructure-from-code toolbox [NEW]. Build cloud backends with Infrastructure-from-Code (IfC), a revolutionary technique for generating and updating cloud infrastructure. Try IfC with AWS and Klotho now (Now open-source)
-
primitives
Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
Project mention: I'm building Radix Svelte, an unstyled UI component library with a focus on accessibility. | /r/sveltejs | 2023-04-24Other things that led me to choose this path were: Most libraries that are ports, official or not, use the original name (e.g. Svelte Material UI); Radix UI's license is fairly permissive (https://github.com/radix-ui/primitives/blob/main/LICENSE), which is why I also don't think it matters that it's a company behind it. Same as why I don't see an issue with the name Preact, for example.
-
react-spectrum
A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.
This was an intentional choice. Repositioning when an outer element scrolls is pretty janky in some cases because scroll events don’t fire at 60fps. Also it’s not possible at all in other cases, like if the trigger goes completely out of view. We used to close the popover in this case but this caused usability problems. The new behavior of preventing scroll actually matches native platforms like macOS and helps with these issues. I get that it’s a little opinionated but it was thoroughly considered, not just done out of laziness. More details in this answer: https://github.com/adobe/react-spectrum/discussions/3802#dis...
-
As a tech lead (or whoever makes the technical decision), it looks very tempting to adopt the open source UI libraries, if possible. In the React.js land, I used a bit of Charkra UI and Reakit.
-
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.
to the end of script src="{% static 'noUiSlider-master/noUiSlider-master/dist/nouislider.js' %}">. You can see the full example in the documentation.
-
-
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!
-
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/
-
spearmint
Testing, simplified. || An inclusive, accessibility-first GUI for generating clean, semantic Javascript tests in only a few clicks of a button. (by open-source-labs)
I went down a crazy rabbit hole gathering all kinds of data and analyzing the open source projects that Codesmith has. I'm very fast and it took about 2 hours one Sunday afternoon. I logged alumni LinkedIns and GitHubs for ~200 people listed on these open source project individual websites. I found about 2/3 of people listed 6+ months of work experience on their LinkedIns as "Software Engineers" but when looking at their GitHub contributions to the projects, committed on average over 2-3 week long periods only. All of these projects had the exact same spiky patterns, it was crazy, over and over and over and over again, like this: https://github.com/open-source-labs/spearmint/graphs/contributors and over and over people listing months and sometimes years of experience on their LinkedIns.
-
-
-
-
Thanks, but the developer is still figuring out how to do it: https://github.com/Midnight-Lizard/Midnight-Lizard/issues/376
-
You should avoid implementing standardized components on your own because there is much more to consider than it seems at first (screen reader support, keyboard navigation). For this reason you usually want to use a (headless) component library. I usually use solid-healdess. You can go to it's examples folder to see how to use any of the components
-
Project mention: Are there any production-grade, open source Next.js that reflect best practices? | /r/nextjs | 2022-11-21
One that comes to mind, is the website for Radix UI: https://github.com/radix-ui/website
-
react-modal-sheet
Flexible bottom sheet component built with Framer Motion to provide buttery smooth UX while keeping accessibility in mind 🪐
-
primitives
Components, icons, colors, and templates for building high-quality, accessible UI. Free and open-source. A project developed by @productdevbook (by oku-ui)
https://github.com/oku-ui/primitives so this is in the works rn. Seems pretty interesting. I was thinking of trying to contribute to it when I get the time
-
There is an accessibility library from drei: https://github.com/pmndrs/react-three-a11y
-
lighthouse-check-action
GitHub Action for running @GoogleChromeLabs Lighthouse audits with all the bells and whistles 🔔 Multiple audits, Slack notifications, and more!
-
plyr-react
A simple, accessible and customisable react media player for Video, Audio, YouTube and Vimeo
-
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.
-
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: A Complete Guide to Creating a Mind Map Using Angular Diagram Component | dev.to | 2022-12-23If you would like to try out the Diagram, You can download our free trial. You can also look at the Diagram source on GitHub and check our live demo and documentation for detailed explanations.
-
Project mention: Screen reader driver for test automation (VoiceOver & NVDA) | /r/npm | 2023-05-21
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
NOTE:
The open source projects on this list are ordered by number of github stars.
The number of mentions indicates repo mentiontions in the last 12 Months or
since we started tracking (Dec 2020).
The latest post mention was on 2023-06-05.
TypeScript Accessibility related posts
- Asking for some guidance on a plugin for static websites
- Vuetify framework or TawilwindCSS
- É demerito utilizar biblioteca de componente como front end?
- How to Build a Modal Video Component with Tailwind CSS and Next.js
- Zag.js – UI Components Powered by FSM
- Screen reader driver for test automation (VoiceOver & NVDA)
- How does this work? Mapping through array of items, but the array is never declared?
-
A note from our sponsor - InfluxDB
www.influxdata.com | 5 Jun 2023
Index
What are some of the best open-source Accessibility projects in TypeScript? This list will help you:
| Project | Stars | |
|---|---|---|
| 1 | headlessui | 20,839 |
| 2 | darkreader | 16,763 |
| 3 | primitives | 9,882 |
| 4 | react-spectrum | 8,832 |
| 5 | reakit | 6,787 |
| 6 | noUiSlider | 5,441 |
| 7 | zag | 2,687 |
| 8 | date-picker | 1,677 |
| 9 | spearmint | 1,237 |
| 10 | stylebot | 1,222 |
| 11 | react-accessible-accordion | 763 |
| 12 | accessibility-insights-web | 740 |
| 13 | Midnight-Lizard | 559 |
| 14 | solid-headless | 551 |
| 15 | website | 550 |
| 16 | react-modal-sheet | 495 |
| 17 | primitives | 465 |
| 18 | react-three-a11y | 434 |
| 19 | lighthouse-check-action | 413 |
| 20 | plyr-react | 398 |
| 21 | Syncfusion React UI Components Library (Essential JS 2) | 287 |
| 22 | ej2-angular-ui-components | 253 |
| 23 | guidepup | 188 |
Access the most powerful time series database as a service
Ingest, store, & analyze all types of time series data in a fully-managed, purpose-built database. Keep data forever with low-cost storage and superior data compression.
www.influxdata.com