Add NVDA bug fix

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 (not tab), 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 like <br> tags or two block-level tags as well as these elements having CSS applied using:
display: block or 
display: table;

In this case it was the span(s) within the button being styled using "display: block" that revealed an NVDA issue whereby the elements are being announced separately.
  
This fix forces a visual break to maintain the new Design (and the new Design while focused) but bypasses NVDA's line break interpreter, thus causing the Accordion Section Headings and the inner Content to be read to the user as a single sentence or block

Consider NVDA output before:
"clickable  heading    level 2  button  collapsed    [Heading copy],Show
heading    level 2  button  collapsed    this section"

Consider NVDA output after:
"clickable  heading    level 2  button  collapsed    [Heading copy] , Showthis section"

(Above is a textual representation of the audio heard by NVDA user)[1]

Notes taken from visit the GDS Accessibility Clinic:
"Notably, Anika didn’t take issue with when NVDA split the button into separate blocks. It’ll be good regardless to get some detailed rationale as to why this could be acceptable and how theoretically impactful the lack of pausing is [with user testing]

The rationale was NVDA has been seen to treat headings / buttons in a similar fashion elsewhere on the web. There would be a degree of expectation that the user might be used to this."

[1] Additional details and testing videos of this representation before the fix and after can be found here (investigation and discovery by @owenatgov)
(alphagov/govuk-design-system#1706 (comment))

src/govuk/components/accordion/_index.scss

@@ -250,11 +250,45 @@
       }
     }
 
+    // NVDA fix
+    //
+    // 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)
+    .govuk-accordion__section-toggle,
+    .govuk-accordion__section-heading-focus-wrapper,
+    .govuk-accordion__section-summary {
+      display: inline;
+
+      &:before {
+        content: "";
+        display: block;
+      }
+    }
+
     // Add toggle link with Chevron icon on left.
     .govuk-accordion__section-toggle {
       @include govuk-font($size: 19, $line-height: 1);
 
       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
+      &:before {
+        @include govuk-responsive-margin(1, "top");
+      }
     }
 
     // Hide body of expanded sections