forked from mdn/content
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add documentation for Element(Internals).aria[Col/Row]IndexText (mdn#…
…30261) * Revert "Remove documentation for api.Element(Internals).aria[Col/Row]IndexText (mdn#23489)" This reverts commit ad62351. * Fix linting issues * Fix flaw
- Loading branch information
Showing
8 changed files
with
270 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| --- | ||
| title: Element.ariaColIndexText | ||
| slug: Web/API/Element/ariaColIndexText | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.Element.ariaColIndexText | ||
| --- | ||
|
|
||
| {{DefaultAPISidebar("DOM")}} | ||
|
|
||
| The **`ariaColIndexText`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-colindextext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext) attribute, which defines a human readable text alternative of aria-colindex. | ||
|
|
||
| ## Value | ||
|
|
||
| A string. | ||
|
|
||
| ## Examples | ||
|
|
||
| In this example the `aria-colindex` attribute on the element with an ID of `role-heading` is set to "Aria Role column". Using `ariaColIndexText` we update the value to the string "New column name". | ||
|
|
||
| ```html | ||
| <table | ||
| id="semantic-table" | ||
| role="table" | ||
| aria-label="Semantic Elements" | ||
| aria-describedby="semantic_elements_table_desc" | ||
| aria-rowcount="100"> | ||
| <caption id="semantic_elements_table_desc"> | ||
| Semantic Elements to use instead of ARIA's roles | ||
| </caption> | ||
| <thead role="rowgroup"> | ||
| <tr role="row"> | ||
| <th | ||
| role="columnheader" | ||
| id="role-heading" | ||
| aria-sort="none" | ||
| aria-rowindex="1" | ||
| aria-colindex="1" | ||
| aria-colindextext="Aria Role column"> | ||
| ARIA Role | ||
| </th> | ||
| <th | ||
| role="columnheader" | ||
| id="element-heading" | ||
| aria-sort="none" | ||
| aria-rowindex="1"> | ||
| Semantic Element | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody role="rowgroup"> | ||
| <tr role="row"> | ||
| <td role="cell" aria-rowindex="11">header</td> | ||
| <td role="cell" aria-rowindex="11">h1</td> | ||
| </tr> | ||
| <tr role="row"> | ||
| <td role="cell" aria-rowindex="16">header</td> | ||
| <td role="cell" aria-rowindex="16">h6</td> | ||
| </tr> | ||
| <tr role="row"> | ||
| <td role="cell" aria-rowindex="18">rowgroup</td> | ||
| <td role="cell" aria-rowindex="18">thead</td> | ||
| </tr> | ||
| <tr role="row"> | ||
| <td role="cell" aria-rowindex="24">term</td> | ||
| <td role="cell" aria-rowindex="24">dt</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| ``` | ||
|
|
||
| ```js | ||
| let el = document.getElementById("role-heading"); | ||
| console.log(el.ariaColIndexText); // "Aria Role" | ||
| el.ariaColIndexText = "New column name"; | ||
| console.log(el.ariaColIndexText); // "New column name" | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - [ARIA: table role](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| --- | ||
| title: Element.ariaRowIndexText | ||
| slug: Web/API/Element/ariaRowIndexText | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.Element.ariaRowIndexText | ||
| --- | ||
|
|
||
| {{DefaultAPISidebar("DOM")}} | ||
|
|
||
| The **`ariaRowIndexText`** property of the {{domxref("Element")}} interface reflects the value of the [`aria-rowindextext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext) attribute, which defines a human readable text alternative of aria-rowindex. | ||
|
|
||
| ## Value | ||
|
|
||
| A string. | ||
|
|
||
| ## Examples | ||
|
|
||
| In this example the `aria-rowindextext` attribute on the element with an ID of `role-heading` is set to "Heading row". Using `ariaRowIndexText` we update the value to "Updated heading row". | ||
|
|
||
| ```html | ||
| <table | ||
| id="semantic-table" | ||
| role="table" | ||
| aria-label="Semantic Elements" | ||
| aria-describedby="semantic_elements_table_desc" | ||
| aria-rowcount="100"> | ||
| <caption id="semantic_elements_table_desc"> | ||
| Semantic Elements to use instead of ARIA's roles | ||
| </caption> | ||
| <thead role="rowgroup"> | ||
| <tr role="row"> | ||
| <th | ||
| role="columnheader" | ||
| id="role-heading" | ||
| aria-sort="none" | ||
| aria-rowindex="1" | ||
| aria-rowindextext="Heading row"> | ||
| ARIA Role | ||
| </th> | ||
| <th | ||
| role="columnheader" | ||
| id="element-heading" | ||
| aria-sort="none" | ||
| aria-rowindex="1"> | ||
| Semantic Element | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody role="rowgroup"> | ||
| <tr role="row"> | ||
| <td role="cell" aria-rowindex="11">header</td> | ||
| <td role="cell" aria-rowindex="11">h1</td> | ||
| </tr> | ||
| <tr role="row"> | ||
| <td role="cell" aria-rowindex="16">header</td> | ||
| <td role="cell" aria-rowindex="16">h6</td> | ||
| </tr> | ||
| <tr role="row"> | ||
| <td role="cell" aria-rowindex="18">rowgroup</td> | ||
| <td role="cell" aria-rowindex="18">thead</td> | ||
| </tr> | ||
| <tr role="row"> | ||
| <td role="cell" aria-rowindex="24">term</td> | ||
| <td role="cell" aria-rowindex="24">dt</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| ``` | ||
|
|
||
| ```js | ||
| let el = document.getElementById("role-heading"); | ||
| console.log(el.ariaRowIndexText); // "Heading row" | ||
| el.ariaRowIndexText = "Updated heading row"; | ||
| console.log(el.ariaRowIndexText); // "Updated heading row" | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - [ARIA: table role](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
files/en-us/web/api/elementinternals/ariacolindextext/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| --- | ||
| title: ElementInternals.ariaColIndexText | ||
| slug: Web/API/ElementInternals/ariaColIndexText | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.ElementInternals.ariaColIndexText | ||
| --- | ||
|
|
||
| {{DefaultAPISidebar("DOM")}} | ||
|
|
||
| The **`ariaColIndexText`** property of the {{domxref("ElementInternals")}} interface reflects the value of the [`aria-colindextext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext) attribute, which defines a human readable text alternative of aria-colindex. | ||
|
|
||
| > **Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the [Accessibility Object Model explainer](https://wicg.github.io/aom/explainer.html#default-semantics-for-custom-elements-via-the-elementinternals-object). | ||
| ## Value | ||
|
|
||
| A string. | ||
|
|
||
| ## Examples | ||
|
|
||
| In this example the value of `ariaColIndexText` is set to "Column name". | ||
|
|
||
| ```js | ||
| this.internals_.ariaColIndexText = "Column name"; | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - [ARIA: table role](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role) |
36 changes: 36 additions & 0 deletions
36
files/en-us/web/api/elementinternals/ariarowindextext/index.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| --- | ||
| title: ElementInternals.ariaRowIndexText | ||
| slug: Web/API/ElementInternals/ariaRowIndexText | ||
| page-type: web-api-instance-property | ||
| browser-compat: api.ElementInternals.ariaRowIndexText | ||
| --- | ||
|
|
||
| {{DefaultAPISidebar("DOM")}} | ||
|
|
||
| The **`ariaRowIndexText`** property of the {{domxref("ElementInternals")}} interface reflects the value of the [`aria-rowindextext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext) attribute, which defines a human readable text alternative of aria-rowindex. | ||
|
|
||
| > **Note:** Setting aria attributes on `ElementInternals` allows default semantics to be defined on a custom element. These may be overwritten by author-defined attributes, but ensure that default semantics are retained should the author delete those attributes, or fail to add them at all. For more information see the [Accessibility Object Model explainer](https://wicg.github.io/aom/explainer.html#default-semantics-for-custom-elements-via-the-elementinternals-object). | ||
| ## Value | ||
|
|
||
| A string. | ||
|
|
||
| ## Examples | ||
|
|
||
| In this example the value of `ariaRowIndexText` is set to "Heading row". | ||
|
|
||
| ```js | ||
| this.internals_.ariaRowIndexText = "Heading row"; | ||
| ``` | ||
|
|
||
| ## Specifications | ||
|
|
||
| {{Specifications}} | ||
|
|
||
| ## Browser compatibility | ||
|
|
||
| {{Compat}} | ||
|
|
||
| ## See also | ||
|
|
||
| - [ARIA: table role](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters