react-a11y-dialog - A React component for a11y-dialog

  •        53

react-a11y-dialog is a thin React component for a11y-dialog relying on React portals to ease the use of accessible dialog windows in React applications. Special thanks to Moritz Kröger (@morkro) for his kind help in making that library better.

https://github.com/KittyGiraudel/react-a11y-dialog

Dependencies:

a11y-dialog : ^7.1.0

Tags
Implementation
License
Platform

   




Related Projects

a11y-dialog - A very lightweight and flexible accessible modal dialog script.

  •    Javascript

This is a lightweight (1.3Kb) yet flexible script to create accessible dialog windows.

Reakit - Toolkit for building accessible rich web apps with React

  •    Typescript

Reakit helps to build accessible rich web apps with React. It is a lower level component library for building accessible high level UI libraries, design systems and applications with React. It strictly follows WAI-ARIA 1.1 standards and provides many of the widgets described in WAI-ARIA Authoring Practices like Button, Dialog, Tab and others. It has been built with composition in mind. In fact, its own components are composed by a few other abstract ones, like Role, Tabbable and Composite.

react-three-a11y - ♿️ Accessibility tools for React Three Fiber

  •    TypeScript

👩‍🦯 Provide accessibility support to R3F such as focus indication, keyboard tab index, and screen reader support

react-useportal - 🌀 React hook for Portals

  •    TypeScript

Need to make dropdowns, lightboxes/modals/dialogs, global message notifications, or tooltips in React? React Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component (react docs). This hook is also isomorphic, meaning it works with SSR (server side rendering).

eslint-plugin-jsx-a11y - Static AST checker for a11y rules on JSX elements.

  •    Javascript

Static AST checker for accessibility rules on JSX elements. Ryan Florence built out this awesome runtime-analysis tool called react-a11y. It is super useful. However, since you're probably already using linting in your project, this plugin comes for free and closer to the actual development process. Pairing this plugin with an editor lint plugin, you can bake accessibility standards into your application in real-time.


react-aria-modal - A fully accessible React modal built according WAI-ARIA Authoring Practices

  •    Javascript

A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices. Check out the demo.

react-modal - Accessible modal dialog component for React

  •    Javascript

The app element allows you to specify the portion of your app that should be hidden (via aria-hidden) to prevent assistive technologies such as screenreaders from reading content outside of the content of your modal.If you are doing server-side rendering, you should use this property.

react-a11y - Identifies accessibility issues in your React.js elements

  •    Javascript

Warns about potential accessibility issues with your React elements.In your main application file, require the module and call it, you'll start getting warnings in the console as your app renders. Note that by default all rules are turned off s oyou need to turn them on first (by setting them to "warn" or "error").

mantine - React components and hooks library with native dark theme support focused on usability, accessibility and developer experience

  •    TypeScript

Mantine is a MIT licensed open source react components and hooks library with focus on usability, accessibility and developer experience. All Mantine packages have MIT licence. All Mantine dependencies also have MIT licence.

react-colorful - 🎨 A tiny (2,5 KB) color picker component for React and Preact apps

  •    TypeScript

We provide 12 additional color picker components for different color models, unless your app needs a HEX string as an input/output format. The easiest way to tweak react-colorful is to create another stylesheet to override the default styles.

react-axe - Accessibility auditing for React.js applications

  •    Javascript

Test your React application with the axe-core accessibility testing library. Results will show in the Chrome DevTools console. Call the exported function passing in the React and ReactDOM objects as well as a timing delay in milliseconds that will be observed between each component change and the time the analysis starts.

react-html5video - A customizeable HTML5 Video React component with i18n and a11y.

  •    Javascript

A customizeable HoC (Higher Order Component) for HTML5 Video that allows custom and configurable controls with i18n and a11y. V2 API has changed and is not backwards compatible. You can find the old documentation here.

dialog-polyfill - Polyfill for the HTML dialog element

  •    Javascript

<dialog> is an element for a popup box in a web page, including a modal option which will make the rest of the page inert during use. This could be useful to block a user's interaction until they give you a response, or to confirm an action. See the HTML spec. This polyfill works on modern versions of all major browsers. It also supports IE9 and above.

react-modal2 - :thought_balloon: Simple modal component for React.

  •    Javascript

Simple modal component for React. ReactModal2 tries to be as minimal as possible. This means it requires a little bit of setup, but gives you complete flexibility to do what you want.

boron - A collection of dialog animations with React.js

  •    Javascript

A collection of dialog animations with React.js. Then open localhost:9999 in a browser.

react-skylight - A react component for modals and dialogs

  •    Javascript

React SkyLight is a simple react component for modals and dialogs. Powerful, lightweight and customizable design. React skylight DEMOS and DOCS.

dialog - React Dialog

  •    TypeScript

rc-dialog is released under the MIT license.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.