Remove NVDA browse mode adjustment

Co-authored-by: Chris Yoong [email protected]

Remove the CSS adjustment that made the NVDA browse mode perceive the button content as one element. Whilst this was potentially an improvement to how NVDA users perceived the button, we found in testing that it caused long announcements to be cut off. More details of the initial fix here: 6eb5bf7

The reason for the announcement being cut off appears to be related to the character limit for line length that NVDA users can set for the browse mode. The issue was that whilst the browse mode default behaviour is to read out the subsequent line(s) when user presses down again (so that eventually the user will hear all of the content), here those subsequent lines were not being read out - the reason for this could be related to the amount of content inside the button and NVDA perceiving that there was more content (namely the button element itself) to announce.

@chris-gds has done a more thorough write up of the issue of the NVDA announcements being cut off as it was observed in: #2373 (comment)

src/govuk/components/accordion/_index.scss

@@ -276,37 +276,11 @@
       }
     }
 
-    // 1. A fix to improve NVDA announcements.
-    //
-    // NVDA treats any form of line break as a different announcement landmark and will therefore announce it separately.
-    // As you move through NVDA using arrow keys, this announces each element in turn (rather than a whole block) which could cause confusion for users
-    // This line break can come from both the semantics via br tags or two block-level tags, or via CSS using display: block or display: table
-    // In this case it was the span(s) within the button being styled using display: block.
-    // This fix forces a visual break but bypasses NVDA's line break interpreter, thus causing the accordion title and the inner Content to be read as a single sentence
-    //
-    // Consider NVDA output before:
-    // clickable  heading    level 2  button  collapsed    [Heading copy],Show
-    // heading    level 2  button  collapsed    this section
-    //
-    // After:
-    // clickable  heading    level 2  button  collapsed    [Heading copy] , Showthis section
-    //
-    // Additional details and testing videos can be found here:
-    // (https://github.com/alphagov/govuk-design-system/issues/1706#issuecomment-862451506)
-    //
-    // 2. Limit the width of the focus state.
-    //
-    // This fix also has the unrelated but desirable effect of limiting the width of the focus
-    // state to only span the width of the contained text, rather than the width of the whole
-    // component. This impacts section-toggle, section-heading-focus-wrapper and section-summary.
     .govuk-accordion__section-toggle,
     .govuk-accordion__section-heading-focus-wrapper,
     .govuk-accordion__section-summary {
-      display: inline;
-
-      &:before {
-        content: "";
-        display: block;
+      display: block;
+      margin-top: 13px;
       }
     }
 
@@ -316,13 +290,6 @@
       color: $govuk-link-colour;
     }
 
-    // The NVDA fix means a display:inline element cannot receive box model spacing styling such as margin.
-    // As a result this is applied to the pseudo element that has a display:block property to maintain Design
-    .govuk-accordion__section-summary:before,
-    .govuk-accordion__section-toggle:before {
-      margin-top: 13px;
-    }
-
     // Space between icon and text,
     // Avoid placing on icon due to transform altering placement of margin
     .govuk-accordion__show-all-text,