How to use react-a11y - 5 common examples

To help you get started, we’ve selected a few react-a11y examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github KadoBOT / reaxor / src / index.js View on Github external
import App from './components/App'
import {whyDidYouUpdate} from 'why-did-you-update'

const store = new Store()

const consoleErrorReporter = ({error}) => {
  console.error(error)
  return 
}

consoleErrorReporter.propTypes = {
  error: React.PropTypes.error,
}

if(process.env.NODE_ENV === 'development') {
  a11y(React)
  whyDidYouUpdate(React)
  // You can include and exclude components:
  // whyDidYouUpdate(React, { include: /^pure/, exclude: /^Connect/ })
}

render(
  
    
  ,
  document.getElementById('root')
)

if (module.hot) {
  module.hot.accept('./components/App.js', () => {
    let AppNext = require('./components/App').default
    render(
github Talend / ui / packages / stepper / .storybook / config.js View on Github external
import React from 'react';
import ReactDOM from 'react-dom';
import a11y from 'react-a11y';
import IconsProvider from '@talend/react-components/lib/IconsProvider';
import { configure, addDecorator } from '@storybook/react';
import { withInfo } from '@storybook/addon-info';
import { checkA11y } from '@storybook/addon-a11y';

import '@talend/bootstrap-theme/src/theme/theme.scss';
import 'focus-outline-manager';

a11y(ReactDOM);
addDecorator(withInfo);
addDecorator(checkA11y);
addDecorator(story => (
	
		
		{story()}
	
));

function loadStories() {
	require('../stories/index');
}

configure(loadStories, module);
github Talend / ui / packages / forms / stories / index.js View on Github external
import { action } from '@storybook/addon-actions';
import { withKnobs, object } from '@storybook/addon-knobs';
import { checkA11y } from '@storybook/addon-a11y';

import Well from 'react-bootstrap/lib/Well';
import IconsProvider from '@talend/react-components/lib/IconsProvider';
import Action from '@talend/react-components/lib/Actions/Action';
import Dialog from '@talend/react-components/lib/Dialog';

import i18n from './config/i18n';
import Form from '../src/Form';
import DatalistWidget from '../src/widgets/DatalistWidget';
import createCollapsibleFieldset from '../src/fields/CollapsibleFieldset';
import ArrayFieldTemplate from '../src/templates/ArrayFieldTemplate';

a11y(ReactDOM);

const decoratedStories = storiesOf('Form', module)
	.addDecorator(checkA11y)
	.addDecorator(withKnobs)
	.addDecorator(story => (
		
			<section>
				<nav style="{{">
					<div>
						<button> i18n.changeLanguage('en')}&gt;
							Default (en)
						</button>
						<button> i18n.changeLanguage('fr')}&gt;
							fr</button></div></nav></section>
github code-shoily / modular-mobx-boilerplate / src / index.jsx View on Github external
import React from 'react'
import {render} from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './App'
import RedBox from 'redbox-react'
import a11y  from 'react-a11y'
import {whyDidYouUpdate} from 'why-did-you-update'


const root = document.getElementById('root')

if(process.env.NODE_ENV === 'development') {
  a11y(React)
  //whyDidYouUpdate(React)

  try {
    render(, root)
  } catch (e) {
    render(, root)
  }

} else {
  render(, root)
}

if (module.hot) {
  module.hot.accept('./App.js', () =&gt; {
    let AppNext = require('./App').default
    try {

react-a11y

Warns about potential accessibility issues with your React elements.

MIT
Latest version published 5 years ago

Package Health Score

59 / 100
Full package analysis

Popular react-a11y functions