Re: question about use of aria-owns

I wonder whether aria-controls might be more appropriate in this case.


Aria-controls (property)

Identifies the element<https://www.w3.org/TR/wai-aria-1.2/#dfn-element> (or elements) whose contents or presence are controlled by the current element. See related aria-owns<https://www.w3.org/TR/wai-aria-1.2/#aria-owns>.

For example:

-A table of contents tree view may control the content of a neighboring document pane.

-A group of checkboxes may control what commodity prices are tracked live in a table or graph.

-A tab controls the display of its associated tab panel.

https://www.w3.org/TR/wai-aria-1.2/#aria-controls



Peter

--
Peter Weil, Web Developer
University Marketing
University of Wisconsin–Madison
peter.weil@wisc.edu
(m) 608-220-3089

On Apr 26, 2021, 2:57 AM -0500, rasmussen.bryan@gmail.com <rasmussen.bryan@gmail.com>, wrote:
I have two related areas of the DOM, a date selector which is a list
of dates for a week forward and back, and an episode guide, which is
all the videos available for a streaming service during those dates.

By default when you load the current date is selected.
but when you click another date in the date selector of course it
changes the view of the episode guide·

I thought it would be reasonable to represent that relationship with
an aria-owns - like so

<button class="DateSelector_button__8asrw typography_nav__1QBLw"
data-state-active="false" aria-label="Vis programoversigt for lørdag,
den 24. april." aria-owns="epg">24<span>lør</span></button>

but since there are multiple buttons I find that weird, because it
implies that the epg section is the child of multiple parents. Is
there a way I can specify that the button owns the epg when it is
selected/active whatever?
If not how would you represent this state?

The epg comes directly after the date selector and they are both
children of a section identified as a TV Guide so it might be that
representing this relationship is not that important - structure sort
of like (lots of stuff removed as not relevant to subject at hand)

<section><h3>TV GUiDE</h3><div role="tablist" aria-label="Select what
part of the tv guide you want to see by date, by default current date
is selected">....</div><div class="epgcontainer"><div
class="epginfomodal" role="dialog">...</div><section id="epg"
aria-label="episodes">...</section></div></section>

Thanks,
Bryan Rasmussen