Fix page changes not being announced by assistive technology when nav…

…igating using the client-side router (#5288)

Co-authored-by: ichim-david <[email protected]>

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,64 @@
+import { useEffect, useState } from 'react';
+
+function RouteAnnouncer() {
+  const [pageTitle, setPageTitle] = useState('');
+
+  useEffect(() => {
+    function updatePage(title) {
+      setPageTitle(title);
+      document.activeElement.blur();
+    }
+    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;