fix(v2): various improvements for accessibility (#2480)

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/index.js

@@ -137,7 +137,7 @@ export default ({
               onClick={handleCopyCode}>
               {showCopied ? 'Copied' : 'Copy'}
             </button>
-            <pre
+            <div
               tabIndex="0"
               className={classnames(className, styles.codeBlock, {
                 [styles.codeBlockWithTitle]: codeBlockTitle,
@@ -163,7 +163,7 @@ export default ({
                   );
                 })}
               </div>
-            </pre>
+            </div>
           </div>
         </>
       )}

packages/docusaurus-theme-live-codeblock/src/theme/CodeBlock/styles.module.css

@@ -20,9 +20,6 @@
 
 .codeBlock {
   overflow: auto;
-  display: block;
-  padding: 0;
-  margin: 0;
 }
 
 .codeBlockWithTitle {
@@ -59,9 +56,10 @@
 }
 
 .codeBlockLines {
-  background-color: transparent;
+  font-family: var(--ifm-font-family-monospace);
-  border-radius: 0;
+  font-size: inherit;
-  margin-bottom: 0;
+  line-height: var(--ifm-pre-line-height);
+  white-space: pre;
   float: left;
   min-width: 100%;
   padding: var(--ifm-pre-padding);

website/src/components/BrowserWindow/index.js

@@ -18,9 +18,7 @@ function BrowserWindow({children, minHeight, url}) {
           <span className={styles.dot} style={{background: '#fbbe3c'}} />
           <span className={styles.dot} style={{background: '#58cb42'}} />
         </div>
-        <div className={styles.browserWindowAddressBar}>
+        <div className={styles.browserWindowAddressBar}>{url}</div>
-          <input disabled type="text" value={url} readOnly />
-        </div>
         <div className={styles.browserWindowMenuIcon}>
           <div>
             <span className={styles.bar} />

website/src/components/BrowserWindow/styles.module.css

@@ -35,8 +35,13 @@
 
 .browserWindowAddressBar {
   flex: 1 0;
-  margin-left: 0.5rem;
+  margin: 0 1rem 0 0.5rem;
-  margin-right: 1rem;
+  border-radius: 12.5px;
+  background-color: #fff;
+  color: #666;
+  padding: 5px 15px;
+  font: 400 13px Arial;
+  user-select: none;
 }
 
 .dot {
@@ -49,17 +54,6 @@
   display: inline-block;
 }
 
-input[type='text'] {
-  width: 100%;
-  border-radius: 12.5px;
-  border: none;
-  background-color: white;
-  margin-top: -8px;
-  height: 25px;
-  color: #666;
-  padding: 5px 15px;
-}
-
 .browserWindowMenuIcon {
   margin-left: auto;
 }

website/src/pages/index.js

@@ -68,6 +68,7 @@ function Home() {
       permalink="/"
       title={tagline}
       description={customFields.description}>
+      <main>
         <div className={styles.hero}>
           <div className={styles.heroInner}>
             <h1 className={styles.heroProjectTagline}>
@@ -76,9 +77,11 @@ function Home() {
                 className={styles.heroLogo}
                 src={useBaseUrl('img/docusaurus_keytar.svg')}
               />
-            Build <span className={styles.heroProjectKeywords}>optimized</span>{' '}
+              Build{' '}
-            websites <span className={styles.heroProjectKeywords}>quickly</span>
+              <span className={styles.heroProjectKeywords}>optimized</span>{' '}
-            , focus on your{' '}
+              websites{' '}
+              <span className={styles.heroProjectKeywords}>quickly</span>, focus
+              on your{' '}
               <span className={styles.heroProjectKeywords}>content</span>
             </h1>
             <div className={styles.indexCtas}>
@@ -99,7 +102,8 @@ function Home() {
             </div>
           </div>
         </div>
-      <div className={classnames(styles.announcement, styles.announcementDark)}>
+        <div
+          className={classnames(styles.announcement, styles.announcementDark)}>
           <div className={styles.announcementInner}>
             Coming from v1? Check out our{' '}
             <Link to={useBaseUrl('/docs/migrating-from-v1-to-v2')}>
@@ -117,12 +121,15 @@ function Home() {
                   alt="Powered by MDX"
                   src={useBaseUrl('img/undraw_typewriter.svg')}
                 />
-              <h3 className="padding-top--md">Powered by Markdown</h3>
+                <h2 className={classnames(styles.featureHeading)}>
+                  Powered by Markdown
+                </h2>
                 <p className="padding-horiz--md">
                   Save time and focus on your project's documentation. Simply
-                write docs and blog posts with Markdown/MDX and Docusaurus will
+                  write docs and blog posts with Markdown/MDX and Docusaurus
-                publish a set of static HTML files ready to serve. You can even
+                  will publish a set of static HTML files ready to serve. You
-                embed JSX components into your Markdown thanks to MDX.
+                  can even embed JSX components into your Markdown thanks to
+                  MDX.
                 </p>
               </div>
               <div className="col">
@@ -131,7 +138,10 @@ function Home() {
                   className={styles.featureImage}
                   src={useBaseUrl('img/undraw_react.svg')}
                 />
-              <h3 className="padding-top--md">Built Using React</h3>
+                <h2 className={classnames(styles.featureHeading)}>
+                  Built Using React
+                </h2>
+                quotes
                 <p className="padding-horiz--md">
                   Extend or customize your project's layout by reusing React.
                   Docusaurus can be extended while reusing the same header and
@@ -144,10 +154,12 @@ function Home() {
                   className={styles.featureImage}
                   src={useBaseUrl('img/undraw_around_the_world.svg')}
                 />
-              <h3 className="padding-top--md">Ready for Translations</h3>
+                <h2 className={classnames(styles.featureHeading)}>
+                  Ready for Translations
+                </h2>
                 <p className="padding-horiz--md">
-                Localization comes pre-configured. Use Crowdin to translate your
+                  Localization comes pre-configured. Use Crowdin to translate
-                docs into over 70 languages.
+                  your docs into over 70 languages.
                 </p>
               </div>
             </div>
@@ -160,7 +172,9 @@ function Home() {
                   className={styles.featureImage}
                   src={useBaseUrl('img/undraw_version_control.svg')}
                 />
-              <h3 className="padding-top--md">Document Versioning</h3>
+                <h2 className={classnames(styles.featureHeading)}>
+                  Document Versioning
+                </h2>
                 <p className="padding-horiz--md">
                   Support users on all versions of your project. Document
                   versioning helps you keep documentation in sync with project
@@ -173,21 +187,19 @@ function Home() {
                   className={styles.featureImage}
                   src={useBaseUrl('img/undraw_algolia.svg')}
                 />
-              <h3 className="padding-top--md">Content Search</h3>
+                <h2 className={classnames(styles.featureHeading)}>
+                  Content Search
+                </h2>
                 <p className="padding-horiz--md">
                   Make it easy for your community to find what they need in your
-                documentation. We proudly support Algolia documentation search.
+                  documentation. We proudly support Algolia documentation
+                  search.
                 </p>
               </div>
             </div>
           </div>
         </div>
-      <div
+        <div className={classnames(styles.section, styles.sectionAlt)}>
-        className={classnames(
-          styles.section,
-          styles.sectionAlt,
-          styles.quotes,
-        )}>
           <div className="container">
             <div className="row">
               {QUOTES.map(quote => (
@@ -212,6 +224,7 @@ function Home() {
             </div>
           </div>
         </div>
+      </main>
     </Layout>
   );
 }

website/src/pages/styles.module.css

@@ -23,6 +23,11 @@
   margin: 0 auto;
 }
 
+.featureHeading {
+  font-size: var(--ifm-h3-font-size);
+  padding-top: 1rem;
+}
+
 .announcement {
   font-weight: bold;
   font-size: 24px;