From eac69fd3c6d886f6390b06318b09230f171793b1 Mon Sep 17 00:00:00 2001
From: ThinhNu <thinh.le.sdev@gmail.com>
Date: Wed, 8 May 2019 14:58:03 +0700
Subject: [PATCH 1/2] Update accessibility.md

Translate accessibility to Vietnamese
---
 content/docs/accessibility.md | 503 +++++++++++++++++++---------------
 1 file changed, 280 insertions(+), 223 deletions(-)

diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index e6cacba3b..57e81424d 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -3,31 +3,39 @@ id: accessibility
 title: Accessibility
 permalink: docs/accessibility.html
 ---
+## Tại sao là Accessibility? {#why-accessibility}
 
-## Why Accessibility? {#why-accessibility}
+Web accessibility (cũng được đề cập ở đây
+[**a11y**](https://en.wiktionary.org/wiki/a11y)) là sự thiết kế và tạo dựng website
+sao cho tất cả mọi người đều có thể sử dụng được. Sự hỗ trợ của Accessibility
+cho phép các công nghệ hỗ trợ có thể sử dụng trong các trang web.
 
-Web accessibility (also referred to as [**a11y**](https://en.wiktionary.org/wiki/a11y)) is the design and creation of websites that can be used by everyone. Accessibility support is necessary to allow assistive technology to interpret web pages.
-
-React fully supports building accessible websites, often by using standard HTML techniques.
-
-## Standards and Guidelines {#standards-and-guidelines}
+React hỗ trợ đầy đủ để bạn thực hiện được điều này, bằng
+cách sử dụng các kỹ thuật HTML chuẩn.
 
+## Tiêu chuẩn và Hướng dẫn {#standards-and-guidelines}
 ### WCAG {#wcag}
-
-The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) provides guidelines for creating accessible web sites.
-
-The following WCAG checklists provide an overview:
-
-- [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
-- [WCAG checklist from WebAIM](https://webaim.org/standards/wcag/checklist)
-- [Checklist from The A11Y Project](https://a11yproject.com/checklist.html)
-
+[Hướng dẫn Web Content
+Accessibility](https://www.w3.org/WAI/intro/wcag) cung cấp hướng dẫn để bạn tạo
+được những trang web có khả năng truy cập.
+
+Danh sách WCAG sau đây cho bạn một cái nhìn tổng quan:
+
+- [Danh sách WCAG từ
+Wuhcag](https://www.wuhcag.com/wcag-checklist/)
+- [Danh sách WCAG từ
+WebAIM](https://webaim.org/standards/wcag/checklist)
+- [Danh sách từ dự án
+A11Y](https://a11yproject.com/checklist.html)
 ### WAI-ARIA {#wai-aria}
-
-The [Web Accessibility Initiative - Accessible Rich Internet Applications](https://www.w3.org/WAI/intro/aria) document contains techniques for building fully accessible JavaScript widgets.
-
-Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most DOM properties and attributes in React are camelCased, these attributes should be hyphen-cased (also known as kebab-case, lisp-case, etc) as they are in plain HTML:
-
+[Sáng kiến Web Accessibility - Truy cập trang web giàu ứng dụng](https://www.w3.org/WAI/intro/aria)
+tài liệu có chứa nhiều kỹ thuật để bạn có thể xây dựng các JavaScript widgets
+có thể truy cập.
+
+Chú ý rằng tất cả thuộc tính HTML `aria-*` đều được hỗ trợ đầy
+đủ trong JSX. Trong khi hầu hết DOM properties và thuộc tính trong React là
+camelCased, những thuộc tính đó nên được gạch-nối (hay còn gọi là kebab-case,
+lisp-case, etc) giống như trong HTML thuần.
 ```javascript{3,4}
 <input
   type="text"
@@ -38,21 +46,25 @@ Note that all `aria-*` HTML attributes are fully supported in JSX. Whereas most
   name="name"
 />
 ```
-
-## Semantic HTML {#semantic-html}
-Semantic HTML is the foundation of accessibility in a web application. Using the various HTML elements to reinforce the meaning of information
-in our websites will often give us accessibility for free.
-
-- [MDN HTML elements reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
-
-Sometimes we break HTML semantics when we add `<div>` elements to our JSX to make our React code work, especially when working with lists (`<ol>`, `<ul>` and `<dl>`) and the HTML `<table>`.
-In these cases we should rather use [React Fragments](/docs/fragments.html) to group together multiple elements.
-
-For example,
-
+## Tính ngữ nghĩa của HTML {#semantic-html}
+Tính ngữ nghĩa của HTML là nền tảng của accessibility trong
+một ứng dụng web. Sử dụng một số HTML elements để gia cố thêm về mặt ý nghĩa của
+thông tin
+trong những websites của chúng ta sẽ thường mang lại
+accessibility miễn phí.
+- [Tham khảo về HTML elements từ
+MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+
+Đôi khi chúng ta phá vỡ tính ngữ nghĩa của HTML khi thêm thẻ
+`<div>` vào JSX để giúp nó hoạt động, đặc biệt khi làm việc với
+lists  (`<ol>`, `<ul>` và
+`<dl>`) hay `<table>`.
+Trong những tình huống đó chúng ta nên sử dụng [React
+Fragments](/docs/fragments.html) để nhóm nhiều elements lại với nhau.
+
+Ví dụ,
 ```javascript{1,5,8}
 import React, { Fragment } from 'react';
-
 function ListItem({ item }) {
   return (
     <Fragment>
@@ -61,7 +73,6 @@ function ListItem({ item }) {
     </Fragment>
   );
 }
-
 function Glossary(props) {
   return (
     <dl>
@@ -71,9 +82,11 @@ function Glossary(props) {
     </dl>
   );
 }
+
 ```
 
-You can map a collection of items to an array of fragments as you would any other type of element as well:
+Bạn có thể map một items collection vào một mảng fragments
+array như cách bạn làm với bất kỳ loại element nào khác:
 
 ```javascript{6,9}
 function Glossary(props) {
@@ -91,7 +104,9 @@ function Glossary(props) {
 }
 ```
 
-When you don't need any props on the Fragment tag you can use the [short syntax](/docs/fragments.html#short-syntax), if your tooling supports it:
+Khi bạn không cần bất kỳ props nào trong thẻ Fragment, bạn
+có thể sử dụng [cú pháp rút gọn](/docs/fragments.html#short-syntax), nếu công cụ
+của bạn có hỗ trợ:
 
 ```javascript{3,6}
 function ListItem({ item }) {
@@ -102,85 +117,99 @@ function ListItem({ item }) {
     </>
   );
 }
+
 ```
 
-For more info, see [the Fragments documentation](/docs/fragments.html).
+Tham khảo thêm, truy cập [the Fragments
+documentation](/docs/fragments.html).
 
 ## Accessible Forms {#accessible-forms}
 
 ### Labeling {#labeling}
-Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled accessibly. We need to provide descriptive labels that are also exposed to screen readers.
 
-The following resources show us how to do this:
+Mỗi HTML form control, như `<input>` và
+`<textarea>`, cần được dán nhãn accessibly. Chúng ta cần cung cấp những
+labels có tính mô tả, nó sẽ giúp tiếp cận tốt hơn đến người đọc.
+
+Những nguồn sau đây cho chúng ta thấy cách thực hiện điều
+đó:
 
-- [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
-- [WebAIM shows us how to label elements](https://webaim.org/techniques/forms/controls)
-- [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
+- [W3C hướng dẫn cách label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
+- [WebAIM hướng dẫn cách label elements](https://webaim.org/techniques/forms/controls)
+- [The Paciello Group giải thích accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
 
-Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
+Mặc dù HTML tiêu chuẩn có thể sử dụng được trong React, tuy
+nhiên chú ý rằng thuộc tính `for` phải được viết thành `htmlFor` trong JSX:
 
 ```javascript{1}
+
 <label htmlFor="namedInput">Name:</label>
-<input id="namedInput" type="text" name="name"/>
-```
 
-### Notifying the user of errors {#notifying-the-user-of-errors}
+<input id="namedInput" type="text" name="name"/>
 
-Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:
+```
+### Thông báo lỗi đến người dùng {#notifying-the-user-of-errors}
 
-- [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
-- [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
+User luôn cần được cung cấp thông tin về các tình huống lỗi.
+Link sau đây cho chúng ta thấy cách đưa text error đến người dùng:
 
+- [W3C giải thích user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
+- [WebAIM phân tích form validation](https://webaim.org/techniques/formvalidation/)
 ## Focus Control {#focus-control}
-
-Ensure that your web application can be fully operated with the keyboard only:
-
-- [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
-
+Hãy chắc chắn rằng ứng dụng web của bạn có thể hoạt động tốt
+khi chỉ cần sử dụng bàn phím:
+- [WebAIM nói về keyboard
+accessibility](https://webaim.org/techniques/keyboard/)
 ### Keyboard focus and focus outline {#keyboard-focus-and-focus-outline}
-
-Keyboard focus refers to the current element in the DOM that is selected to accept input from the keyboard. We see it everywhere as a focus outline similar to that shown in the following image:
+Keyboard focus là việc hiển thị element hiện tại trong DOM
+đang được select bằng cách sử dụng bàn phím. Chúng ta thấy chúng ở mọi nơi ví dụ
+như hình dưới đây:
 
 <img src="../images/docs/keyboard-focus.png" alt="Blue keyboard focus outline around a selected link." />
 
-Only ever use CSS that removes this outline, for example by setting `outline: 0`, if you are replacing it with another focus outline implementation.
-
-### Mechanisms to skip to desired content {#mechanisms-to-skip-to-desired-content}
-
-Provide a mechanism to allow users to skip past navigation sections in your application as this assists and speeds up keyboard navigation.
-
-Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with
-internal page anchors and some styling:
-
-- [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
-
-Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.
-
-Read more about the use of these elements to enhance accessibility here:
-
+Chỉ khi sử dụng CSS mới có thể remove outline này, ví dụ như
+chỉnh `outline: 0`, nếu bạn muốn thay thế nó với một focus outline khác.
+### Cơ chế skip đến nội dung mong muốn {#mechanisms-to-skip-to-desired-content}
+Bạn nên cung cấp một cơ chế nào đó cho phép users bỏ qua điều
+hướng trước đó trong ứng dụng của bạn, cũng là để tăng tốc điều hướng từ bàn
+phím.
+Skiplinks hay Skip Navigation Links là những link điều hướng
+ẩn chỉ hiển thị khi bàn phím của người dùng tương tác đến trang web. Chúng rất
+dễ implement với
+internal page anchors và một ít styling:
+- [WebAIM - Skip Navigation
+Links](https://webaim.org/techniques/skipnav/)
+Cũng sử dụng landmark elements và roles, như `<main>`
+và `<aside>`, để phân vùng trang web như công nghệ hỗ trợ cho phép người
+dùng điều hướng những sections đó một cách nhanh chóng.
+Đọc thêm về cách sử dụng những elements đó để tăng cường
+accessibility ở đây:
 - [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
-
-### Programmatically managing focus {#programmatically-managing-focus}
-
-Our React applications continuously modify the HTML DOM during runtime, sometimes leading to keyboard focus being lost or set to an unexpected element. In order to repair this,
-we need to programmatically nudge the keyboard focus in the right direction. For example, by resetting keyboard focus to a button that opened a modal window after that modal window is closed.
-
-MDN Web Docs takes a look at this and describes how we can build [keyboard-navigable JavaScript widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
-
-To set focus in React, we can use [Refs to DOM elements](/docs/refs-and-the-dom.html).
-
-Using this, we first create a ref to an element in the JSX of a component class:
-
+### Quản lý focus theo kế hoạch {#programmatically-managing-focus}
+Ứng dụng React của chúng ta liên tục điều chỉnh HTML DOM
+trong runtime, vì vậy đôi khi bàn phím khiến chúng ta mất focus hay bị set vào
+một element không ngờ tới. Để khắc phục vấn đề này,
+Chúng ta cần lập trình để focus bằng bàn phím đúng hướng, Ví
+dụ, bằng cách reset keyboard focus vào một button đã mở một cửa sổ modal sau
+khi cửa sổ modal đó đã được đóng.
+Tài liệu từ trang web MDN phân tích và mô tả cách chúng ta
+xây dưng [keyboard-navigable JavaScript
+widgets](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Keyboard-navigable_JavaScript_widgets).
+
+Để set focus trong React, chúng ta có thể sử dụng [Refs to
+DOM elements](/docs/refs-and-the-dom.html).
+Sử dụng nó, chúng ta đầu tiên tạo một ref đến một element
+trong JSX của một component class:
 ```javascript{4-5,8-9,13}
 class CustomTextInput extends React.Component {
   constructor(props) {
     super(props);
-    // Create a ref to store the textInput DOM element
+    // Tạo một ref để lưu textInput của DOM element
     this.textInput = React.createRef();
   }
   render() {
-  // Use the `ref` callback to store a reference to the text input DOM
-  // element in an instance field (for example, this.textInput).
+  // Sử dụng `ref` callback để lưu một reference đến text input trong DOM
+  // element trong một instance field (ví dụ, this.textInput).
     return (
       <input
         type="text"
@@ -190,20 +219,25 @@ class CustomTextInput extends React.Component {
   }
 }
 ```
-
-Then we can focus it elsewhere in our component when needed:
-
+Sau đó chúng ta có thể focus nó ở nơi khác trong component
+khi cần:
  ```javascript
  focus() {
-   // Explicitly focus the text input using the raw DOM API
-   // Note: we're accessing "current" to get the DOM node
-   this.textInput.current.focus();
+   // Focus đoạn text
+input một cách rõ ràng bằng cách sử dụng DOM API nguyên bản
+   // Chú ý: chúng ta
+đang truy cập "current" để lấy DOM node
+this.textInput.current.focus();
  }
- ```
 
-Sometimes a parent component needs to set focus to an element in a child component. We can do this by [exposing DOM refs to parent components](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components)
-through a special prop on the child component that forwards the parent's ref to the child's DOM node.
+ ```
+Đôi khi một component cha cần được set focus vào một element
+trong component con. Chúng ta có thể thực hiện bằng cách [phơi bày DOM refs tới
+component
+cha](/docs/refs-and-the-dom.html#exposing-dom-refs-to-parent-components)
 
+thông qua một prop đặc biệt ở component con để chuyển tiếp
+ref của component cha đến DOM node của component con.
 ```javascript{4,12,16}
 function CustomTextInput(props) {
   return (
@@ -212,7 +246,6 @@ function CustomTextInput(props) {
     </div>
   );
 }
-
 class Parent extends React.Component {
   constructor(props) {
     super(props);
@@ -225,65 +258,70 @@ class Parent extends React.Component {
   }
 }
 
-// Now you can set focus when required.
+// Bây giờ bạn có thể set focus khi cần thiết.
 this.inputElement.current.focus();
-```
-
-When using a HOC to extend components, it is recommended to [forward the ref](/docs/forwarding-refs.html) to the wrapped component using the `forwardRef` function of React. If a third party HOC
-does not implement ref forwarding, the above pattern can still be used as a fallback.
-
-A great focus management example is the [react-aria-modal](https://github.com/davidtheclark/react-aria-modal). This is a relatively rare example of a fully accessible modal window. Not only does it set initial focus on
-the cancel button (preventing the keyboard user from accidentally activating the success action) and trap keyboard focus inside the modal, it also resets focus back to the element that
-initially triggered the modal.
-
->Note:
->
->While this is a very important accessibility feature, it is also a technique that should be used judiciously. Use it to repair the keyboard focus flow when it is disturbed, not to try and anticipate how
->users want to use applications.
-
-## Mouse and pointer events {#mouse-and-pointer-events}
-
-Ensure that all functionality exposed through a mouse or pointer event can also be accessed using the keyboard alone. Depending only on the pointer device will lead to many cases where
-keyboard users cannot use your application.
-
-To illustrate this, let's look at a prolific example of broken accessibility caused by click events. This is the outside click pattern, where a user can disable an opened popover by clicking outside the element.
-
-<img src="../images/docs/outerclick-with-mouse.gif" alt="A toggle button opening a popover list implemented with the click outside pattern and operated with a mouse showing that the close action works." />
-
-This is typically implemented by attaching a `click` event to the `window` object that closes the popover:
 
+```
+Khi sử dụng HOC để mở rộng components, [chuyển tiếp
+ref](/docs/forwarding-refs.html) được khuyên dùng để bao bọc component sử dụng
+`forwardRef` function của React. Nếu một third party HOC
+
+không implement ref forwarding, pattern bên trên vẫn có thể
+sử dụng như một fallback.
+Một ví dụ về cách quản lý focus tốt là
+[react-aria-modal](https://github.com/davidtheclark/react-aria-modal). Đây là một
+ví dụ tương đối hiếm hoi nói về một cửa sổ modal có thể truy cập hoàn toàn. Nó
+không chỉ set focus ban đầu vào nút cancel (ngăn chặn người dùng không vô tình
+dùng bàn phím kích hoạt success action) và khóa focus từ bàn phím vào bên trong
+modal, nó cũng reset focus về lại element đã kích hoạt modal đó lúc ban đầu.
+
+>Chú ý:
+> 
+>Đây là một accessibility feature rất quan trọng, nhưng
+nó cũng là một kỹ thuật nên được sử dụng một cách không ngoan. Dùng nó để sửa
+chữa keyboard focus flow khi bị xáo trộn, không nên cố gắng dự đoán cách người dùng sử dụng ứng dụng.
+
+## Sự kiện Chuột và con trỏ {#mouse-and-pointer-events}
+
+Hãy chắc chắn rằng tất cả chức năng được sử dụng thông qua
+con trỏ chuột hoặc pointer event cũng có thể cũng được truy cập chỉ bằng cách sử
+dụng bàn phím. Chỉ dựa vào thiết bị pointer sẽ dấn đến nhiều trường hợp mà
+
+bàn phím của người dùng không thể sử dụng ứng dụng của bạn.
+Để minh họa vấn đề này, hãy nhìn vào một ví dụ liên quan đến
+việc accessibility bị vỡ do click events. Bên ngoài click pattern,
+nơi một user có thể vô hiệu hóa một popover đã đươc mở bằng
+cách click bên ngoài element.
+<img src="../images/docs/outerclick-with-mouse.gif" alt="A toggle
+button opening a popover list implemented with the click outside pattern and
+operated with a mouse showing that the close action works." />
+Đây là một cách implement thường thấy bằng cách gán một sự
+kiện `click` vào `windows` object mà nó dùng để đóng popover:
 ```javascript{12-14,26-30}
 class OuterClickExample extends React.Component {
 constructor(props) {
     super(props);
-
     this.state = { isOpen: false };
     this.toggleContainer = React.createRef();
-
     this.onClickHandler = this.onClickHandler.bind(this);
     this.onClickOutsideHandler = this.onClickOutsideHandler.bind(this);
   }
-
   componentDidMount() {
     window.addEventListener('click', this.onClickOutsideHandler);
   }
-
   componentWillUnmount() {
     window.removeEventListener('click', this.onClickOutsideHandler);
   }
-
   onClickHandler() {
     this.setState(currentState => ({
       isOpen: !currentState.isOpen
     }));
   }
-
   onClickOutsideHandler(event) {
     if (this.state.isOpen && !this.toggleContainer.current.contains(event.target)) {
       this.setState({ isOpen: false });
     }
   }
-
   render() {
     return (
       <div ref={this.toggleContainer}>
@@ -300,37 +338,38 @@ constructor(props) {
   }
 }
 ```
-
-This may work fine for users with pointer devices, such as a mouse, but operating this with the keyboard alone leads to broken functionality when tabbing to the next element
-as the `window` object never receives a `click` event. This can lead to obscured functionality which blocks users from using your application.
-
-<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`:
-
+Điều này có thể hoạt động tốt cho người dùng với những thiết
+bị pointer, như chuột, nhưng thao tác nó với chỉ bàn phím sẽ khiến chức năng bị
+hư hỏng khi tab sang element tiếp theo
+`window` object không bao giờ nhận một sự kiện `click`. Điều
+này có thể dẫn tới chức năng bị vô nghĩa khiến user không thể sử dụng ứng dụng
+của bạn.
+<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." />
+
+Chúng ta cũng có thể đạt được chức năng tương tự bằng cách sử
+dụng những event handlers thích hợp, như `onBlur` và `onFocus`:
 ```javascript{19-29,31-34,37-38,40-41}
 class BlurExample extends React.Component {
   constructor(props) {
     super(props);
-
     this.state = { isOpen: false };
     this.timeOutId = null;
-
     this.onClickHandler = this.onClickHandler.bind(this);
     this.onBlurHandler = this.onBlurHandler.bind(this);
     this.onFocusHandler = this.onFocusHandler.bind(this);
   }
-
   onClickHandler() {
     this.setState(currentState => ({
       isOpen: !currentState.isOpen
     }));
   }
-
-  // We close the popover on the next tick by using setTimeout.
-  // This is necessary because we need to first check if
-  // another child of the element has received focus as
-  // the blur event fires prior to the new focus event.
+  // Chúng ta đóng popover trong tick tiếp theo bằng setTimeout.
+  // Điều này là cần thiết bởi vì chúng ta cần kiểm tra trước xem
+  // con của element khác có nhận được focus như
+  // blur event kích hoạt trước focus event mới
   onBlurHandler() {
     this.timeOutId = setTimeout(() => {
       this.setState({
@@ -338,15 +377,13 @@ class BlurExample extends React.Component {
       });
     });
   }
-
-  // If a child receives focus, do not close the popover.
+  // Nếu một component con nhận được focus, không được đóng popover.
   onFocusHandler() {
     clearTimeout(this.timeOutId);
   }
-
   render() {
-    // React assists us by bubbling the blur and
-    // focus events to the parent.
+    // React hỗ trợ chúng ta bằng cách bubbling blur và
+    // những sự kiện focus vào component cha.
     return (
       <div onBlur={this.onBlurHandler}
            onFocus={this.onFocusHandler}>
@@ -367,166 +404,186 @@ class BlurExample extends React.Component {
   }
 }
 ```
-
-This code exposes the functionality to both pointer device and keyboard users. Also note the added `aria-*` props to support screen-reader users. For simplicity's sake
-the keyboard events to enable `arrow key` interaction of the popover options have not been implemented.
+Đoạn code cho thấy chức năng của cả con trỏ
+và bàn phím của người dùng. Cũng lưu ý rằng thêm thuộc tính `aria-*` vào để hỗ trợ
+người dùng. Đơn giãn hơn là để sự kiện bàn phím cho phép `arrow key` tương tác với
+tùy chọn popover chưa được implement.
 
 <img src="../images/docs/blur-popover-close.gif" alt="A popover list correctly closing for both mouse and keyboard users." />
 
-This is one example of many cases where depending on only pointer and mouse events will break functionality for keyboard users. Always testing with the keyboard will immediately
-highlight the problem areas which can then be fixed by using keyboard aware event handlers.
+Đây là một ví dụ điển hình khi chỉ
+phụ thuộc vào con trỏ và sự kiện từ chuột sẽ làm hỏng chức năng cho người dùng bàn phím. Luôn luôn
+test với bàn phím sẽ ngay lập tức phát hiện được những khu vực có vấn đề, sau đó
+có thể sửa bằng cách dùng những handler để nhận input từ bàn phím.
 
-## More Complex Widgets {#more-complex-widgets}
+## Những Widgets phức tạp hơn {#more-complex-widgets}
 
-A more complex user experience should not mean a less accessible one. Whereas accessibility is most easily achieved by coding as close to HTML as possible,
-even the most complex widget can be coded accessibly.
+Trải nghiệm người dùng phức tạp không nên khiến mức độ accessibilty bị giảm đi.
+Trong khi đó accessibility dễ đạt được nhất bằng cách code sát với HTML nhất có thể,
+Ngay cả với widget phức tạp nhất.
 
-Here we require knowledge of [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) as well as [ARIA States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties).
-These are toolboxes filled with HTML attributes that are fully supported in JSX and enable us to construct fully accessible, highly functional React components.
+Ở đây chúng ta cần kiến thức từ [ARIA Roles](https://www.w3.org/TR/wai-aria/#roles) cũng như [ARIA States and Properties](https://www.w3.org/TR/wai-aria/#states_and_properties). Đây là những công cụ có sẵn những thuộc tính HTML đã được hỗ trợ đầy đủ trong JSX và cho phép chúng ta xây dựng một trang web accessibility đầy đủ, những React component có chức năng cao cấp.
 
-Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
+Môi loại widget có một design pattern riêng và
+đáp ứng chức năng nhất định bởi người dùng như:
 
 - [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
 - [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)
 - [Inclusive Components](https://inclusive-components.design/)
 
-## Other Points for Consideration {#other-points-for-consideration}
+## Những điểm khác cần lưu ý
+{#other-points-for-consideration}
 
-### Setting the language {#setting-the-language}
+### Cài đặt ngôn ngữ {#setting-the-language}
 
-Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
+Biểu thị ngôn ngữ của những đoạn văn bản giúp
+phần mềm cài đặt đúng loại voice:
 
 - [WebAIM - Document Language](https://webaim.org/techniques/screenreader/#language)
 
-### Setting the document title {#setting-the-document-title}
+### Cài đặt title cho document {#setting-the-document-title}
 
-Set the document `<title>` to correctly describe the current page content as this ensures that the user remains aware of the current page context:
+Set `<title>` cho đoạn văn bản để mô tả nội dung của trang hiện tại,
+điều này giúp chắc chắn rằng người dùng nắm được nội dung mà họ đang đọc:
 
 - [WCAG - Understanding the Document Title Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-title.html)
 
-We can set this in React using the [React Document Title Component](https://github.com/gaearon/react-document-title).
+Chúng ta có thể set nó trong React bằng cách sử dụng [React Document Title Component](https://github.com/gaearon/react-document-title).
 
-### Color contrast {#color-contrast}
+### Độ tương phản màu sắc {#color-contrast}
 
-Ensure that all readable text on your website has sufficient color contrast to remain maximally readable by users with low vision:
+Hãy chắc chắn rằng tất cả đoạn text trong website của bạn có đủ
+độ tương phản màu sắc nhằm duy trì tối đa khả năng đọc của người dùng trong điều kiện thị lực kém:
 
 - [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 - [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
 - [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
 
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://jxnblk.com/colorable/).
+Thật tẻ nhạt khi phải tính toán màu sắc thủ công cho tất cả trường hợp trong website của bạn,
+thay vào đó, bạn có thể [tính toán tất cả màu sắc bằng Colorable](https://jxnblk.com/colorable/).
 
-Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
+Cả 2 công cụ aXe và WAVE được đề cập bên dưới đều bao gồm bộ tests kiểm tra độ tương phản màu sắc,
+chúng sẽ báo cáo những lỗi liên quan.
 
-If you want to extend your contrast testing abilities you can use these tools:
+Nếu bạn muốn mở rộng khả năng kiểm tra độ tương phản, bạn có thể
+sử dụng những công cụ dưới đây:
 
 - [WebAIM - Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
 - [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
 
 ## Development and Testing Tools {#development-and-testing-tools}
 
-There are a number of tools we can use to assist in the creation of accessible web applications.
+Có rất nhiều công cụ chúng ta có thể sử dụng để hỗ trợ
+trong việc tạo dựng accessibility của ứng dụng web.
 
 ### The keyboard {#the-keyboard}
 
-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:
+Cho đến thời điểm hiện tại, cách dễ nhất và cũng là một trong những điều quan trọng nhất
+là kiểm tra toàn bộ trang web của bạn có thể tương tác và sử dụng được 
+chỉ bằng bàn phím hay không. Chúng ta thực hiện điều này bằng cách:
 
-1. Plugging out 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.
+1. Tháo chuột của bạn ra khỏi máy tính.
+2. Sử dụng `Tab` và `Shift+Tab` để duyệt web.
+3. Sử dụng `Enter` để tương tác với những phần tử trong trang web.
+4. Ở những nơi yêu cầu, sử dụng phím mũi tên để tương tác với một số phần tử, như menu và dropdown.
 
 ### Development assistance {#development-assistance}
 
-We can check some accessibility features directly in our JSX code. Often intellisense checks are already provided in JSX aware IDE's for the ARIA roles, states and properties. We also
-have access to the following tool:
-
+Chúng ta có thể kiểm tra một số chức năng accessibility trực tiếp trong code JSX.
+Thường thì bộ kiểm tra intellisense sẽ được cung cấp sẵn trong IDE cho những vai trò
+ARIA, states và properties. Chúng ta cũng có thể truy cập bằng những công cụ dưới đây:
 #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y}
+[eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y)
+plugin cho ESLint cung cấp AST phản hồi AST về những vấn đề liên quan đến accessibility trong JSX của bạn. Nhiều IDE's cho phép bạn tích hợp trực tiếp vào code analysis và source code windows.
 
-The [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) plugin for ESLint provides AST linting feedback regarding accessibility issues in your JSX. Many
-IDE's allow you to integrate these findings directly into code analysis and source code windows.
-
-[Create React App](https://github.com/facebookincubator/create-react-app) has this plugin with a subset of rules activated. If you want to enable even more accessibility rules,
-you can create an `.eslintrc` file in the root of your project with this content:
-
+[Create React App](https://github.com/facebookincubator/create-react-app) có plugin này
+với một tập hợp về những quy tắc kích hoạt. Nếu bạn muốn cho phép quy tắc accessibility hơn nữa,
+bạn có thể tạo một `.eslintrc` file trong root của project bằng nội dung sau đây:
   ```json
   {
-    "extends": ["react-app", "plugin:jsx-a11y/recommended"],
-    "plugins": ["jsx-a11y"]
+  "extends": ["react-app", "plugin:jsx-a11y/recommended"],
+  "plugins": ["jsx-a11y"]
   }
   ```
 
-### Testing accessibility in the browser {#testing-accessibility-in-the-browser}
-
-A number of tools exist that can run accessibility audits on web pages in your browser. Please use them in combination with other accessibility checks mentioned here as they can only
-test the technical accessibility of your HTML.
+### Kiểm tra accessibility trong trình duyệt {#testing-accessibility-in-the-browser}
 
-#### aXe, aXe-core and react-axe {#axe-axe-core-and-react-axe}
+Một số công cụ có thể chạy audit accessibility tren trang
+web trong trình duyệt của bạn. Hãy dùng chúng phối hợp với những
+công cụ kiểm tra đã được nhắc tới ở đây, bởi vì chúng chỉ có thể kiểm tra accessibility về mặt kỹ thuật.
 
-Deque Systems offers [aXe-core](https://github.com/dequelabs/axe-core) for automated and end-to-end accessibility tests of your applications. This module includes integrations for Selenium.
+#### aXe, aXe-core và react-axe {#axe-axe-core-and-react-axe}
 
-[The Accessibility Engine](https://www.deque.com/products/axe/) or aXe, is an accessibility inspector browser extension built on `aXe-core`.
+Hệ thống Deque cho phép [aXe-core](https://github.com/dequelabs/axe-core) tự động kiểm tra end-to-end
+ứng dụng của bạn. Module này bao gồm những sự tích hợp cho Selenium.
 
-You can also use the [react-axe](https://github.com/dylanb/react-axe) module to report these accessibility findings directly to the console while developing and debugging.
+[The Accessibility Engine](https://www.deque.com/products/axe/) hoặc aXe, là một extension accessibility
+inspector tích hợp sẵn trong `aXe-core`.
 
+Bạn cũng có thể sử dụng [react-axe](https://github.com/dylanb/react-axe)
+module để report những phát hiện về accessibility
+trực tiếp khi đang develope và debug.
 #### WebAIM WAVE {#webaim-wave}
 
-The [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) is another accessibility browser extension.
+[Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) là một extension khác
 
-#### Accessibility inspectors and the Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}
+#### Accessibility inspectors và Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}
 
-[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/) is a subset of the DOM tree that contains accessible objects for every DOM element that should be exposed
-to assistive technology, such as screen readers.
-
-In some browsers we can easily view the accessibility information for each element in the accessibility tree:
+[The Accessibility Tree](https://www.paciellogroup.com/blog/2015/01/the-browser-accessibility-tree/)
+là một tập hợp DOM trê có chứa những accessible object cho từng DOM
+element mà chúng
+nên được cung cấp cho công nghệ hiện đại như screen readers.
 
+Ở một số trình duyệt, chúng ta có thể dễ dàng xem thông tin về accessibility
+cho từng element trong accessibility tree
 - [Using the Accessibility Inspector in Firefox](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector)
 - [Activate the Accessibility Inspector in Chrome](https://gist.github.com/marcysutton/0a42f815878c159517a55e6652e3b23a)
-- [Using the Accessibility Inspector in OS X Safari](https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
+- [Using the Accessibility Inspector in OS X Safari (https://developer.apple.com/library/content/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html)
 
 ### Screen readers {#screen-readers}
 
-Testing with a screen reader should form part of your accessibility tests.
-
-Please note that browser / screen reader combinations matter. It is recommended that you test your application in the browser best suited to your screen reader of choice.
-
-### Commonly Used Screen Readers {#commonly-used-screen-readers}
+Testing với một screen reader nên được xem như một phần của quá trình kiểm
+tra accessibility.
 
-#### NVDA in Firefox {#nvda-in-firefox}
+Vui lòng lưu ý rằng sự kết hợp browser / screen reader
+là quan trọng. Bạn nên test ứng dụng của mình bằng trình duyệt phù hợp nhất
+cho screen reader của bạn.
 
-[NonVisual Desktop Access](https://www.nvaccess.org/) or NVDA is an open source Windows screen reader that is widely used.
+### Screen Readers thông dụng {#commonly-used-screen-readers}
 
-Refer to the following guides on how to best use NVDA:
+#### NVDA trong Firefox {#nvda-in-firefox}
 
+[NonVisual Desktop Access](https://www.nvaccess.org/) hoặc NVDA là một Windows screen reader mã nguồn mở được sử dụng rộng rãi. Xem hướng dẫn bên dưới để biết cách dùng NVDA hiệu quả nhất:
 - [WebAIM - Using NVDA to Evaluate Web Accessibility](https://webaim.org/articles/nvda/)
 - [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
 
-#### VoiceOver in Safari {#voiceover-in-safari}
+#### VoiceOver trong Safari {#voiceover-in-safari}
 
-VoiceOver is an integrated screen reader on Apple devices.
+VoiceOver là một screen reader được tích hợp sẵn trong những thiết bị của Apple.
 
-Refer to the following guides on how activate and use VoiceOver:
+Xem hướng dẫn sau đây để biết cách kích hoạt và sử dụng Voice Over:
 
 - [WebAIM - Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
 - [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
 - [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
 
-#### JAWS in Internet Explorer {#jaws-in-internet-explorer}
+#### JAWS trong Internet Explorer {#jaws-in-internet-explorer}
+[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/)
+or JAWS, is a prolifically used screen reader on Windows.
 
-[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) or JAWS, is a prolifically used screen reader on Windows.
-
-Refer to the following guides on how to best use JAWS:
+Xem hướng dẫn bên dưới để biết cách dùng JAWS hiệu quả nhất:
 
 - [WebAIM - Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
 - [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
 
-### Other Screen Readers {#other-screen-readers}
-
-#### ChromeVox in Google Chrome {#chromevox-in-google-chrome}
+### Screen Readers khác {#other-screen-readers}
 
-[ChromeVox](https://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
+#### ChromeVox trong Google Chrome {#chromevox-in-google-chrome}
 
-Refer to the following guides on how best to use ChromeVox:
+[ChromeVox](https://www.chromevox.com/) là một screen reader được tích hợp sẵn trên Chromebooks và được [xem như một
+extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en)
+cho Google Chrome.
 
+Xem hướng dẫn bên dưới để biết cách dùng ChromeVox hiệu quả nhất:
 - [Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
 - [ChromeVox Classic Keyboard Shortcuts Reference](https://www.chromevox.com/keyboard_shortcuts.html)

From 6711a1a78af8687f453be2b31c0a73bfc8c2a24f Mon Sep 17 00:00:00 2001
From: ThinhNu <thinh.le.sdev@gmail.com>
Date: Fri, 10 May 2019 14:21:19 +0700
Subject: [PATCH 2/2] Update context.md

Translate context API
---
 content/docs/context.md | 117 ++++++++++++++++++++--------------------
 1 file changed, 59 insertions(+), 58 deletions(-)

diff --git a/content/docs/context.md b/content/docs/context.md
index e7bb925c7..e99138f63 100644
--- a/content/docs/context.md
+++ b/content/docs/context.md
@@ -4,57 +4,58 @@ title: Context
 permalink: docs/context.html
 ---
 
-Context provides a way to pass data through the component tree without having to pass props down manually at every level.
+Context cung cấp phương pháp truyền data xuyên suốt component tree mà không cần phải truyền props một cách thủ công qua từng level.
 
-In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.
 
-- [When to Use Context](#when-to-use-context)
-- [Before You Use Context](#before-you-use-context)
+Thông thường với một ứng dụng React, data được truyền từ trên xuống (cha tới con) thông qua props, điều này có vẻ khá cồng kềnh đối với một số loại props (e.g. locale preference, UI theme) chúng thường được sử dụng bởi rất nhiều component trong ứng dụng. Context cho phép chúng ta chia sẽ values giống như vậy giữa các components mà không cần truyền giá trị tới tất cả level trong component tree.
+
+- [Khi nào nên dùng Context](#when-to-use-context)
+- [Trước khi bạn sử dụng Context](#before-you-use-context)
 - [API](#api)
   - [React.createContext](#reactcreatecontext)
   - [Context.Provider](#contextprovider)
   - [Class.contextType](#classcontexttype)
   - [Context.Consumer](#contextconsumer)
-- [Examples](#examples)
+- [Ví dụ](#examples)
   - [Dynamic Context](#dynamic-context)
-  - [Updating Context from a Nested Component](#updating-context-from-a-nested-component)
-  - [Consuming Multiple Contexts](#consuming-multiple-contexts)
+  - [Cập nhật Context từ Nested Component](#updating-context-from-a-nested-component)
+  - [Sử dụng Multiple Contexts](#consuming-multiple-contexts)
 - [Caveats](#caveats)
 - [Legacy API](#legacy-api)
 
-## When to Use Context {#when-to-use-context}
+## Khi nào nên dùng Context {#when-to-use-context}
 
-Context is designed to share data that can be considered "global" for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a "theme" prop in order to style the Button component:
+Context được thiết kế để chia sẽ data khi chúng được xem là "global data" của toàn bộ ứng dụng React, chẳng hạn như thông tin về user hiện tại đang đăng nhập, theme, hoặc ngôn ngữ mà người dùng đã chọn. Ví dụ, ở đoạn code bên dưới, chúng ta truyền một "theme" prop để style một Button component:
 
 `embed:context/motivation-problem.js`
 
-Using context, we can avoid passing props through intermediate elements:
+Sử dụng context, chúng ta có thể tránh được việc truyền props qua các elements trung gian:
 
 `embed:context/motivation-solution.js`
 
-## Before You Use Context {#before-you-use-context}
+## Trước khi bạn sử dụng Context {#before-you-use-context}
 
-Context is primarily used when some data needs to be accessible by *many* components at different nesting levels. Apply it sparingly because it makes component reuse more difficult.
+Context chủ yếu được sử dụng khi một số data cần được truy cập bởi *nhiều* components ở nhiều tầng khác nhau. Sử dụng nó một cách cẩn thận bởi vì điều đó sẽ làm component trở nên khó tái sử dụng hơn.
 
-**If you only want to avoid passing some props through many levels, [component composition](/docs/composition-vs-inheritance.html) is often a simpler solution than context.**
+**Nếu bạn chỉ muốn dùng context để tránh việc truyền một số props qua nhiều levels, , [component composition](/docs/composition-vs-inheritance.html) thường là một giải pháp đơn giản hơn so với context.**
 
-For example, consider a `Page` component that passes a `user` and `avatarSize` prop several levels down so that deeply nested `Link` and `Avatar` components can read it:
+Ví dụ, một `Page` component truyền `user` và `avataSize` prop đến một số levels hạ cấp để `Link` và `Avatar` components có thể đọc được:
 
 ```js
 <Page user={user} avatarSize={avatarSize} />
-// ... which renders ...
+// ... được renders ...
 <PageLayout user={user} avatarSize={avatarSize} />
-// ... which renders ...
+// ... được renders ...
 <NavigationBar user={user} avatarSize={avatarSize} />
-// ... which renders ...
+// ... được renders ...
 <Link href={user.permalink}>
   <Avatar user={user} size={avatarSize} />
 </Link>
 ```
 
-It might feel redundant to pass down the `user` and `avatarSize` props through many levels if in the end only the `Avatar` component really needs it. It's also annoying that whenever the `Avatar` component needs more props from the top, you have to add them at all the intermediate levels too.
+Bạn có thể cảm thấy dư thừa khi truyền `user` và `avatarSize` props thông qua nhiều levels nếu chỉ có `Avatar` component thật sự cần đến nó. Nó cũng khá phiền toái mỗi khi `Avatar` component cần thêm props từ tầng trên cùng, bạn phải thêm tất những props đó ở tất cả những tầng trung gian.
 
-One way to solve this issue **without context** is to [pass down the `Avatar` component itself](/docs/composition-vs-inheritance.html#containment) so that the intermediate components don't need to know about the `user` or `avatarSize` props:
+Một cách để khắc phục vấn đề này mà **không dùng context** là [tự truyền `Avatar` component](/docs/composition-vs-inheritance.html#containment) bằng cách này, các components trung gian không cần phải giữ `user` hay `avataSize` props:
 
 ```js
 function Page(props) {
@@ -69,19 +70,19 @@ function Page(props) {
 
 // Now, we have:
 <Page user={user} avatarSize={avatarSize} />
-// ... which renders ...
+// ... được renders ...
 <PageLayout userLink={...} />
-// ... which renders ...
+// ... được renders ...
 <NavigationBar userLink={...} />
-// ... which renders ...
+// ... được renders ...
 {props.userLink}
 ```
 
-With this change, only the top-most Page component needs to know about the `Link` and `Avatar` components' use of `user` and `avatarSize`.
+Với sự thay đổi này, chỉ có tầng trên cùng của Page component biết được `Link` và `Avatar` components sử dụng `user` và `avatarSize`.
 
-This *inversion of control* can make your code cleaner in many cases by reducing the amount of props you need to pass through your application and giving more control to the root components. However, this isn't the right choice in every case: moving more complexity higher in the tree makes those higher-level components more complicated and forces the lower-level components to be more flexible than you may want.
+Sự *đảo ngược quyền kiểm soát (inversion of control)* này có thể giúp code của bạn rõ ràng hơn ở nhiều trường hợp bằng cách giảm số lượng props cần phải truyền xuyên suốt ứng dụng của và cho phép sự kiểm soát đến root component. Tuy nhiên, đây không phải là một sự lựa chọn tốt cho mọi trường hợp: Nó khiến độ phức tạp cao hơn trong component tree khiến higher-level components trở nên phức tạp hơn và khiến cho lower-level components trở nên quá linh động.
 
-You're not limited to a single child for a component. You may pass multiple children, or even have multiple separate "slots" for children, [as documented here](/docs/composition-vs-inheritance.html#containment):
+Bạn không bị gới hạn vào một child duy nhất cho mỗi component. Bạn có thể truyền nhiều children, hay thậm chí là nhiều "slots" tách biệt cho children, [Như tài liệu ở đây](/docs/composition-vs-inheritance.html#containment):
 
 ```js
 function Page(props) {
@@ -103,9 +104,9 @@ function Page(props) {
 }
 ```
 
-This pattern is sufficient for many cases when you need to decouple a child from its immediate parents. You can take it even further with [render props](/docs/render-props.html) if the child needs to communicate with the parent before rendering.
+Pattern này hoàn toàn hiệu quả cho nhiều trường hợp khi bạn cần tách một child component từ những partents component trung gian của nó. Bạn có thể tiến xa hơn nữa với [render props](/docs/render-props.html) nếu child component cần giao tiếp với parent component trước khi render.
 
-However, sometimes the same data needs to be accessible by many components in the tree, and at different nesting levels. Context lets you "broadcast" such data, and changes to it, to all components below. Common examples where using context might be simpler than the alternatives include managing the current locale, theme, or a data cache. 
+Tuy nhiên, đôi khi có những data trùng lặp cần được truy cập bởi nhiều components trong component tree, và ở nhiều tầng khác nhau. Context cho phép bạn "Phát sóng" những data như vậy, và trao đổi nó đến tất cả những components bên dưới. Ví dụ như khi sử dụng context có thể sẽ đơn giãn hơn so với những lựa chọn thay thế bao gồm quản lý current locale, theme, hay data caching.
 
 ## API {#api}
 
@@ -115,9 +116,9 @@ However, sometimes the same data needs to be accessible by many components in th
 const MyContext = React.createContext(defaultValue);
 ```
 
-Creates a Context object. When React renders a component that subscribes to this Context object it will read the current context value from the closest matching `Provider` above it in the tree.
+Tạo một Context object. Khi React render một component mà nó subcribe đến Context object này, nó sẽ đọc giá trị hiện tại của context đó từ `Provider` gần nhất trên component tree.
 
-The `defaultValue` argument is **only** used when a component does not have a matching Provider above it in the tree. This can be helpful for testing components in isolation without wrapping them. Note: passing `undefined` as a Provider value does not cause consuming components to use `defaultValue`.
+Đối số `defaultValue` **chỉ** sử dụng khi một component không có Provider nào bên trên nó trong component tree. Điều này có thể hữu dụng cho việc kiểm thử component một cách cô lập mà không cần phải wrap chúng lại. Lưu ý: truyền `undefined` như một giá trị Provider sẽ không khiến consuming components sử dụng `defaultValue`.
 
 ### `Context.Provider` {#contextprovider}
 
@@ -125,17 +126,17 @@ The `defaultValue` argument is **only** used when a component does not have a ma
 <MyContext.Provider value={/* some value */}>
 ```
 
-Every Context object comes with a Provider React component that allows consuming components to subscribe to context changes.
+Mỗi Context object đi cùng với một Provider React component cho phép consuming component theo dõi sự thay đổi của context đó.
 
-Accepts a `value` prop to be passed to consuming components that are descendants of this Provider. One Provider can be connected to many consumers. Providers can be nested to override values deeper within the tree.
+Nhận một `value` prop để truyền đến consuming components mà nó là con của Provider này. Một Provider có thể kết nối đến nhiều comsumers. Providers có thể lồng nhau để ghi đè giá trị sâu hơn trong component tree.
 
-All consumers that are descendants of a Provider will re-render whenever the Provider's `value` prop changes. The propagation from Provider to its descendant consumers is not subject to the `shouldComponentUpdate` method, so the consumer is updated even when an ancestor component bails out of the update.
+Tất cả consumers con của một Provider sẽ được re-rerender bất cứ khi nào `value` của Provider đó thay đổi. Sự lan truyền từ Provider đến consumer con của nó không bị lệ thuộc vào `shouldComponentUpdate` method, vì vậy consumer được cập nhật ngay cả khi một component cha thoát ra khỏi sự cập nhật đó.
 
-Changes are determined by comparing the new and old values using the same algorithm as [`Object.is`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description). 
+Những thay đổi được xác định bằng cách so sánh những giá trị mới và cũ sử dụng chung một thuật toán như [`Object.is`](//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is#Description). 
 
-> Note
+> Lưu ý
 > 
-> The way changes are determined can cause some issues when passing objects as `value`: see [Caveats](#caveats).
+> Cách những thay đổi được xác định có thể gây nên một số vấn đề khi truyền object như một `value`: xem [Caveats](#caveats).
 
 ### `Class.contextType` {#classcontexttype}
 
@@ -143,7 +144,7 @@ Changes are determined by comparing the new and old values using the same algori
 class MyClass extends React.Component {
   componentDidMount() {
     let value = this.context;
-    /* perform a side-effect at mount using the value of MyContext */
+    /* Thực hiện một side-effect tại mount sử dụng giá trị của MyContext */
   }
   componentDidUpdate() {
     let value = this.context;
@@ -155,19 +156,19 @@ class MyClass extends React.Component {
   }
   render() {
     let value = this.context;
-    /* render something based on the value of MyContext */
+    /* render thứ gì đó dựa vào giá trị của MyContext */
   }
 }
 MyClass.contextType = MyContext;
 ```
 
-The `contextType` property on a class can be assigned a Context object created by [`React.createContext()`](#reactcreatecontext). This lets you consume the nearest current value of that Context type using `this.context`. You can reference this in any of the lifecycle methods including the render function.
+`contextType` property trong một class có thể được gán vào một Context object tạo bởi [`React.createContext()`](#reactcreatecontext). Điều này giúp bạn tiêu thụ giá trị gần nhất ở thời điểm hiện tại của loại Context đó sử dụng `this.context`. Bạn có thể tham khảo điều này trong mọi lifecycle methods bao gồm render function.
 
-> Note:
+> Lưu ý:
 >
-> You can only subscribe to a single context using this API. If you need to read more than one see [Consuming Multiple Contexts](#consuming-multiple-contexts).
+>Bạn chỉ có thể subcribe tới một context duy nhất sử dụng API này. Nếu bạn muốn đọc nhiều hơn một context, tham khảo [Consuming Multiple Contexts](#consuming-multiple-contexts).
 >
-> If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use a **static** class field to initialize your `contextType`.
+>Bạn có thể sử dụng chức năng thử nghiệm [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), bạn có thể sử dụng **static** class field để khởi tạo `contextType` của mình.
 
 
 ```js
@@ -175,7 +176,7 @@ class MyClass extends React.Component {
   static contextType = MyContext;
   render() {
     let value = this.context;
-    /* render something based on the value */
+    /* render gì đó dựa vào value */
   }
 }
 ```
@@ -184,23 +185,23 @@ class MyClass extends React.Component {
 
 ```js
 <MyContext.Consumer>
-  {value => /* render something based on the context value */}
+  {value => /* render gì đó dựa vào context value */}
 </MyContext.Consumer>
 ```
 
-A React component that subscribes to context changes. This lets you subscribe to a context within a [function component](/docs/components-and-props.html#function-and-class-components).
+Khi một React component subcribe tới sự thay đổi của context. Điều này cho phép bạn subcribe tới một context trong một [function component](/docs/components-and-props.html#function-and-class-components).
 
-Requires a [function as a child](/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node. The `value` argument passed to the function will be equal to the `value` prop of the closest Provider for this context above in the tree. If there is no Provider for this context above, the `value` argument will be equal to the `defaultValue` that was passed to `createContext()`.
+Yêu cầu một [function as a child](/docs/render-props.html#using-props-other-than-render). Function nhận giá trị context hiện tại và trả về một React node. Tham số `value` truyền đến function sẽ bằng với `value` prop của Provider gần nhất trong context này trên tree component. Nếu không có Provider nào cho context này ở trên nó, tham số `value` sẽ bằng với `defaultValue` đã được truyền tới `createContext()`.
 
-> Note
+> Lưu ý
 > 
-> For more information about the 'function as a child' pattern, see [render props](/docs/render-props.html).
+> Để biết thêm thông tin về 'function as a child' pattern, xem [render props](/docs/render-props.html).
 
-## Examples {#examples}
+## Ví dụ {#examples}
 
 ### Dynamic Context {#dynamic-context}
 
-A more complex example with dynamic values for the theme:
+Một ví dụ phức tạp hơn với dynamic values cho theme:
 
 **theme-context.js**
 `embed:context/theme-detailed-theme-context.js`
@@ -211,9 +212,9 @@ A more complex example with dynamic values for the theme:
 **app.js**
 `embed:context/theme-detailed-app.js`
 
-### Updating Context from a Nested Component {#updating-context-from-a-nested-component}
+### Cập nhật Context từ một Nested Component {#updating-context-from-a-nested-component}
 
-It is often necessary to update the context from a component that is nested somewhere deeply in the component tree. In this case you can pass a function down through the context to allow consumers to update the context:
+Chúng ta thường cần cập nhật context từ một component đã được lồng ở nơi nào đó sâu trong component tree. Trong trường hợp này bạn có thể truyền một function xuống context để cho phép consumers cập nhật context đó:
 
 **theme-context.js**
 `embed:context/updating-nested-context-context.js`
@@ -224,28 +225,28 @@ It is often necessary to update the context from a component that is nested some
 **app.js**
 `embed:context/updating-nested-context-app.js`
 
-### Consuming Multiple Contexts {#consuming-multiple-contexts}
+### Consuming nhiều Contexts {#consuming-multiple-contexts}
 
-To keep context re-rendering fast, React needs to make each context consumer a separate node in the tree. 
+Để giữ context re-rendering nhanh chóng, React cần làm cho mỗi context consumer tách rời nhau trong component tree.
 
 `embed:context/multiple-contexts.js`
 
-If two or more context values are often used together, you might want to consider creating your own render prop component that provides both.
+Nếu có hai hoặc nhiều context values được dùng cùng nhau, bạn có thể sẽ muốn sử tạo render prop component của chính mình.
 
 ## Caveats {#caveats}
 
-Because context uses reference identity to determine when to re-render, there are some gotchas that could trigger unintentional renders in consumers when a provider's parent re-renders. For example, the code below will re-render all consumers every time the Provider re-renders because a new object is always created for `value`:
+Bởi vì context sử dụng reference identity để xác định khi nào nên re-render, có một số vấn đề nguy hiểm có thể kích hoạt render một cách vô tình trong consumers khi một provider cha re-render. Ví dụ, đoạn code bên dưới sẽ re-render tất cả consumer mỗi lần Provider re-render bởi vì một object mới sẽ luôn được tạo cho `value`:
 
 `embed:context/reference-caveats-problem.js`
 
 
-To get around this, lift the value into the parent's state:
+Để giải quyết vấn đề này, nâng giá trị đó lên state của cha:
 
 `embed:context/reference-caveats-solution.js`
 
 ## Legacy API {#legacy-api}
 
-> Note
+> Lưu ý
 > 
-> React previously shipped with an experimental context API. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. The legacy API will be removed in a future major React version. Read the [legacy context docs here](/docs/legacy-context.html).
+> React vừa mang đến một context API thử nghiệm. API cũ sẽ hỗ trợ trong tất cả phiên bản 16.x, nhưng những ứng dụng sử dụng nó nên nâng cấp lên phiên bản mới hơn. API cũ sẽ bị xóa trong tương lại qua những lần cập nhật lớn của React. Tham khảo [legacy context docs here](/docs/legacy-context.html).