From 96118839a997f202328881266fb5347a46102319 Mon Sep 17 00:00:00 2001
From: Robert Sese <robert.sese@gmail.com>
Date: Tue, 25 Jan 2022 11:26:34 -0600
Subject: [PATCH 1/2] Make scrollable code blocks focusable (#24607)

---
 components/article/ArticlePage.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/components/article/ArticlePage.tsx b/components/article/ArticlePage.tsx
index 483bb44f5b..a058884b43 100644
--- a/components/article/ArticlePage.tsx
+++ b/components/article/ArticlePage.tsx
@@ -111,6 +111,23 @@ export const ArticlePage = () => {
     }
   }, [])
 
+  // Scrollable code blocks in our REST API docs and elsewhere aren't accessible
+  // via keyboard navigation without setting tabindex="0".  But we don't want to set
+  // this attribute on every `<pre>` code block, only the ones where there are scroll
+  // bars because the content isn't all visible.
+  useEffect(() => {
+    const codeBlocks = document.querySelectorAll<HTMLPreElement>('pre')
+
+    codeBlocks.forEach((codeBlock) => {
+      if (
+        codeBlock.scrollWidth > codeBlock.clientWidth ||
+        codeBlock.scrollHeight > codeBlock.clientHeight
+      ) {
+        codeBlock.setAttribute('tabindex', '0')
+      }
+    })
+  }, [])
+
   return (
     <DefaultLayout>
       {/* Doesn't matter *where* this is included because it will

From 8374263842e09e51c62efaef54be69685306c73d Mon Sep 17 00:00:00 2001
From: Grace Park <gracepark@github.com>
Date: Tue, 25 Jan 2022 09:32:34 -0800
Subject: [PATCH 2/2] a11y: Remove redundant banner (#24605)

* remove redundant banner

* adding flex-1
---
 components/DefaultLayout.tsx | 2 +-
 components/GenericError.tsx  | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/components/DefaultLayout.tsx b/components/DefaultLayout.tsx
index bbb1bbb350..f975ae4ca2 100644
--- a/components/DefaultLayout.tsx
+++ b/components/DefaultLayout.tsx
@@ -85,7 +85,7 @@ export const DefaultLayout = (props: Props) => {
         Skip to main content
       </a>
       <SidebarNav />
-      <div className="flex-column">
+      <div className="flex-column flex-1">
         <Header />
         <main id="main-content">
           <DeprecationBanner />
diff --git a/components/GenericError.tsx b/components/GenericError.tsx
index aa877d35f4..88cd4ee203 100644
--- a/components/GenericError.tsx
+++ b/components/GenericError.tsx
@@ -51,12 +51,7 @@ export const SimpleHeader = () => {
   return (
     <div className="border-bottom color-border-muted no-print">
       <header className="container-xl p-responsive py-3 position-relative d-flex width-full">
-        <div
-          className="d-flex flex-items-center"
-          style={{ zIndex: 3 }}
-          id="github-logo-mobile"
-          role="banner"
-        >
+        <div className="d-flex flex-items-center" style={{ zIndex: 3 }} id="github-logo-mobile">
           <Link href={`/${router.locale}`}>
             {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
             <a aria-hidden="true" tabIndex={-1}>