From 12171e12dcb9bf92a3f4ab7792e9f15ab9329b12 Mon Sep 17 00:00:00 2001
From: Martin Bohal <mb@mbohal.cz>
Date: Wed, 10 Jan 2024 11:15:15 +0100
Subject: [PATCH] Omit link to legacy list of React synthetic events in
 component documentation

---
 mkdocs.yml                              |  1 +
 src/components/Alert/README.md          | 16 +++++++------
 src/components/Badge/README.md          | 16 +++++++------
 src/components/Button/README.md         | 16 +++++++------
 src/components/ButtonGroup/README.md    | 18 +++++++-------
 src/components/Card/README.md           | 16 +++++++------
 src/components/CheckboxField/README.md  | 18 +++++++-------
 src/components/FileInputField/README.md | 18 +++++++-------
 src/components/FormLayout/README.md     | 20 +++++++++-------
 src/components/Grid/README.md           | 19 ++++++++-------
 src/components/InputGroup/README.md     | 18 +++++++-------
 src/components/Modal/README.md          | 31 ++++++++++++++-----------
 src/components/Paper/README.md          | 16 +++++++------
 src/components/Popover/README.md        | 16 +++++++------
 src/components/Radio/README.md          | 22 ++++++++++--------
 src/components/ScrollView/README.md     | 18 +++++++-------
 src/components/SelectField/README.md    | 18 +++++++-------
 src/components/Table/README.md          | 18 +++++++-------
 src/components/Tabs/README.md           | 26 +++++++++++++--------
 src/components/Text/README.md           | 24 ++++++++++++-------
 src/components/TextArea/README.md       | 18 +++++++-------
 src/components/TextField/README.md      | 21 ++++++++++-------
 src/components/TextLink/README.md       | 18 +++++++-------
 src/components/Toggle/README.md         | 18 +++++++-------
 src/components/Toolbar/README.md        | 16 +++++++------
 25 files changed, 259 insertions(+), 197 deletions(-)

diff --git a/mkdocs.yml b/mkdocs.yml
index 32d14358..5387bfc0 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -11,6 +11,7 @@ docs_dir: 'src'
 
 markdown_extensions:
   - admonition
