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,150 +68,163 @@ function Home() {
       permalink="/"
       title={tagline}
       description={customFields.description}>
-      <div className={styles.hero}>
+      <main>
-        <div className={styles.heroInner}>
+        <div className={styles.hero}>
-          <h1 className={styles.heroProjectTagline}>
+          <div className={styles.heroInner}>
-            <img
+            <h1 className={styles.heroProjectTagline}>
-              alt="Docusaurus with Keytar"
+              <img
-              className={styles.heroLogo}
+                alt="Docusaurus with Keytar"
-              src={useBaseUrl('img/docusaurus_keytar.svg')}
+                className={styles.heroLogo}
-            />
+                src={useBaseUrl('img/docusaurus_keytar.svg')}
-            Build <span className={styles.heroProjectKeywords}>optimized</span>{' '}
+              />
-            websites <span className={styles.heroProjectKeywords}>quickly</span>
+              Build{' '}
-            , focus on your{' '}
+              <span className={styles.heroProjectKeywords}>optimized</span>{' '}
-            <span className={styles.heroProjectKeywords}>content</span>
+              websites{' '}
-          </h1>
+              <span className={styles.heroProjectKeywords}>quickly</span>, focus
-          <div className={styles.indexCtas}>
+              on your{' '}
-            <Link
+              <span className={styles.heroProjectKeywords}>content</span>
-              className={styles.indexCtasGetStartedButton}
+            </h1>
-              to={useBaseUrl('docs/introduction')}>
+            <div className={styles.indexCtas}>
-              Get Started
+              <Link
+                className={styles.indexCtasGetStartedButton}
+                to={useBaseUrl('docs/introduction')}>
+                Get Started
+              </Link>
+              <span className={styles.indexCtasGitHubButtonWrapper}>
+                <iframe
+                  className={styles.indexCtasGitHubButton}
+                  src="https://ghbtns.com/github-btn.html?user=facebook&amp;repo=docusaurus&amp;type=star&amp;count=true&amp;size=large"
+                  width={160}
+                  height={30}
+                  title="GitHub Stars"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+        <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')}>
+              v1 to v2 migration guide
             </Link>
-            <span className={styles.indexCtasGitHubButtonWrapper}>
+            .
-              <iframe
-                className={styles.indexCtasGitHubButton}
-                src="https://ghbtns.com/github-btn.html?user=facebook&amp;repo=docusaurus&amp;type=star&amp;count=true&amp;size=large"
-                width={160}
-                height={30}
-                title="GitHub Stars"
-              />
-            </span>
           </div>
         </div>
-      </div>
+        <div className={styles.section}>
-      <div className={classnames(styles.announcement, styles.announcementDark)}>
+          <div className="container text--center margin-bottom--xl">
-        <div className={styles.announcementInner}>
+            <div className="row">
-          Coming from v1? Check out our{' '}
+              <div className="col">
-          <Link to={useBaseUrl('/docs/migrating-from-v1-to-v2')}>
+                <img
-            v1 to v2 migration guide
+                  className={styles.featureImage}
-          </Link>
+                  alt="Powered by MDX"
-          .
+                  src={useBaseUrl('img/undraw_typewriter.svg')}
-        </div>
+                />
-      </div>
+                <h2 className={classnames(styles.featureHeading)}>
-      <div className={styles.section}>
+                  Powered by Markdown
-        <div className="container text--center margin-bottom--xl">
+                </h2>
-          <div className="row">
+                <p className="padding-horiz--md">
-            <div className="col">
+                  Save time and focus on your project's documentation. Simply
-              <img
+                  write docs and blog posts with Markdown/MDX and Docusaurus
-                className={styles.featureImage}
+                  will publish a set of static HTML files ready to serve. You
-                alt="Powered by MDX"
+                  can even embed JSX components into your Markdown thanks to
-                src={useBaseUrl('img/undraw_typewriter.svg')}
+                  MDX.
-              />
-              <h3 className="padding-top--md">Powered by Markdown</h3>
-              <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
-                publish a set of static HTML files ready to serve. You can even
-                embed JSX components into your Markdown thanks to MDX.
-              </p>
-            </div>
-            <div className="col">
-              <img
-                alt="Built Using React"
-                className={styles.featureImage}
-                src={useBaseUrl('img/undraw_react.svg')}
-              />
-              <h3 className="padding-top--md">Built Using React</h3>
-              <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
-                footer.
-              </p>
-            </div>
-            <div className="col">
-              <img
-                alt="Ready for Translations"
-                className={styles.featureImage}
-                src={useBaseUrl('img/undraw_around_the_world.svg')}
-              />
-              <h3 className="padding-top--md">Ready for Translations</h3>
-              <p className="padding-horiz--md">
-                Localization comes pre-configured. Use Crowdin to translate your
-                docs into over 70 languages.
-              </p>
-            </div>
-          </div>
-        </div>
-        <div className="container text--center">
-          <div className="row">
-            <div className="col col--4 col--offset-2">
-              <img
-                alt="Document Versioning"
-                className={styles.featureImage}
-                src={useBaseUrl('img/undraw_version_control.svg')}
-              />
-              <h3 className="padding-top--md">Document Versioning</h3>
-              <p className="padding-horiz--md">
-                Support users on all versions of your project. Document
-                versioning helps you keep documentation in sync with project
-                releases.
-              </p>
-            </div>
-            <div className="col col--4">
-              <img
-                alt="Document Search"
-                className={styles.featureImage}
-                src={useBaseUrl('img/undraw_algolia.svg')}
-              />
-              <h3 className="padding-top--md">Content Search</h3>
-              <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.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        className={classnames(
-          styles.section,
-          styles.sectionAlt,
-          styles.quotes,
-        )}>
-        <div className="container">
-          <div className="row">
-            {QUOTES.map(quote => (
-              <div className="col" key={quote.name}>
-                <div className="avatar avatar--vertical margin-bottom--sm">
-                  <Image
-                    alt={quote.name}
-                    className="avatar__photo avatar__photo--xl"
-                    img={quote.thumbnail}
-                    style={{overflow: 'hidden'}}
-                  />
-                  <div className="avatar__intro padding-top--sm">
-                    <h4 className="avatar__name">{quote.name}</h4>
-                    <small className="avatar__subtitle">{quote.title}</small>
-                  </div>
-                </div>
-                <p className="text--center text--italic padding-horiz--md">
-                  {quote.text}
                 </p>
               </div>
-            ))}
+              <div className="col">
+                <img
+                  alt="Built Using React"
+                  className={styles.featureImage}
+                  src={useBaseUrl('img/undraw_react.svg')}
+                />
+                <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
+                  footer.
+                </p>
+              </div>
+              <div className="col">
+                <img
+                  alt="Ready for Translations"
+                  className={styles.featureImage}
+                  src={useBaseUrl('img/undraw_around_the_world.svg')}
+                />
+                <h2 className={classnames(styles.featureHeading)}>
+                  Ready for Translations
+                </h2>
+                <p className="padding-horiz--md">
+                  Localization comes pre-configured. Use Crowdin to translate
+                  your docs into over 70 languages.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="container text--center">
+            <div className="row">
+              <div className="col col--4 col--offset-2">
+                <img
+                  alt="Document Versioning"
+                  className={styles.featureImage}
+                  src={useBaseUrl('img/undraw_version_control.svg')}
+                />
+                <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
+                  releases.
+                </p>
+              </div>
+              <div className="col col--4">
+                <img
+                  alt="Document Search"
+                  className={styles.featureImage}
+                  src={useBaseUrl('img/undraw_algolia.svg')}
+                />
+                <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.
+                </p>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
+        <div className={classnames(styles.section, styles.sectionAlt)}>
+          <div className="container">
+            <div className="row">
+              {QUOTES.map(quote => (
+                <div className="col" key={quote.name}>
+                  <div className="avatar avatar--vertical margin-bottom--sm">
+                    <Image
+                      alt={quote.name}
+                      className="avatar__photo avatar__photo--xl"
+                      img={quote.thumbnail}
+                      style={{overflow: 'hidden'}}
+                    />
+                    <div className="avatar__intro padding-top--sm">
+                      <h4 className="avatar__name">{quote.name}</h4>
+                      <small className="avatar__subtitle">{quote.title}</small>
+                    </div>
+                  </div>
+                  <p className="text--center text--italic padding-horiz--md">
+                    {quote.text}
+                  </p>
+                </div>
+              ))}
+            </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;