Merge branch 'master' into a11y

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,9 +1,13 @@
+
+
+<!--
+
 Thank you for the PR! Contributors like you keep React awesome!
 
 Please see the Contribution Guide for guidelines:
 
 https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md
 
-If your PR references an existing issue, please add the issue number below:
+If your PR references an existing issue, please add the issue number below
 
-#<Issue>
+-->

content/docs/accessibility.md

@@ -75,7 +75,7 @@ function ListItem({ item }) {
   return ( 
     <>
       <dt>{item.term}</dt>
-      <dd>{item.description}</dd>>
+      <dd>{item.description}</dd>
     </>
   );    
 }
@@ -133,7 +133,7 @@ Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarca
 
 Read more about the use of these elements to enhance accessibility here:
 
-- [Deque University - HTML 5 and ARIA Landmarks](https://dequeuniversity.com/assets/html/jquery-summit/html5/slides/landmarks.html)
+- [Accessible Landmarks](http://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
 ### Programmatically managing focus
 

content/docs/context.md

@@ -15,6 +15,10 @@ With React, it's easy to track the flow of data through your React components. W
 In some cases, you want to pass data through the component tree without having to pass the props down manually at every level.
 You can do this directly in React with the powerful "context" API.
 
+> Note:
+>
+> A [new, safe version of context](https://github.com/reactjs/rfcs/blob/master/text/0002-new-version-of-context.md) is under development for the upcoming 16.3 release.
+
 
 ## Why Not To Use Context
 

content/docs/faq-state.md

@@ -101,6 +101,6 @@ This [GitHub comment](https://github.com/facebook/react/issues/11527#issuecommen
 
 ### Should I use a state management library like Redux or MobX?
 
-[Maybe.](http://redux.js.org/docs/faq/General.html#general-when-to-use)
+[Maybe.](https://redux.js.org/faq/general#when-should-i-use-redux)
 
 It's a good idea to get to know React first, before adding in additional libraries. You can build quite complex applications using only React.

content/home/examples/a-component-using-external-plugins.js

@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Type some *markdown* here!' };
+    this.state = { value: 'Hello, **world**!' };
   }
 
   handleChange(e) {
@@ -18,7 +18,11 @@ class MarkdownEditor extends React.Component {
     return (
       <div className="MarkdownEditor">
         <h3>Input</h3>
+        <label htmlFor="markdown-content">
+          Enter some markdown
+        </label>
         <textarea
+          id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />

content/home/examples/an-application.js

@@ -12,9 +12,13 @@ class TodoApp extends React.Component {
         <h3>TODO</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
+          <label htmlFor="new-todo">
+            What needs to be done?
+          </label>
           <input
             aria-label="Add a new to-do item"
             placeholder="Add a to-do..."
+            id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />

src/components/CodeEditor/CodeEditor.js

@@ -179,7 +179,7 @@ class CodeEditor extends Component {
                   },
                 }}
                 className="gatsby-highlight">
-                <LiveEditor onChange={this._onChange} />
+                <LiveEditor ignoreTabKey={true} onChange={this._onChange} />
               </div>
             </div>
             {error && (
@@ -257,9 +257,13 @@ class CodeEditor extends Component {
                       padding: '5px 10px',
                     },
 
+                    '& label': {
+                      display: 'block',
+                      marginTop: 10,
+                    },
+
                     '& textarea': {
                       width: '100%',
-                      marginTop: 10,
                       height: 60,
                       padding: 5,
                     },