diff --git a/files/en-us/web/accessibility/aria/attributes/aria-colindextext/index.md b/files/en-us/web/accessibility/aria/attributes/aria-colindextext/index.md index a66ce7a03895c6b..cbe3f962d5cc8f9 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-colindextext/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-colindextext/index.md @@ -68,6 +68,13 @@ See related [`aria-rowindextext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/ - `` - The human-readable text alternative of the numeric [`aria-colindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) +## ARIAMixin API + +- {{domxref("Element.ariaColIndexText")}} + - : The [`ariaColIndexText`](/en-US/docs/Web/API/Element/ariaColIndexText) property, part of the {{domxref("Element")}} interface, reflects the value of the `aria-colindextext` attribute. +- {{domxref("ElementInternals.ariaColIndexText")}} + - : The [`ariaColIndexText`](/en-US/docs/Web/API/ElementInternals/ariaColIndexText) property, part of the {{domxref("ElementInternals")}} interface, reflects the value of the `aria-colindextext` attribute. + ## Associated roles Used in roles: @@ -85,6 +92,7 @@ Inherits into roles: ## See Also +- [`Element.ariaColIndexText`](/en-US/docs/Web/API/Element/ariaColIndexText) - [`aria-colindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) - [`aria-rowindextext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext) - [`aria-colcount`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) diff --git a/files/en-us/web/accessibility/aria/attributes/aria-rowindextext/index.md b/files/en-us/web/accessibility/aria/attributes/aria-rowindextext/index.md index 4bc799accc2f2c8..97b24981f1d4b0d 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-rowindextext/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-rowindextext/index.md @@ -20,6 +20,13 @@ The `aria-rowindextext` is added to each {{HTMLElement('tr')}} or to elements wi - `` - The human-readable text alternative of the numeric [`aria-rowindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) +## ARIAMixin API + +- {{domxref("Element.ariaRowIndexText")}} + - : The [`ariaRowIndexText`](/en-US/docs/Web/API/Element/ariaRowIndexText) property, part of the {{domxref("Element")}} interface, reflects the value of the `aria-rowindextext` attribute. +- {{domxref("ElementInternals.ariaRowIndexText")}} + - : The [`ariaRowIndexText`](/en-US/docs/Web/API/ElementInternals/ariaRowIndexText) property, part of the {{domxref("ElementInternals")}} interface, reflects the value of the `aria-rowindextext` attribute. + ## Associated roles Used in roles: diff --git a/files/en-us/web/api/element/ariacolindextext/index.md b/files/en-us/web/api/element/ariacolindextext/index.md new file mode 100644 index 000000000000000..e9433e23806b7db --- /dev/null +++ b/files/en-us/web/api/element/ariacolindextext/index.md @@ -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 + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Semantic Elements to use instead of ARIA's roles +
+ ARIA Role + + Semantic Element +
headerh1
headerh6
rowgroupthead
termdt
+``` + +```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) diff --git a/files/en-us/web/api/element/ariarowindextext/index.md b/files/en-us/web/api/element/ariarowindextext/index.md new file mode 100644 index 000000000000000..25399450428791b --- /dev/null +++ b/files/en-us/web/api/element/ariarowindextext/index.md @@ -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 + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Semantic Elements to use instead of ARIA's roles +
+ ARIA Role + + Semantic Element +
headerh1
headerh6
rowgroupthead
termdt
+``` + +```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) diff --git a/files/en-us/web/api/element/index.md b/files/en-us/web/api/element/index.md index 73c8bfec634d3e6..015df0204f4ec51 100644 --- a/files/en-us/web/api/element/index.md +++ b/files/en-us/web/api/element/index.md @@ -102,6 +102,8 @@ _The `Element` interface includes the following properties, defined on the `ARIA - : A string reflecting the [`aria-colcount`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) attribute, which defines the number of columns in a table, grid, or treegrid. - {{domxref("Element.ariaColIndex")}} - : A string reflecting the [`aria-colindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. +- {{domxref("Element.ariaColIndexText")}} + - : A string reflecting the [`aria-colindextext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext) attribute, which defines a human readable text alternative of aria-colindex. - {{domxref("Element.ariaColSpan")}} - : A string reflecting the [`aria-colspan`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. - {{domxref("Element.ariaCurrent")}} @@ -150,6 +152,8 @@ _The `Element` interface includes the following properties, defined on the `ARIA - : A string reflecting the [`aria-rowcount`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) attribute, which defines the total number of rows in a table, grid, or treegrid. - {{domxref("Element.ariaRowIndex")}} - : A string reflecting the [`aria-rowindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) attribute, which defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. +- {{domxref("Element.ariaRowIndexText")}} + - : A string reflecting the [`aria-rowindextext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext) attribute, which defines a human readable text alternative of aria-rowindex. - {{domxref("Element.ariaRowSpan")}} - : A string reflecting the [`aria-rowspan`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. - {{domxref("Element.ariaSelected")}} diff --git a/files/en-us/web/api/elementinternals/ariacolindextext/index.md b/files/en-us/web/api/elementinternals/ariacolindextext/index.md new file mode 100644 index 000000000000000..8787349d0f8ed64 --- /dev/null +++ b/files/en-us/web/api/elementinternals/ariacolindextext/index.md @@ -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) diff --git a/files/en-us/web/api/elementinternals/ariarowindextext/index.md b/files/en-us/web/api/elementinternals/ariarowindextext/index.md new file mode 100644 index 000000000000000..ac614be804b4f8a --- /dev/null +++ b/files/en-us/web/api/elementinternals/ariarowindextext/index.md @@ -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) diff --git a/files/en-us/web/api/elementinternals/index.md b/files/en-us/web/api/elementinternals/index.md index 297058d9d0a5c23..c3d3f467460a051 100644 --- a/files/en-us/web/api/elementinternals/index.md +++ b/files/en-us/web/api/elementinternals/index.md @@ -49,6 +49,8 @@ The `ElementInternals` interface includes the following properties, defined on t - : A string reflecting the [`aria-colcount`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) attribute, which defines the number of columns in a table, grid, or treegrid. - {{domxref("ElementInternals.ariaColIndex")}} - : A string reflecting the [`aria-colindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) attribute, which defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. +- {{domxref("ElementInternals.ariaColIndexText")}} + - : A string reflecting the [`aria-colindextext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindextext) attribute, which defines a human readable text alternative of aria-colindex. - {{domxref("ElementInternals.ariaColSpan")}} - : A string reflecting the [`aria-colspan`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colspan) attribute, which defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. - {{domxref("ElementInternals.ariaCurrent")}} @@ -99,6 +101,8 @@ The `ElementInternals` interface includes the following properties, defined on t - : A string reflecting the [`aria-rowcount`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) attribute, which defines the total number of rows in a table, grid, or treegrid. - {{domxref("ElementInternals.ariaRowIndex")}} - : A string reflecting the [`aria-rowindex`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) attribute, which defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. +- {{domxref("ElementInternals.ariaRowIndexText")}} + - : A string reflecting the [`aria-rowindextext`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindextext) attribute, which defines a human readable text alternative of aria-rowindex. - {{domxref("ElementInternals.ariaRowSpan")}} - : A string reflecting the [`aria-rowspan`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowspan) attribute, which defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. - {{domxref("ElementInternals.ariaSelected")}}