Merge pull request #14653 from github/repo-sync

repo sync

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 />

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}>

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