Merge branch 'master' into lists-and-keys

Author: saranshkataria

Diff for: content/docs/accessibility.md

@@ -248,7 +248,7 @@ This is typically implemented by attaching a `click` event to the `window` objec
 
 ```javascript{12-14,26-30}
 class OuterClickExample extends React.Component {
-constructor(props) {
+  constructor(props) {
     super(props);
 
     this.state = { isOpen: false };
@@ -299,7 +299,7 @@ This may work fine for users with pointer devices, such as a mouse, but operatin
 
 <img src="../images/docs/outerclick-with-keyboard.gif" alt="A toggle button opening a popover list implemented with the click outside pattern and operated with the keyboard showing the popover not being closed on blur and it obscuring other screen elements." />
 
-The same functionality can be achieved by using an appropriate event handlers instead, such as `onBlur` and `onFocus`:
+The same functionality can be achieved by using appropriate event handlers instead, such as `onBlur` and `onFocus`:
 
 ```javascript{19-29,31-34,37-38,40-41}
 class BlurExample extends React.Component {
@@ -421,7 +421,7 @@ There are a number of tools we can use to assist in the creation of accessible w
 
 By far the easiest and also one of the most important checks is to test if your entire website can be reached and used with the keyboard alone. Do this by:
 
-1. Plugging out your mouse.
+1. Disconnecting your mouse.
 1. Using `Tab` and `Shift+Tab` to browse.
 1. Using `Enter` to activate elements.
 1. Where required, using your keyboard arrow keys to interact with some elements, such as menus and dropdowns.

Diff for: content/docs/hooks-faq.md

@@ -656,7 +656,7 @@ Note that in the above example we **need** to keep the function in the dependenc
 
 ### What can I do if my effect dependencies change too often? {#what-can-i-do-if-my-effect-dependencies-change-too-often}
 
-Sometimes, your effect may be using reading state that changes too often. You might be tempted to omit that state from a list of dependencies, but that usually leads to bugs:
+Sometimes, your effect may be using state that changes too often. You might be tempted to omit that state from a list of dependencies, but that usually leads to bugs:
 
 ```js{6,9}
 function Counter() {

Diff for: src/components/TitleAndMetaTags/TitleAndMetaTags.js

@@ -7,6 +7,9 @@
 
 import Helmet from 'react-helmet';
 import React from 'react';
+import {urlRoot} from 'site-constants';
+// $FlowFixMe This is a valid path
+import languages from '../../../content/languages.yml';
 
 const defaultDescription = 'A JavaScript library for building user interfaces';
 
@@ -16,6 +19,32 @@ type Props = {
   canonicalUrl: string,
 };
 
+// only provide alternate links to pages in languages where 95-100% of core content has been translated
+// which is determined by status enum of 2
+const completeLanguages = languages.filter(language => {
+  return language.status == 2;
+});
+
+const alternatePages = canonicalUrl => {
+  return completeLanguages.map(language => (
+    <link
+      key={('alt-', language.code)}
+      rel="alternate"
+      hreflang={language.code}
+      href={canonicalUrl.replace(
+        urlRoot,
+        `https://${
+          language.code === 'en' ? '' : `${language.code}.`
+        }reactjs.org`,
+      )}
+    />
+  ));
+};
+
+const defaultPage = canonicalUrl => {
+  return canonicalUrl.replace(urlRoot, 'https://reactjs.org');
+};
+
 const TitleAndMetaTags = ({title, ogDescription, canonicalUrl}: Props) => {
   return (
     <Helmet title={title}>
@@ -29,6 +58,14 @@ const TitleAndMetaTags = ({title, ogDescription, canonicalUrl}: Props) => {
       />
       <meta property="fb:app_id" content="623268441017527" />
       {canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
+      {canonicalUrl && (
+        <link
+          rel="alternate"
+          href={defaultPage(canonicalUrl)}
+          hreflang="x-default"
+        />
+      )}
+      {canonicalUrl && alternatePages(canonicalUrl)}
     </Helmet>
   );
 };

Diff for: src/pages/languages.js

@@ -140,7 +140,11 @@ const Language = ({code, name, status, translatedName}) => {
         }}>
         {status === 0 && translatedName}
         {status > 0 && (
-          <a href={`https://${prefix}reactjs.org/`} rel="nofollow">
+          <a
+            href={`https://${prefix}reactjs.org/`}
+            rel="nofollow"
+            lang={code}
+            hrefLang={code}>
             {translatedName}
           </a>
         )}