81 | 82 | By default, Oaf React Router will announce "navigated to foo" where "foo" is the page title returned by the function described in the previous section. You can override this to support localization, etc. 83 | 84 | See: 85 | * https://almerosteyn.com/2017/03/accessible-react-navigation 86 | 87 | ### Hash fragment support 88 | 89 | Another native browser feature that React Router doesn't emulate is scrolling to the element identified by the hash fragment in a URL. For example, if you load https://en.wikipedia.org/wiki/Firefox#Performance, your browser will scroll down to the `` automatically. 90 | 91 | There are other libraries that tackle this issue—for example [rafrex/react-router-hash-link](https://github.com/rafrex/react-router-hash-link)—but they typically only address scroll to the exclusion of focus (there's that theme again). 92 | 93 | Oaf React Router implements this for you, taking care of both focus and scroll. 94 | 95 | A [caveat](https://github.com/oaf-project/oaf-react-router/issues/8) here is that the identified element must exist in the DOM straight after the route is rendered. If the element won't exist for some time, e.g. until after an API response, then Oaf React Router won't focus or scroll to it, falling back on the primary focus target. 96 | 97 | ## Installation 98 | 99 | ```sh 100 | # yarn 101 | yarn add oaf-react-router 102 | 103 | # npm 104 | npm install oaf-react-router 105 | ``` 106 | 107 | ## Basic Usage 108 | 109 | ### React Router 5 110 | 111 | ```diff 112 | - import { BrowserRouter as Router } from "react-router-dom"; 113 | + import { Router } from "react-router-dom"; 114 | + import { createBrowserHistory } from "history"; 115 | + import { wrapHistory } from "oaf-react-router"; 116 | 117 | + const history = createBrowserHistory(); // or createHashHistory() 118 | + wrapHistory(history); 119 | 120 | ReactDOM.render(( 121 | -Screen readers are clever enough to read a lot of information that the browser expose naturally, but if no information exists to read out, the screen reader will remain ominously silent, even if something very important has happened on screen.
77 | 78 |Unfortunately, this is the case with many routed SPA applications today. Screen readers are able to recognise actual browser navigation very easily as the browser will tell the screen reader that it has navigated to another web page. In the case of SPAs, like those built with React or Angular, the router software will take over some of the navigation actions from the browser in order to control the application without constantly reloading the host HTML page.
79 | 80 |The result: A totally silent page transition leading to a very confusing experience for these users. Imagine trying to navigate a web application if you could not even see that the navigation was successful!