From dcb2466260029349c7a94f883aeb83787578537e Mon Sep 17 00:00:00 2001 From: Siarhei Bobryk Date: Sun, 19 Sep 2021 12:36:57 +0300 Subject: [PATCH 1/4] [Docs] Add the anchor for the first entry about "HOC" (#3914) --- content/docs/accessibility.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md index 19878166a..44603a257 100644 --- a/content/docs/accessibility.md +++ b/content/docs/accessibility.md @@ -226,7 +226,7 @@ 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](/docs/higher-order-components.html) 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. From f0a9793dff9f8e86ec365bfadb0b4b23c6f618ce Mon Sep 17 00:00:00 2001 From: Siarhei Bobryk Date: Sun, 19 Sep 2021 13:14:11 +0300 Subject: [PATCH 2/4] [Docs] Apply the code Markdown syntax for the value prop (#3912) --- content/docs/forms.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/forms.md b/content/docs/forms.md index 19ff42fe6..c43a72a3b 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -270,7 +270,7 @@ Also, since `setState()` automatically [merges a partial state into the current ## Controlled Input Null Value {#controlled-input-null-value} -Specifying the value prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`. +Specifying the `value` prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`. The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.) From ce61e0b68f46dcd3ecb936b5e04751f5e5d39590 Mon Sep 17 00:00:00 2001 From: Ryan Le Date: Tue, 21 Sep 2021 14:16:50 +0700 Subject: [PATCH 3/4] Update accessibility.md --- content/docs/accessibility.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md index a40b2abc1..8a35b2a64 100644 --- a/content/docs/accessibility.md +++ b/content/docs/accessibility.md @@ -227,11 +227,7 @@ class Parent extends React.Component { this.inputElement.current.focus(); ``` -<<<<<<< HEAD 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. -======= -When using a [HOC](/docs/higher-order-components.html) 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. ->>>>>>> f0a9793dff9f8e86ec365bfadb0b4b23c6f618ce 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. @@ -517,4 +513,4 @@ Xem hướng dẫn bên dưới để biết cách dùng JAWS hiệu quả nhấ Xem hướng dẫn bên dưới để biết cách dùng ChromeVox hiệu quả nhất: - [Google Chromebook Help - Sử dụng Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en) -- [ChromeVox Classic Keyboard Shortcuts Reference](http://www.chromevox.com/keyboard_shortcuts.html) \ No newline at end of file +- [ChromeVox Classic Keyboard Shortcuts Reference](http://www.chromevox.com/keyboard_shortcuts.html) From c574948442c89b285d4edc32186a7a2a9ceee43a Mon Sep 17 00:00:00 2001 From: Ryan Le Date: Tue, 21 Sep 2021 14:17:08 +0700 Subject: [PATCH 4/4] Update forms.md --- content/docs/forms.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/content/docs/forms.md b/content/docs/forms.md index 6b3e79bfc..507c577bb 100644 --- a/content/docs/forms.md +++ b/content/docs/forms.md @@ -271,11 +271,7 @@ Ngoài ra, kể từ khi `setState()` tự động [gộp các phần của stat ## Controlled Input với giá trị null {#controlled-input-null-value} -<<<<<<< HEAD Cũng có ngoại lệ, giá trị của prop trong một [controlled component](/docs/forms.html#controlled-components) sẽ ngăn người dùng thay đổi nó trừ khi bạn cũng muốn vậy. Nếu bạn đã cung cấp một `value` nhưng thẻ input vẫn có khả năm bị sửa đổi, bạn đã vô tình gán `value` bằng với `undefined` hay `null`. -======= -Specifying the `value` prop on a [controlled component](/docs/forms.html#controlled-components) prevents the user from changing the input unless you desire so. If you've specified a `value` but the input is still editable, you may have accidentally set `value` to `undefined` or `null`. ->>>>>>> f0a9793dff9f8e86ec365bfadb0b4b23c6f618ce Đoạn code bên dưới sẽ làm rõ điều ta vừa đề cập. (Thẻ input đã được gán giá trị lúc bạn đầu nhưng trở nên có thể bị sửa đổi sau một khoảng thời gian chờ.)