├── .gitignore
├── README.md
├── package.json
├── public
├── favicon.ico
└── index.html
├── src
├── A11yMessage.js
├── App.css
├── App.js
├── Contact.js
├── Header.js
├── Orders.js
├── Overview.js
├── actions.js
├── index.js
└── reducers.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 |
19 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This is an example of how to make React Router 4 play well with screen readers.
2 |
3 | Steps
4 | 1. Fork and clone the repo.
5 | 2. Run `yarn` (or `npm install`).
6 | 3. Start up the project with `yarn start` (or `npm run start`).
7 |
8 | The example was bootstrapped with **create-react-app**.
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "a11yrouter",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "bootstrap": "^3.3.7",
7 | "react": "^15.4.2",
8 | "react-dom": "^15.4.2",
9 | "react-redux": "^5.0.3",
10 | "react-router-dom": "^4.0.0",
11 | "redux": "^3.6.0"
12 | },
13 | "devDependencies": {
14 | "react-scripts": "0.9.5"
15 | },
16 | "scripts": {
17 | "start": "react-scripts start",
18 | "build": "react-scripts build",
19 | "test": "react-scripts test --env=jsdom",
20 | "eject": "react-scripts eject"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AlmeroSteyn/a11yrouter/ba22fa7fac1db5702ebe6e5c8320602e3db4a486/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
16 | Accessible routing in React
17 |
18 |
19 |
20 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/A11yMessage.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import { connect } from 'react-redux';
3 | import { getA11yMessage } from './reducers';
4 | import * as actions from './actions';
5 |
6 | class A11yMessage extends Component {
7 |
8 | constructor(props){
9 | super(props);
10 |
11 | this.state = {
12 | currentA11yMessage: ''
13 | }
14 | }
15 |
16 | componentWillReceiveProps(nextProps){
17 | //We delay the setting and clearing of the accessible route transition
18 | //text to ensure that the screen readers don't miss it.
19 | if(nextProps.a11yMessage){
20 | setTimeout(()=>{this.setState({
21 | currentA11yMessage: nextProps.a11yMessage
22 | })}, 50);
23 | setTimeout(()=>{this.setState({
24 | currentA11yMessage: ''
25 | })}, 500)
26 | }
27 | }
28 |
29 | render() {
30 | const { currentA11yMessage } = this.state;
31 | return (
32 |
36 | {currentA11yMessage ? {currentA11yMessage} : ''}
37 |
38 | );
39 | }
40 | }
41 |
42 | const mapStateToA11yProps = (state) => ({
43 | a11yMessage: getA11yMessage(state)
44 | });
45 |
46 | export default connect(mapStateToA11yProps, actions)(A11yMessage);
--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
1 | .App {
2 | text-align: center;
3 | }
4 |
5 | .App-logo {
6 | animation: App-logo-spin infinite 20s linear;
7 | height: 80px;
8 | }
9 |
10 | .App-header {
11 | background-color: #222;
12 | height: 150px;
13 | padding: 20px;
14 | color: white;
15 | }
16 |
17 | .App-intro {
18 | font-size: large;
19 | }
20 |
21 | @keyframes App-logo-spin {
22 | from { transform: rotate(0deg); }
23 | to { transform: rotate(360deg); }
24 | }
25 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { createStore } from 'redux';
3 | import { Provider } from 'react-redux';
4 | import rootReducer from './reducers';
5 | import { BrowserRouter as Router, Route } from 'react-router-dom';
6 | import Header from './Header';
7 | import Overview from './Overview';
8 | import Contact from './Contact';
9 | import Orders from './Orders';
10 | import A11yMessage from './A11yMessage';
11 | import '../node_modules/bootstrap/dist/css/bootstrap.css';
12 | import './App.css';
13 |
14 | //The Redux store is created as usual, but we add extra configuration to enable the use of the Redux browser dev tools.
15 | const store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
16 |
17 | const App = () => (
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
7 |
20 |