refactor(v2): various markup improvements (#3763)

facebook · Nov 16, 2020 · 30d7408 · 30d7408
1 parent c69ea51
commit 30d7408
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 41 deletions.
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx
@@ -31,7 +31,7 @@ function BlogPostPage(props: Props): JSX.Element {
             <div className="col col--2">
               <BlogSidebar sidebar={sidebar} />
             </div>
-            <div className="col col--8">
+            <main className="col col--8">
               <BlogPostItem
                 frontMatter={frontMatter}
                 metadata={metadata}
@@ -64,7 +64,7 @@ function BlogPostPage(props: Props): JSX.Element {
                   <BlogPostPaginator nextItem={nextItem} prevItem={prevItem} />
                 </div>
               )}
-            </div>
+            </main>
             {!hideTableOfContents && BlogPostContents.rightToc && (
               <div className="col col--2">
                 <TOC headings={BlogPostContents.rightToc} />

diff --git a/packages/docusaurus-theme-classic/src/theme/NotFound.tsx b/packages/docusaurus-theme-classic/src/theme/NotFound.tsx
@@ -11,7 +11,7 @@ import Layout from '@theme/Layout';
 function NotFound(): JSX.Element {
   return (
     <Layout title="Page Not Found">
-      <div className="container margin-vert--xl">
+      <main className="container margin-vert--xl">
         <div className="row">
           <div className="col col--6 col--offset-3">
             <h1 className="hero__title">Page Not Found</h1>
@@ -22,7 +22,7 @@ function NotFound(): JSX.Element {
             </p>
           </div>
         </div>
-      </div>
+      </main>
     </Layout>
   );
 }

diff --git a/packages/docusaurus/src/client/baseUrlSuggestionWarning/BaseUrlSuggestionWarning.tsx b/packages/docusaurus/src/client/baseUrlSuggestionWarning/BaseUrlSuggestionWarning.tsx
@@ -55,36 +55,34 @@ document.addEventListener('DOMContentLoaded', function () {
             padding: 20,
             fontSize: 20,
           }}>
-          <span>
-            <p
-              style={{
-                fontWeight: 'bold',
-                fontSize: 30,
-              }}>
-              Your Docusaurus site did not load properly.
-            </p>
-            <p>
-              A very common reason is a wrong site{' '}
-              <a
-                href="https://v2.docusaurus.io/docs/docusaurus.config.js/#baseurl"
-                style={{fontWeight: 'bold'}}>
-                baseUrl configuration
-              </a>
-              .
-            </p>
-            <p>
-              Current configured baseUrl ={' '}
-              <span style={{fontWeight: 'bold', color: 'red'}}>{baseUrl}</span>{' '}
-              {baseUrl === '/' ? ' (default value)' : ''}
-            </p>
-            <p>
-              We suggest trying baseUrl ={' '}
-              <span
-                style={{fontWeight: 'bold', color: 'green'}}
-                id={BaseUrlSuggestionContainerId}
-              />{' '}
-            </p>
-          </span>
+          <p
+            style={{
+              fontWeight: 'bold',
+              fontSize: 30,
+            }}>
+            Your Docusaurus site did not load properly.
+          </p>
+          <p>
+            A very common reason is a wrong site{' '}
+            <a
+              href="https://v2.docusaurus.io/docs/docusaurus.config.js/#baseurl"
+              style={{fontWeight: 'bold'}}>
+              baseUrl configuration
+            </a>
+            .
+          </p>
+          <p>
+            Current configured baseUrl ={' '}
+            <span style={{fontWeight: 'bold', color: 'red'}}>{baseUrl}</span>{' '}
+            {baseUrl === '/' ? ' (default value)' : ''}
+          </p>
+          <p>
+            We suggest trying baseUrl ={' '}
+            <span
+              style={{fontWeight: 'bold', color: 'green'}}
+              id={BaseUrlSuggestionContainerId}
+            />{' '}
+          </p>
         </div>
       </>
     );

diff --git a/website/docs/markdown-features.mdx b/website/docs/markdown-features.mdx
@@ -1000,11 +1000,14 @@ You can use images in Markdown, or by requiring them and using a JSX image tag:
 ```mdx
 # My Markdown page
 
-<img src={require('./assets/docusaurus-asset-example-banner.png').default} />
+<img
+  src={require('./assets/docusaurus-asset-example-banner.png').default}
+  alt="Example banner"
+/>
 
 or
 
-![](./assets/docusaurus-asset-example-banner.png)
+![Example banner](./assets/docusaurus-asset-example-banner.png)
 ```
 
 The ES imports syntax also works:
@@ -1014,12 +1017,12 @@ The ES imports syntax also works:
 
 import myImageUrl from './assets/docusaurus-asset-example-banner.png';
 
-<img src={myImageUrl)}/>
+<img src={myImageUrl)} alt="My image alternative text" />
 ```
 
 This results in displaying the image:
 
-![](./assets/docusaurus-asset-example-banner.png)
+![My image alternative text](./assets/docusaurus-asset-example-banner.png)
 
 :::note
 

diff --git a/website/src/components/TeamProfileCard/index.js b/website/src/components/TeamProfileCard/index.js
@@ -22,6 +22,7 @@ export default function TeamProfileCard({
             <img
               className="avatar__photo avatar__photo--xl"
               src={githubUrl + '.png'}
+              alt={`${name}'s avatar`}
             />
             <div className="avatar__intro">
               <h3 className="avatar__name">{name}</h3>

diff --git a/website/src/theme/NotFound.tsx b/website/src/theme/NotFound.tsx
@@ -11,11 +11,11 @@ import Feedback from '../pages/feedback';
 
 function NotFound({location}: {location: {pathname: string}}): JSX.Element {
   if (/^\/\bfeedback\b/.test(location.pathname)) {
-    return <Feedback />
+    return <Feedback />;
   } else {
     return (
       <Layout title="Page Not Found">
-        <div className="container margin-vert--xl" data-canny>
+        <main className="container margin-vert--xl" data-canny>
           <div className="row">
             <div className="col col--6 col--offset-3">
               <h1 className="hero__title">Page Not Found</h1>
@@ -26,7 +26,7 @@ function NotFound({location}: {location: {pathname: string}}): JSX.Element {
               </p>
             </div>
           </div>
-        </div>
+        </main>
       </Layout>
     );
   }