RE: question about use of aria-owns

There are only certain types of content that can be within a button - button's cannot contain other interactive content.  When you use aria-owns you are basically saying these elements are children of the button. As mentioned by others aria-controls would be a more appropriate method to communicate the relationship.

There might be other ways of communicating the change using a verb or aria-live region to communicate an update.

Jonathan

-----Original Message-----
From: bryan rasmussen <rasmussen.bryan@gmail.com> 
Sent: Monday, April 26, 2021 3:52 AM
To: w3c-wai-ig@w3.org
Subject: question about use of aria-owns

CAUTION: This email originated from outside of the organization. Do not click links or open attachments unless you recognize the sender and know the content is safe.


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

Received on Monday, 26 April 2021 19:51:29 UTC