A11y: force all code examples to wrap if needed (#39309)

components/release-notes/PatchNotes.module.scss

@@ -1,8 +1,5 @@
 .sectionHeading {
   scroll-margin-top: 70px !important;
-  pre code {
-    white-space: pre-wrap;
-  }
 }
 
 .aside {

components/ui/MarkdownContent/stylesheets/code.scss

@@ -5,13 +5,8 @@
     border: 1px var(--color-border-default) solid;
   }
 
-  pre code {
-    white-space: pre-wrap;
-  }
-
   [class~="height-constrained-code-block"] pre {
     max-height: 32rem;
-    overflow-y: auto;
   }
 
   [class~="code-example"] {

src/rest/components/RestCodeSamples.module.scss

@@ -1,7 +1,6 @@
 @import "@primer/css/support/index.scss";
 
 .codeBlock {
-  overflow-y: auto;
   margin-bottom: 1rem;
   line-height: 1.45;
   background-color: var(--color-canvas-subtle);
@@ -11,7 +10,6 @@
     background-color: transparent;
     padding: 8px 8px 16px;
     max-width: 90vw;
-    white-space: pre-wrap;
 
     @include breakpoint(lg) {
       max-width: 40vw;

src/webhooks/components/WebhookPayloadExample.module.scss

@@ -1,7 +1,6 @@
 @import "@primer/css/support/index.scss";
 
 .payloadExample {
-  overflow-y: auto;
   margin-bottom: 1rem;
   line-height: 1.45;
   background-color: var(--color-canvas-subtle);
@@ -11,6 +10,5 @@
   code {
     background-color: transparent;
     padding: 8px 8px 16px;
-    white-space: pre-wrap;
   }
 }

stylesheets/markdown-overrides.scss

@@ -22,3 +22,18 @@
     margin-top: 0 !important;
   }
 }
+
+// Horizontal scroll gets flagged as an accessibility violation.
+// Updates all code examples to only allow vertical scroll, and
+// break aggressively.
+.markdown-body {
+  pre {
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  pre code {
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+  }
+}