From 57b6d76841158a85c96562ba31f78e7c946803d5 Mon Sep 17 00:00:00 2001 From: Ilkwon Sim Date: Thu, 23 May 2019 17:00:03 +0900 Subject: [PATCH 1/3] Fix wrong sentences line break --- content/docs/accessibility.md | 39 ++++++++++++----------------------- 1 file changed, 13 insertions(+), 26 deletions(-) diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md index e6cacba3b..18442b9a1 100644 --- a/content/docs/accessibility.md +++ b/content/docs/accessibility.md @@ -149,8 +149,7 @@ Only ever use CSS that removes this outline, for example by setting `outline: 0` 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: +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/) @@ -162,8 +161,7 @@ Read more about the use of these elements to enhance accessibility here: ### 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. +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). @@ -201,8 +199,7 @@ Then we can focus it elsewhere in our component when needed: } ``` -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. +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. ```javascript{4,12,16} function CustomTextInput(props) { @@ -229,12 +226,10 @@ class Parent extends React.Component { 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. +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. +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: > @@ -243,8 +238,7 @@ initially triggered the modal. ## 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. +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. @@ -301,8 +295,7 @@ 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. +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. 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. @@ -368,18 +361,15 @@ 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. +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. 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. +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. ## More Complex Widgets {#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. +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. 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. @@ -438,16 +428,13 @@ By far the easiest and also one of the most important checks is to test if your ### 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: +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: #### eslint-plugin-jsx-a11y {#eslint-plugin-jsx-a11y} -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. +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) 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: ```json { From 04f3dc58db98b6350912a2eff3abe6d20b31df3a Mon Sep 17 00:00:00 2001 From: App Generator Date: Thu, 23 May 2019 22:53:39 +0300 Subject: [PATCH 2/3] Added AppSeed App Generator to the list (#2030) AppSeed is a FullStack Web App Generator that allows you to choose a visual theme and apply it on a full, but flexible, technology stack in just a few minutes. The app generator can be used without an account. Read more: https://AppSeed.us --- content/community/tools-starter-kits.md | 1 + 1 file changed, 1 insertion(+) diff --git a/content/community/tools-starter-kits.md b/content/community/tools-starter-kits.md index a4e6b8150..bfd3b89fc 100644 --- a/content/community/tools-starter-kits.md +++ b/content/community/tools-starter-kits.md @@ -36,3 +36,4 @@ Ready to grow boilerplate with react-router, redux, saga, webpack 3, jest w/ cov * **[EDGE Platform](https://github.com/sebastian-software/edge)** Universal React/SSR + Apollo GraphQL + JS/CSS Code Splitting + Fine-Tuned Webpack + Localization/Internationalization. Most things are external dependencies. Boilerplate available. * **[bae](https://github.com/siddharthkp/bae)** Zero config toolkit. SSR (with data fetching) + routing + streaming + styling (with styled-components) + HMR out of the box. * **[breko-hub](https://github.com/tomatau/breko-hub)** A production ready boilerplate for universal react applications. Complete with code splitting, server render (using koa), redux, sagas, debugging, hot-reloading (live updates on the server), css-modules, scss, super fast integration tests and unit tests. There's also a big focus on clean code and smaller files. + * **[appseed](https://github.com/rosoftdeveloper/appseed)** A production ready boilerplate for UI-Ready react applications. The frontend can be bundled with various backends: Flask, Laravel, Express. From 250ddc8ec59176cebdb07fdb342dde3cd1192829 Mon Sep 17 00:00:00 2001 From: Linh Le Date: Tue, 28 May 2019 22:49:35 -0400 Subject: [PATCH 3/3] Re-translate and resolve conflicts --- content/docs/accessibility.md | 479 +++++++++++--------------------- content/docs/introducing-jsx.md | 18 +- 2 files changed, 160 insertions(+), 337 deletions(-) diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md index 3ab8decb9..d5a891cb2 100644 --- a/content/docs/accessibility.md +++ b/content/docs/accessibility.md @@ -3,39 +3,32 @@ id: accessibility title: Accessibility permalink: docs/accessibility.html --- + ## Tại sao là 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 (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. -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. +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} -[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. + +[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) +- [Danh sách WCAG từ Wuhcag](https://www.wuhcag.com/wcag-checklist/) +- [Danh sách WCAG từ WebAIM](http://webaim.org/standards/wcag/checklist) +- [Danh sách từ dự án A11Y](http://a11yproject.com/checklist.html) + ### WAI-ARIA {#wai-aria} -[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. + +[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} ``` + ## 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ẻ -`
` vào JSX để giúp nó hoạt động, đặc biệt khi làm việc với -lists (`
    `, `
      ` và -`
      `) hay ``. -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. +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ẻ `
      ` vào JSX để giúp nó hoạt động, đặc biệt khi làm việc với lists (`
        `, `
          ` và `
          `) và HTML `
      `. +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 ( @@ -73,6 +61,7 @@ function ListItem({ item }) { ); } + function Glossary(props) { return (
      @@ -82,11 +71,9 @@ function Glossary(props) {
      ); } - ``` -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: +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) { @@ -104,9 +91,7 @@ function Glossary(props) { } ``` -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ợ: +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 }) { @@ -117,118 +102,73 @@ function ListItem({ item }) { ); } - ``` -Tham khảo thêm, truy cập [the Fragments -documentation](/docs/fragments.html). +Tham khảo thêm, truy cập [Tài liệu về Fragments](/docs/fragments.html). ## Accessible Forms {#accessible-forms} ### Labeling {#labeling} +Mỗi HTML form control, như `` và `