+  - attr_list
   - def_list
   - pymdownx.highlight:
       use_pygments: false
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
index 0009db04..34d696f5 100644
--- a/src/components/Alert/README.md
+++ b/src/components/Alert/README.md
@@ -171,13 +171,15 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -211,5 +213,5 @@ Where:
 - `<PROPERTY>` is one of `color` (color of text), `foreground-color` (color of
   border, icon, links, and emphasis), or `background-color`.
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
diff --git a/src/components/Badge/README.md b/src/components/Badge/README.md
index a7ef811d..1598f285 100644
--- a/src/components/Badge/README.md
+++ b/src/components/Badge/README.md
@@ -87,17 +87,19 @@ Medium-emphasis priority to provide additional context in an unobtrusive way.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
 <docoff-react-props src="/components/Badge/Badge.jsx" />
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
diff --git a/src/components/Button/README.md b/src/components/Button/README.md
index 778e02e2..800d93b7 100644
--- a/src/components/Button/README.md
+++ b/src/components/Button/README.md
@@ -388,13 +388,15 @@ animation is made.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the native HTML
-`<button>`. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<button>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[button] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<button>` HTML element attributes][button-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -575,6 +577,6 @@ feedback state.
 | `--rui-Button--feedback__opacity` | Opacity of buttons in feedback state                 |
 | `--rui-Button--feedback__cursor`  | Cursor to show on hovering buttons in feedback state |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[button]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
+[button-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
diff --git a/src/components/ButtonGroup/README.md b/src/components/ButtonGroup/README.md
index 45926e76..307a0919 100644
--- a/src/components/ButtonGroup/README.md
+++ b/src/components/ButtonGroup/README.md
@@ -249,13 +249,15 @@ and communicating the state of individual options.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -276,7 +278,7 @@ its accessibility.
 | `--rui-ButtonGroup--flat__separator__width`                        | Separator width for `flat` buttons             |
 | `--rui-ButtonGroup--flat__separator__color`                        | Separator color for `flat` buttons             |
 
-[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
diff --git a/src/components/Card/README.md b/src/components/Card/README.md
index 204c380d..d80fd0bd 100644
--- a/src/components/Card/README.md
+++ b/src/components/Card/README.md
@@ -255,13 +255,15 @@ its interactive elements to disallow user's interaction.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -310,5 +312,5 @@ Where:
 - `<PROPERTY>` is one of `color` (color of text), `border-color`, or
   `background-color`.
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
diff --git a/src/components/CheckboxField/README.md b/src/components/CheckboxField/README.md
index 12a7c94c..5b793c22 100644
--- a/src/components/CheckboxField/README.md
+++ b/src/components/CheckboxField/README.md
@@ -172,13 +172,15 @@ Disabled state makes the input unavailable.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or you can **add whatever HTML attribute
-you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<input>`. This enables making the component interactive and
-helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<input>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[checkbox] input type.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="checkbox" />` HTML element attributes][checkbox-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -198,6 +200,6 @@ options. On top of that, the following options are available for CheckboxField.
 | `--rui-FormField--check__input--checkbox__border-radius`             | Input corner radius                          |
 | `--rui-FormField--check__input--checkbox--checked__background-image` | Background image of checked input            |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[checkbox]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_attributes
+[checkbox-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
diff --git a/src/components/FileInputField/README.md b/src/components/FileInputField/README.md
index 970beb2d..cc2ada30 100644
--- a/src/components/FileInputField/README.md
+++ b/src/components/FileInputField/README.md
@@ -156,10 +156,10 @@ It's possible to disable the whole input.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or you can **add whatever HTML attribute
-you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<input>`. This enables making the component interactive and
-helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<input>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
 ```docoff-react-preview
 <FileInputField
@@ -173,8 +173,10 @@ helps to improve its accessibility.
 />
 ```
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[file] input type.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="file" />` HTML element attributes][file-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -189,6 +191,6 @@ If you provide [ref], it is forwarded to the native HTML `<input>` element.
 Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options.
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[file]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
+[file-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#additional_attributes
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index 1fa6c229..6b477e47 100644
--- a/src/components/FormLayout/README.md
+++ b/src/components/FormLayout/README.md
@@ -416,13 +416,15 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -453,10 +455,10 @@ FormLayoutCustomField can be styled using a small subset of
 | `--rui-FormField--custom--default__surrounding-text-color` | Custom field label color in default state              |
 | `--rui-FormField--custom--disabled__surrounding-text-color` | Custom field label color in disabled-like state       |
 
-[grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
-[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [fragments]: https://reactjs.org/docs/fragments.html
+[grid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [rui-232]: https://github.com/react-ui-org/react-ui/issues/232
 [rui-265]: https://github.com/react-ui-org/react-ui/issues/265
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[subgrid]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid
diff --git a/src/components/Grid/README.md b/src/components/Grid/README.md
index d7a4e798..8e74dd19 100644
--- a/src/components/Grid/README.md
+++ b/src/components/Grid/README.md
@@ -248,13 +248,16 @@ property. Check [MDN][grid-auto-flow] to fully understand available options.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the HTML element
-of your choice provided by `tag`, which is `<div>` by default. It enables making
-the component interactive and helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root HTML element
+of your choice provided by `tag`, which is `<div>` by default. This enables
+making the component interactive and helps to improve its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element or [any other][all-html-elements] element of your choice.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [any other HTML element][all-html-elements]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -276,6 +279,6 @@ Wrapper for content that should span multiple rows or columns.
 [justify-items]: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
 [repeat]: https://developer.mozilla.org/en-US/docs/Web/CSS/repeat
 [minmax]: https://developer.mozilla.org/en-US/docs/Web/CSS/minmax
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [all-html-elements]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element
diff --git a/src/components/InputGroup/README.md b/src/components/InputGroup/README.md
index c92deeed..7e03747d 100644
--- a/src/components/InputGroup/README.md
+++ b/src/components/InputGroup/README.md
@@ -250,13 +250,15 @@ for the underlying `<fieldset>` element.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the `<div>` HTML
-element which wraps elements to be grouped. This enables making the component
-interactive and helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<fieldset>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[fieldset][fieldset-attributes] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<fieldset>` HTML element attributes][fieldset-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -269,7 +271,7 @@ interactive and helps to improve its accessibility.
 | `--rui-InputGroup__gap`                                            | Gap between elements                           |
 | `--rui-InputGroup__inner-border-radius`                            | Inner border radius of elements                |
 
-[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
-[React synthetic events]: https://reactjs.org/docs/events.html
+[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [fieldset-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index 9dd84542..d4be9543 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -1015,22 +1015,25 @@ opened.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the:
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to:
 
-- `<div>` HTML element in case of the `Modal` component. This `<div>` is not the
-  root, but its first child which represents the modal window.
-- root `<div>` HTML element in case of `ModalHeader`, `ModalBody`, `ModalContent`
+- the `<div>` HTML element in case of the `Modal` component. This `<div>` is not
+  the root, but its first child which represents the modal window.
+- the root `<div>` HTML element in case of `ModalHeader`, `ModalBody`, `ModalContent`
   and `ModalFooter` components.
-- heading HTML element, which level can be specified through `level` option, in
-  case of the `ModalTitle` component.
-- native HTML `<button>` in case of the `ModalCloseButton` component.
+- the heading (e.g. `<h1>`) HTML element in case of the `ModalTitle` component.
+- the native HTML `<button>` in case of the `ModalCloseButton` component.
 
 This enables making the component interactive and helps to improve its
 accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div], [heading] and [button] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [`<h1>`-`<h6>` HTML element attributes][heading-attributes]{:target="_blank"}
+- [`<button>` HTML element attributes][button-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -1084,7 +1087,7 @@ accessibility.
 | `--rui-Modal--fullscreen__width`                     | Width of fullscreen modal                                     |
 | `--rui-Modal--fullscreen__height`                    | Height of fullscreen modal                                    |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
-[heading]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
-[button]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
+[button-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[heading-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
diff --git a/src/components/Paper/README.md b/src/components/Paper/README.md
index 8192fd15..439ccf97 100644
--- a/src/components/Paper/README.md
+++ b/src/components/Paper/README.md
@@ -54,13 +54,15 @@ Dim background and add transparency to visually suppress the Paper.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -79,5 +81,5 @@ its accessibility.
 | `--rui-Paper--muted__opacity`                        | Opacity of muted paper                                       |
 | `--rui-Paper--raised__box-shadow`                    | Box shadow of raised paper                                   |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
diff --git a/src/components/Popover/README.md b/src/components/Popover/README.md
index 712e7b11..82e4d1b8 100644
--- a/src/components/Popover/README.md
+++ b/src/components/Popover/README.md
@@ -287,13 +287,15 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -321,7 +323,7 @@ which enables [Advanced Positioning](#advanced-positioning).
 | `--rui-Popover__background-color`                    | Background color                                             |
 | `--rui-Popover__box-shadow`                          | Popover box shadow                                           |
 
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [Floating UI]: https://floating-ui.com/docs/react-dom
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
diff --git a/src/components/Radio/README.md b/src/components/Radio/README.md
index 63bf1edc..e0a9a382 100644
--- a/src/components/Radio/README.md
+++ b/src/components/Radio/README.md
@@ -279,13 +279,15 @@ It's possible to disable just some options or the whole set.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or you can **add whatever HTML attribute
-you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<input>` elements. This enables making the component
-interactive and helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<input>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[radio] input type.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="radio" />` HTML element attributes][radio-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -301,8 +303,8 @@ options. On top of that, the following options are available for Radio.
 | `--rui-FormField--check__input--radio__border-radius`              | Input corner radius                            |
 | `--rui-FormField--check__input--radio--checked__background-image` | Checked input background image (inline, URL, …) |
 
-[nng-radio]: https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
-[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
 [accessibility]: https://www.w3.org/WAI/tutorials/forms/grouping/
-[React synthetic events]: https://reactjs.org/docs/events.html
-[radio]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#additional_attributes
+[fieldset]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
+[nng-radio]: https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
+[radio-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio#additional_attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
diff --git a/src/components/ScrollView/README.md b/src/components/ScrollView/README.md
index 56a6ca16..7650b6c3 100644
--- a/src/components/ScrollView/README.md
+++ b/src/components/ScrollView/README.md
@@ -480,13 +480,15 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the `<div>` HTML
-element. This enables making the component interactive and helps to improve its
-accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -497,7 +499,7 @@ If you provide [ref], it is forwarded to the scrolling viewport native HTML
 
 <docoff-react-props src="/components/ScrollView/ScrollView.jsx"></docoff-react-props>
 
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [linear gradients]: https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
diff --git a/src/components/SelectField/README.md b/src/components/SelectField/README.md
index 6d1730c7..e1a5f23b 100644
--- a/src/components/SelectField/README.md
+++ b/src/components/SelectField/README.md
@@ -649,13 +649,15 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or you can **add whatever HTML attribute
-you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<select>`. This enables making the component interactive and helps
-to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<select>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[select] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<select>` HTML element attributes][select-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -676,6 +678,6 @@ options. On top of that, the following options are available for SelectField.
 | `--rui-FormField--box--select__caret__background`    | SelectField arrow background (including `url()` or gradient) |
 | `--rui-FormField--box--select__option--disabled__color` | Text color of disabled SelectField options                |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[select]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
+[select-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attributes
diff --git a/src/components/Table/README.md b/src/components/Table/README.md
index 62818f5f..02a6ef6c 100644
--- a/src/components/Table/README.md
+++ b/src/components/Table/README.md
@@ -243,17 +243,19 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the `<table>` HTML
-element. This enables making the component interactive and helps to improve its
-accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<table>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[table] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<table>` HTML element attributes][table-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
 <docoff-react-props src="/components/Table/Table.jsx"></docoff-react-props>
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[table]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
+[table-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#attributes
diff --git a/src/components/Tabs/README.md b/src/components/Tabs/README.md
index e419ea05..81a7ec1c 100644
--- a/src/components/Tabs/README.md
+++ b/src/components/Tabs/README.md
@@ -157,14 +157,20 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the `<nav>` HTML
-element in case of `Tabs` component and to the `<a>` HTML element in
-case of `TabsItem`. This enables making the component interactive and helps
-to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to:
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[nav] and [li] element.
+- the root `<nav>` HTML element in case of `Tabs` component
+- the `<a>` HTML element in case of `TabsItem`
+
+This enables making the component interactive and helps to improve its
+accessibility.
+
+👉 For the full list of supported attributes refer to:
+
+- [`<nav>` HTML element attributes][nav-attributes]{:target="_blank"}
+- [`<a>` HTML element attributes][a-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -216,6 +222,6 @@ Where:
   `background-color`, `box-shadow`, `shift-y` (shifts vertically the whole
   item), or `label__shift-y` (tweaks vertical position of tab label).
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[nav]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#attributes
-[li]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes
+[a-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attributes
+[nav-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/nav#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
diff --git a/src/components/Text/README.md b/src/components/Text/README.md
index f4eadb40..4b2c56e3 100644
--- a/src/components/Text/README.md
+++ b/src/components/Text/README.md
@@ -202,19 +202,25 @@ React.createElement(() => {
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded either to the
-`<span>` or to the `<div>` HTML element in case that `blockLevel` is set to
-`true`. This enables making the component interactive and helps to improve its
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root:
+
+- `<span>` HTML element in case that `blockLevel` is set to `false`
+- `<div>` HTML element in case that `blockLevel` is set to `true`
+
+This enables making the component interactive and helps to improve its
 accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[span] and [div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<span>` HTML element attributes][span-attributes]{:target="_blank"}
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
 <docoff-react-props src="/components/Text/Text.jsx"></docoff-react-props>
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[span]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span#attributes
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
+[span-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span#attributes
diff --git a/src/components/TextArea/README.md b/src/components/TextArea/README.md
index 08f05906..27055a87 100644
--- a/src/components/TextArea/README.md
+++ b/src/components/TextArea/README.md
@@ -317,10 +317,10 @@ It's possible to disable the whole input.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or you can **add whatever HTML attribute
-you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<textarea>`. This enables making the component interactive and
-to helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<textarea>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
 ```docoff-react-preview
 <TextArea
@@ -338,8 +338,10 @@ to helps to improve its accessibility.
 />
 ```
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[textarea] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<textarea>` HTML element attributes][textarea-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -354,6 +356,6 @@ If you provide [ref], it is forwarded to the native HTML `<textarea>` element.
 Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options.
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[textarea]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
+[textarea-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#attributes
diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md
index 9267a8d7..af547a89 100644
--- a/src/components/TextField/README.md
+++ b/src/components/TextField/README.md
@@ -445,10 +445,10 @@ It's possible to disable the whole input.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or you can **add whatever HTML attribute
-you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<input>`. This enables making the component interactive and
-helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<input>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
 ```docoff-react-preview
 <TextField
@@ -481,9 +481,14 @@ helps to improve its accessibility.
 />
 ```
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[text][input-text], [email][input-email], [number][input-number],
-[tel][input-tel], and [password][input-password] input types.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="text" />` HTML element attributes][input-text]{:target="_blank"}
+- [`<input type="email" />` HTML element attributes][input-email]{:target="_blank"}
+- [`<input type="number" />` HTML element attributes][input-number]{:target="_blank"}
+- [`<input type="tel" />` HTML element attributes][input-tel]{:target="_blank"}
+- [`<input type="password" />` HTML element attributes][input-password]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -508,5 +513,5 @@ Head to [Forms Theming][theming-forms] to see shared form theming options.
 [input-tel]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel#additional_attributes
 [input-password]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/password#additional_attributes
 [theming-forms]: /docs/customize/theming/forms
-[React synthetic events]: https://reactjs.org/docs/events.html
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
diff --git a/src/components/TextLink/README.md b/src/components/TextLink/README.md
index efc4fcb3..6a4feda7 100644
--- a/src/components/TextLink/README.md
+++ b/src/components/TextLink/README.md
@@ -47,13 +47,15 @@ It's common to use custom function for routing within SPAs. Use the
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the `<a>` HTML
-element. This enables making the component interactive and helps to improve its
-accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<a>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[a] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<a>` HTML element attributes][a-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -70,5 +72,5 @@ accessibility.
 | `--rui-TextLink--active__color`           | Text color in the active state      |
 | `--rui-TextLink--active__text-decoration` | Text decoration in the active state |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[a]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
+[a-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
diff --git a/src/components/Toggle/README.md b/src/components/Toggle/README.md
index 193c7f3a..f51e512f 100644
--- a/src/components/Toggle/README.md
+++ b/src/components/Toggle/README.md
@@ -168,13 +168,15 @@ Disabled state makes the input unavailable.
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or you can **add whatever HTML attribute
-you like.** All attributes that don't interfere with the API are forwarded to
-the native HTML `<input>`. This enables making the component interactive and
-helps to improve its accessibility.
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<input>` HTML
+element. This enables making the component interactive and helps to improve
+its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[checkbox] input type.
+👉 For the full list of supported attributes refer to:
+
+- [`<input type="checkbox" />` HTML element attributes][checkbox-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## Forwarding ref
 
@@ -199,6 +201,6 @@ options. On top of that, the following options are available for Toggle.
 | `--rui-FormField--check__input--toggle--checked__background-image` | Background image of checked input              |
 | `--rui-FormField--check__input--toggle--checked__background-position` | Background position of checked input        |
 
-[React synthetic events]: https://reactjs.org/docs/events.html
-[checkbox]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_attributes
+[checkbox-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#additional_attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props
 [ref]: https://reactjs.org/docs/refs-and-the-dom.html
diff --git a/src/components/Toolbar/README.md b/src/components/Toolbar/README.md
index b44f4b49..8e079351 100644
--- a/src/components/Toolbar/README.md
+++ b/src/components/Toolbar/README.md
@@ -322,13 +322,15 @@ Or to build a classic media layout with image on the left and text on the right:
 ## Forwarding HTML Attributes
 
 In addition to the options below in the [component's API](#api) section, you
-can specify [React synthetic events] or **any HTML attribute you like.** All
-attributes that don't interfere with the API are forwarded to the root `<div>`
-HTML element. This enables making the component interactive and helps to improve
+can specify **any HTML attribute you like.** All attributes that don't interfere
+with the API of the React component are forwarded to the root `<div>` HTML
+element. This enables making the component interactive and helps to improve
 its accessibility.
 
-👉 Refer to the MDN reference for the full list of supported attributes of the
-[div] element.
+👉 For the full list of supported attributes refer to:
+
+- [`<div>` HTML element attributes][div-attributes]{:target="_blank"}
+- [React common props]{:target="_blank"}
 
 ## API
 
@@ -353,7 +355,7 @@ A wrapper for individual toolbar items.
 | `--rui-Toolbar__gap`                                 | Gap between toolbar items                                    |
 | `--rui-Toolbar__gap--dense`                          | Dense gap between toolbar items                              |
 
+[div-attributes]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
 [grid]: /components/Grid
 [text]: /components/Text
-[React synthetic events]: https://reactjs.org/docs/events.html
-[div]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div#attributes
+[React common props]: https://react.dev/reference/react-dom/components/common#common-props