Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 842830f

Browse files
author
madalynrose
committed
move RouteAnnouncer inside of RouteUpdates in navigation.js
1 parent 81cfa5a commit 842830f

File tree

2 files changed

+124
-64
lines changed

2 files changed

+124
-64
lines changed

‎packages/gatsby/cache-dir/navigation.js

Lines changed: 62 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,62 @@ function init() {
161161
maybeRedirect(window.location.pathname)
162162
}
163163

164+
class RouteAnnouncer extends React.Component {
165+
constructor(props) {
166+
super(props)
167+
this.state = { announcement: `` }
168+
console.log(`constructor`)
169+
}
170+
171+
componentDidUpdate(prevProps) {
172+
requestAnimationFrame(() => {
173+
console.log(`updating`, this.props.location.pathname)
174+
let pageName = `new page at ${this.props.location.pathname}`
175+
if (document.title) {
176+
pageName = document.title
177+
}
178+
const pageHeadings = document
179+
.getElementById(`gatsby-focus-wrapper`)
180+
.getElementsByTagName(`h1`)
181+
if (pageHeadings) {
182+
pageName = pageHeadings[0].textContent
183+
}
184+
let newAnnouncement = `Navigated to ${pageName}`
185+
if (this.state.announcement !== newAnnouncement) {
186+
console.log(`setting state`, this.state.announcement, newAnnouncement)
187+
this.setState({
188+
announcement: newAnnouncement,
189+
})
190+
}
191+
})
192+
}
193+
194+
render() {
195+
console.log(`rendering`, this.props.location.pathname)
196+
const { announcement } = this.state
197+
return (
198+
<div
199+
id="gatsby-announcer"
200+
style={{
201+
position: `absolute`,
202+
width: 1,
203+
height: 1,
204+
padding: 0,
205+
overflow: `hidden`,
206+
clip: `rect(0, 0, 0, 0)`,
207+
whiteSpace: `nowrap`,
208+
border: 0,
209+
}}
210+
role="alert"
211+
aria-live="assertive"
212+
aria-atomic="true"
213+
>
214+
{announcement}
215+
</div>
216+
)
217+
}
218+
}
219+
164220
// Fire on(Pre)RouteUpdate APIs
165221
class RouteUpdates extends React.Component {
166222
constructor(props) {
@@ -188,7 +244,12 @@ class RouteUpdates extends React.Component {
188244
}
189245

190246
render() {
191-
return this.props.children
247+
return (
248+
<div>
249+
{this.props.children}
250+
<RouteAnnouncer location={location} />
251+
</div>
252+
)
192253
}
193254
}
194255

‎packages/gatsby/cache-dir/production-app.js

Lines changed: 62 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -86,76 +86,75 @@ apiRunnerAsync(`onClientEntry`).then(() => {
8686
/>
8787
</Router>
8888
</ScrollContext>
89-
<RouteAnnouncer location={location} />
9089
</RouteUpdates>
9190
)}
9291
</EnsureResources>
9392
)
9493
}
9594
}
9695

97-
class RouteAnnouncer extends React.Component {
98-
constructor(props) {
99-
super(props)
100-
this.state = { announcement: `` }
101-
console.log(`constructor`)
102-
}
103-
104-
componentDidUpdate(prevProps) {
105-
console.log(`did update`, this.props.location.pathname)
106-
if (this.props.location.pathname !== prevProps.location.pathname) {
107-
requestAnimationFrame(() => {
108-
console.log(`updating`, this.props.location.pathname)
109-
let pageName = `new page at ${this.props.location.pathname}`
110-
if (document.title) {
111-
pageName = document.title
112-
}
113-
const pageHeadings = document
114-
.getElementById(`gatsby-focus-wrapper`)
115-
.getElementsByTagName(`h1`)
116-
if (pageHeadings) {
117-
pageName = pageHeadings[0].textContent
118-
}
119-
let newAnnouncement = `Navigated to ${pageName}`
120-
if (this.state.announcement !== newAnnouncement) {
121-
console.log(
122-
`setting state`,
123-
this.state.announcement,
124-
newAnnouncement
125-
)
126-
this.setState({
127-
announcement: newAnnouncement,
128-
})
129-
}
130-
})
131-
}
132-
}
133-
134-
render() {
135-
console.log(`rendering`, this.props.location.pathname)
136-
const { announcement } = this.state
137-
return (
138-
<div
139-
id="gatsby-announcer"
140-
style={{
141-
position: `absolute`,
142-
width: 1,
143-
height: 1,
144-
padding: 0,
145-
overflow: `hidden`,
146-
clip: `rect(0, 0, 0, 0)`,
147-
whiteSpace: `nowrap`,
148-
border: 0,
149-
}}
150-
role="alert"
151-
aria-live="assertive"
152-
aria-atomic="true"
153-
>
154-
{announcement}
155-
</div>
156-
)
157-
}
158-
}
96+
// class RouteAnnouncer extends React.Component {
97+
// constructor(props) {
98+
// super(props)
99+
// this.state = { announcement: `` }
100+
// console.log(`constructor`)
101+
// }
102+
103+
// componentDidUpdate(prevProps) {
104+
// console.log(`did update`, this.props.location.pathname)
105+
// if (this.props.location.pathname !== prevProps.location.pathname) {
106+
// requestAnimationFrame(() => {
107+
// console.log(`updating`, this.props.location.pathname)
108+
// let pageName = `new page at ${this.props.location.pathname}`
109+
// if (document.title) {
110+
// pageName = document.title
111+
// }
112+
// const pageHeadings = document
113+
// .getElementById(`gatsby-focus-wrapper`)
114+
// .getElementsByTagName(`h1`)
115+
// if (pageHeadings) {
116+
// pageName = pageHeadings[0].textContent
117+
// }
118+
// let newAnnouncement = `Navigated to ${pageName}`
119+
// if (this.state.announcement !== newAnnouncement) {
120+
// console.log(
121+
// `setting state`,
122+
// this.state.announcement,
123+
// newAnnouncement
124+
// )
125+
// this.setState({
126+
// announcement: newAnnouncement,
127+
// })
128+
// }
129+
// })
130+
// }
131+
// }
132+
133+
// render() {
134+
// console.log(`rendering`, this.props.location.pathname)
135+
// const { announcement } = this.state
136+
// return (
137+
// <div
138+
// id="gatsby-announcer"
139+
// style={{
140+
// position: `absolute`,
141+
// width: 1,
142+
// height: 1,
143+
// padding: 0,
144+
// overflow: `hidden`,
145+
// clip: `rect(0, 0, 0, 0)`,
146+
// whiteSpace: `nowrap`,
147+
// border: 0,
148+
// }}
149+
// role="alert"
150+
// aria-live="assertive"
151+
// aria-atomic="true"
152+
// >
153+
// {announcement}
154+
// </div>
155+
// )
156+
// }
157+
// }
159158

160159
const { pagePath, location: browserLoc } = window
161160

0 commit comments

Comments
 (0)