An accessible page header component for SPAs.

PageHeader.js

import React, { Component } from "react"
import { withLastLocation } from "react-router-last-location"
import PropTypes from "prop-types"

class PageHeader extends Component {
  constructor(props) {
    super(props)
    this.headerRef = React.createRef()
  }
  
  state = { tabIndex: null }

  static propTypes = {
    children: PropTypes.node.isRequired,
    lastLocation: PropTypes.object.isRequired,
  }

  componentDidMount() {
    if (!this.props.lastLocation) return
    
    this.setState({ tabIndex: "-1" }, () => {
      this.headerRef.current.focus()
      this.headerRef.current.addEventListener("blur", this.handleHeaderBlur)
    })
  }

  handleHeaderBlur = () => {
    this.headerRef.current.removeEventListener("blur", this.handleHeaderBlur)
    this.setState({ tabIndex: null })
  }
  
  render() {
    return (
      <h1 tabIndex={this.state.tabIndex} ref={this.headerRef}>
        {this.props.children}
      </h1>
    )
  }
}
export default withLastLocation(PageHeader)