According to [the explainer](https://wicg.github.io/aom/aria-reflection-explainer.html#multi-valued-array-relationship-attributes-are-supported), we should be able to set attributes programmatically for `element.ariaLabelledByElements` and then get back the references using `getAttribute()` - provided the referenced elements are in the DOM and have an id. This does not appear to work, at least on MDN. This code does not log the references: ```html <span id="label_1">Street name</span> <input /> <span id="label_2">(just the name, no "Street" or "Road" or "Place")</span> ``` ```js const inputElement = document.querySelector("input"); const label1Element = document.querySelector("#label_1"); const label2Element = document.querySelector("#label_2"); // Feature test for ariaLabelledByElements if ("ariaLabelledByElements" in Element.prototype) { inputElement.ariaLabelledByElements = [label1Element, label2Element]; log(`Labeled elements: ${inputElement.getAttribute("aria-labelledby")}`); } ``` You can see this in action as the second example in https://pr38678.review.mdn.allizom.net/en-US/docs/Web/API/Element/ariaLabelledByElements#assign_the_accessible_name_programmatically
Bug 1919102 Comment 11 Edit History
Note: The actual edited comment in the bug view page will always show the original commenter’s name and original timestamp.
According to [the explainer](https://wicg.github.io/aom/aria-reflection-explainer.html#multi-valued-array-relationship-attributes-are-supported), we should be able to set attributes programmatically for `element.ariaLabelledByElements` and then get back the references using `getAttribute()` - provided the referenced elements are in the DOM and have an id - "sprouting". This does not appear to work, at least on MDN. This code does not log the references: ```html <span id="label_1">Street name</span> <input /> <span id="label_2">(just the name, no "Street" or "Road" or "Place")</span> ``` ```js const inputElement = document.querySelector("input"); const label1Element = document.querySelector("#label_1"); const label2Element = document.querySelector("#label_2"); // Feature test for ariaLabelledByElements if ("ariaLabelledByElements" in Element.prototype) { inputElement.ariaLabelledByElements = [label1Element, label2Element]; log(`Labeled elements: ${inputElement.getAttribute("aria-labelledby")}`); } ``` You can see this in action as the second example in https://pr38678.review.mdn.allizom.net/en-US/docs/Web/API/Element/ariaLabelledByElements#assign_the_accessible_name_programmatically
According to [the explainer](https://wicg.github.io/aom/aria-reflection-explainer.html#multi-valued-array-relationship-attributes-are-supported), we should be able to set attributes programmatically for `element.ariaLabelledByElements` and then get back the references using `getAttribute()` - provided the referenced elements are in the DOM and have an id - "sprouting". This does not appear to work, at least on MDN. This code does not log the references: ```html <span id="label_1">Street name</span> <input /> <span id="label_2">(just the name, no "Street" or "Road" or "Place")</span> ``` ```js const inputElement = document.querySelector("input"); const label1Element = document.querySelector("#label_1"); const label2Element = document.querySelector("#label_2"); // Feature test for ariaLabelledByElements if ("ariaLabelledByElements" in Element.prototype) { inputElement.ariaLabelledByElements = [label1Element, label2Element]; log(`Labeled elements: ${inputElement.getAttribute("aria-labelledby")}`); } ``` You can see this in action as the second example in https://pr38678.review.mdn.allizom.net/en-US/docs/Web/API/Element/ariaLabelledByElements#assign_the_accessible_name_programmatically I'm also seeing hte same result when I try set the active descendant programmatically - this causes `getAttribute()` to return an empty string.
Is "sprouting" of attributes from properties supported? According to [the explainer](https://wicg.github.io/aom/aria-reflection-explainer.html#multi-valued-array-relationship-attributes-are-supported), we should be able to set attributes programmatically for `element.ariaLabelledByElements` and then get back the references using `getAttribute()` - provided the referenced elements are in the DOM and have an id. This does not appear to work, at least on MDN. This code does not log the references: ```html <span id="label_1">Street name</span> <input /> <span id="label_2">(just the name, no "Street" or "Road" or "Place")</span> ``` ```js const inputElement = document.querySelector("input"); const label1Element = document.querySelector("#label_1"); const label2Element = document.querySelector("#label_2"); // Feature test for ariaLabelledByElements if ("ariaLabelledByElements" in Element.prototype) { inputElement.ariaLabelledByElements = [label1Element, label2Element]; log(`Labeled elements: ${inputElement.getAttribute("aria-labelledby")}`); } ``` You can see this in action as the second example in https://pr38678.review.mdn.allizom.net/en-US/docs/Web/API/Element/ariaLabelledByElements#assign_the_accessible_name_programmatically I'm also seeing the same result when I try set the active descendant programmatically - this causes `getAttribute()` to return an empty string.