Fix page changes not being announced by assistive technology when navigating using the client-side router

packages/volto/cypress/tests/core/basic/locking.js

@@ -41,8 +41,8 @@ describe('Document locking', () => {
  cy.visit('/document');
  cy.wait('@content');
 
- cy.findByRole('alert')
- .get('.toast-inner-content')
+ cy.get('.Toastify')
+ .findByRole('alert')
  .contains('This item was locked by Editor 1 on');
  });
 

packages/volto/cypress/tests/core/basic/metadata.js

@@ -34,8 +34,8 @@ describe('Add Content Tests', () => {
  cy.get('.ui.basic.icon.button.image').contains('Image').click();
  cy.get('#toolbar-save').click();
 
- cy.findByRole('alert')
- .get('.toast-inner-content')
+ cy.get('.Toastify')
+ .findByRole('alert')
  .contains('Required input is missing');
  cy.get('.sidebar-container .tabs-wrapper .active.item').contains('Page');
  });

packages/volto/cypress/tests/workingCopy/create.js

@@ -19,8 +19,11 @@ describe('Working Copy Tests - Create', () => {
  it('Basic create operation', function () {
  cy.get('#toolbar-more').click();
  cy.findByLabelText('Create working copy').click();
- cy.findByRole('alert').contains('This is a working copy of');
- cy.findByRole('alert')
+ cy.get('.Toastify')
+ .findByRole('alert')
+ .contains('This is a working copy of');
+ cy.get('.Toastify')
+ .findByRole('alert')
  .get('.toast-inner-content a')
  .should('have.attr', 'href')
  .and('include', '/document');
@@ -37,11 +40,17 @@ describe('Working Copy Tests - Create', () => {
  it('Navigation through baseline-working copy', function () {
  cy.get('#toolbar-more').click();
  cy.findByLabelText('Create working copy').click();
- cy.findByRole('alert').get('.toast-inner-content a').click();
+ cy.get('.Toastify')
+ .findByRole('alert')
+ .get('.toast-inner-content a')
+ .click();
 
  cy.url().should('eq', Cypress.config().baseUrl + '/document');
- cy.findByRole('alert').contains('This has an ongoing working copy in');
- cy.findByRole('alert')
+ cy.get('.Toastify')
+ .findByRole('alert')
+ .contains('This has an ongoing working copy in');
+ cy.get('.Toastify')
+ .findByRole('alert')
  .get('.toast-inner-content a')
  .should('have.attr', 'href')
  .and('include', '/working_copy_of_document');

packages/volto/news/5288.bugfix

@@ -0,0 +1 @@
+Fixed page changes not being announced to screen reader users. @JeffersonBledsoe

packages/volto/src/components/theme/App/App.jsx

@@ -51,6 +51,7 @@ import clearSVG from '@plone/volto/icons/clear.svg';
 import MultilingualRedirector from '@plone/volto/components/theme/MultilingualRedirector/MultilingualRedirector';
 import WorkingCopyToastsFactory from '@plone/volto/components/manage/WorkingCopyToastsFactory/WorkingCopyToastsFactory';
 import LockingToastsFactory from '@plone/volto/components/manage/LockingToastsFactory/LockingToastsFactory';
+import RouteAnnouncer from '@plone/volto/components/theme/RouteAnnouncer/RouteAnnouncer';
 
 /**
  * @export
@@ -191,6 +192,7 @@ export class App extends Component {
  </main>
  </Segment>
  </MultilingualRedirector>
+ <RouteAnnouncer />
  <Footer />
  <LockingToastsFactory
  content={this.props.content}

packages/volto/src/components/theme/App/App.test.jsx

@@ -1,9 +1,9 @@
+import config from '@plone/volto/registry';
 import React from 'react';
-import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
 
 import { __test__ as App } from './App';
 
@@ -64,5 +64,6 @@ describe('App', () => {
  );
  const json = component.toJSON();
  expect(json).toMatchSnapshot();
+ component.unmount();
  });
 });

packages/volto/src/components/theme/App/__snapshots__/App.test.jsx.snap

@@ -35,6 +35,24 @@ Array [
  <div
  id="segment"
  />,
+ <p
+ id="route-announcer"
+ role="alert"
+ style={
+ Object {
+ "border": 0,
+ "clip": "rect(1px 1px 1px 1px)",
+ "height": "1px",
+ "margin": "-1px",
+ "overflow": "hidden",
+ "padding": 0,
+ "position": "absolute",
+ "whiteSpace": "nowrap",
+ "width": "1px",
+ "wordWrap": "normal",
+ }
+ }
+ />,
  <div
  id="footer"
  />,

packages/volto/src/components/theme/RouteAnnouncer/RouteAnnouncer.jsx

@@ -0,0 +1,65 @@
+import { useEffect, useState } from 'react';
+
+function RouteAnnouncer() {
+ const [pageTitle, setPageTitle] = useState('');
+
+ function updatePage(title) {
+ setPageTitle(title);
+ document.activeElement.blur();
+ }
+
+ useEffect(() => {
+ function handlePop(event) {
+ const pageTitle = event.target.document.title;
+ updatePage(pageTitle);
+ }
+
+ const observer = new MutationObserver((mutationList) => {
+ for (const mutation of mutationList) {
+ if (mutation.type === 'childList') {
+ for (const node of mutation.addedNodes) {
+ if (node.nodeType === Node.TEXT_NODE && node.textContent) {
+ updatePage(node.textContent);
+ }
+ }
+ }
+ }
+ });
+ observer.observe(document.querySelector('title'), {
+ characterData: true,
+ attributes: true,
+ childList: true,
+ subtree: true,
+ });
+ window.addEventListener('popstate', handlePop);
+
+ return () => {
+ observer.disconnect();
+ window.removeEventListener('popstate', handlePop);
+ };
+ }, []);
+
+ return (
+ <p
+ id="route-announcer"
+ role="alert"
+ // Off-screen element with 'best' browser support
+ style={{
+ border: 0,
+ clip: 'rect(1px 1px 1px 1px)', // IE-style CSS for compatibility
+ height: '1px',
+ margin: '-1px',
+ overflow: 'hidden',
+ padding: 0,
+ position: 'absolute',
+ width: '1px',
+ whiteSpace: 'nowrap',
+ wordWrap: 'normal',
+ }}
+ >
+ {pageTitle}
+ </p>
+ );
+}
+
+export default RouteAnnouncer;