PLATUI-3352: revert a change to accessible autocomplete (#437)

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased]
 
+## [6.53.0] - 2025-01-21
+
+### Changed
+
+- The patched behaviour of the accessible autocomplete
+  - after discussion with the Digital Inclusion and Accessibility Standards (DIAS) team we've reverted the fix to
+    maintain aria-describedby links to error and hints on autocompletes after interaction.
+
 ## [6.52.0] - 2025-01-13
 
 ### Changed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hmrc-frontend",
-  "version": "6.52.0",
+  "version": "6.53.0",
   "description": "Design patterns for HMRC frontends",
   "scripts": {
     "start": "gulp dev",

src/components/accessible-autocomplete/accessible-autocomplete.browser.test.js

@@ -83,9 +83,11 @@ describe('Patched accessible autocomplete', () => {
   });
 
   // This wasn't something covered by the original polyfill we based our
-  // patches on, so we've checked this should be the behaviour with
-  // HMRC's Digital Inclusion and Accessibility Standards team (DIAS).
-  it('should still announce the hints and error message linked to the underlying select after interaction with field', async () => {
+  // patches on, if we implement a fix naively then it causes the screen
+  // reader announcements to become too noisy, so after discussion with
+  // the digital inclusion and accessibility standards (DIAS) team we've
+  // chosen not to fix this at the moment.
+  it.failing('should still announce the hints and error message linked to the underlying select after interaction with field', async () => {
     await render(page, withGovukSelect({
       id: 'location',
       name: 'location',

src/components/accessible-autocomplete/accessible-autocomplete.js

@@ -67,24 +67,14 @@ AccessibleAutoComplete.prototype.init = function init() {
         'aria-describedby',
         `${selectElementAriaDescribedBy} ${autocompleteElementAriaDescribedBy}`,
       );
-
-      if (window.MutationObserver != null) {
-        // when the input is empty, the autocomplete adds a link to a hint
-        // that explains how to interact with the input via aria-describedby
-        // and when it's not empty it removes it. These changes cause the
-        // removal of the links to the error and hint, so we need to add
-        // those links back, as well as maintain the link to the hint if it
-        // was present because the input is empty.
-        new MutationObserver(() => {
-          const currentAriaDescribedBy = autocompleteElement.getAttribute('aria-describedby') || '';
-          if (!currentAriaDescribedBy?.includes(selectElementAriaDescribedBy)) {
-            autocompleteElement.setAttribute('aria-describedby', `${selectElementAriaDescribedBy} ${currentAriaDescribedBy}`);
-          }
-        }).observe(autocompleteElement, {
-          attributes: true,
-          attributeFilter: ['aria-describedby'],
-        });
-      }
+      // IMPORTANT ACCESSIBILITY NOTE:
+      // on interaction, the accessible autocomplete will update the
+      // aria-describedby attribute, which will cause the links to hint
+      // and error to be removed. After talking with DIAS we've opted
+      // not to re-add the links at the moment, because when we do they
+      // are re-announced to users too much (after they select an option)
+      // we may investigate ways to add the links back after a delay to
+      // maintain them without reducing usability in the future.
 
       // and in case page is still using adam's patch, this should stop
       // the select elements aria-describedby from being added to the