fix: improve screen reader behaviour (fixes #131, fixes #200) (#235)

* fix: add screen reader feedback for deselect all button (fix #131)
* fix: announce notifications (resolves #200)

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@platform-coop-toolkit/pinecone": "^1.0.0-alpha.11",
+    "@wordpress/a11y": "^2.7.0",
     "cookies.js": "^2.1.15"
   },
   "devDependencies": {

resources/assets/scripts/routes/archive.js

@@ -4,6 +4,7 @@ import addNotification from '../util/addNotification';
 import Cookies from 'cookies.js';
 import Pinecone from '@platform-coop-toolkit/pinecone';
 import { __, sprintf } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
 
 export default {
   init() {
@@ -20,6 +21,11 @@ export default {
     if ( 0 < deselectButtons.length ) {
       Array.prototype.forEach.call( deselectButtons, btn => {
         new Pinecone.DeselectAll( btn );
+        const filterGroup = btn.parentNode.parentNode;
+        const filterGroupLabel = filterGroup.firstElementChild.textContent;
+        btn.onclick = () => {
+          speak(sprintf(__('All %s have been deselected', 'coop-library'), filterGroupLabel));
+        }
       } );
     }
 

resources/assets/scripts/util/addNotification.js

@@ -1,4 +1,5 @@
 import { __ } from '@wordpress/i18n';
+import { speak } from '@wordpress/a11y';
 
 /**
  * Add a notification.
@@ -26,16 +27,20 @@ export default (title, content, type) => {
   }
 
   const alert = `
-    <div class="notification notification--${type}" role="alert">
+    <div class="notification notification--${type}">
       <button class="button button--borderless"><svg class="icon icon--close" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path id="close" d="m11.41 10 4.3-4.29a1 1 0 1 0 -1.42-1.42l-4.29 4.3-4.29-4.3a1 1 0 0 0 -1.42 1.42l4.3 4.29-4.3 4.29a1 1 0 0 0 0 1.42 1 1 0 0 0 1.42 0l4.29-4.3 4.29 4.3a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42z" fill="currentColor"/></svg>
       <span class="screen-reader-text">${__('Close notification', 'coop-library')}</span></button>
       <p class="notification__title">${icon} ${title}</p>
       <div class="notification__content">${content}</div>
     </div>
   `;
 
+  speak(content, 'assertive');
+
   if (pageHeader.nextElementSibling.classList.contains('notification')) {
     pageHeader.nextElementSibling.parentNode.removeChild(pageHeader.nextElementSibling);
   }
   pageHeader.insertAdjacentHTML('afterend', alert);
+
+
 };