-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Proposal]: Enable HTMLElement
attributes to be toggled without JavaScript
#10357
Comments
Did you see #9625? |
I did not, though this isn't necessarily related to dialogs/popups. I can take a look at the OP and the comments. |
@annevk I tried to skim through that issue, and it seemed like it is restricted to In my skimming, I came across openui/open-ui#1058 and openui/open-ui#700. @scottaohara's OP in Issue 700 definitely shares my sentiment, as I would also like something that isn't restricted to the Top Layer or to |
I think it's okay to leave this open. That other issue has the momentum currently though and I would not expect us to add several very similar mechanisms. |
Got it! I'll try to add a comment to that issue when I get a chance then -- hopefully today or tomorrow. (I'm assuming you're referring to the |
What problem are you trying to solve?
It's common for applications to create content that can be accessibly expanded/collapsed with the
aria-expanded
attribute. Unfortunately, there is no native way to toggle this attribute without JavaScript today. Consequently, there are several rich user experiences that are currently unaccessible to people without JavaScript.With the power of CSS selectors (especially now that we have
:has()
on the scene), we can pretty much "expand" any element with just CSS. Below is a simple example:So all that we really need in order to make elements expandable without JS is a feature that would enable an attribute to be toggled without JS. It would be spectacular if that could be supported! 🙏🏾
What solutions exist today?
Bad: Navigation
One existing solution is to create a link that acts like an expandable button by navigating to a URL where the content is already expanded.
However, this approach has a few significant problems:
Slightly Better but Limited: Hacking the
<details>
ElementTheoretically, now that we have
:has()
, it would be possible to hack the<details>
element to accomplish the desired behavior witharia-owns
in the event that the content does not visually live inside the<details>
element.Then the CSS would potentially look something like this:
This is significantly more preferable than awkwardly chatting with the server, but this approach still has other significant caveats:
(Edit: It looks like VoiceOver very recently got support for this attribute.)aria-owns
is not supported by VoiceOver.How would you solve it?
The Popover API seems like a potential source of inspiration. HTML attributes could be used to determine how an element's attributes should be changed when a button is clicked.
This is just one potential solution. I'm certain there are other alternatives.
Anything else?
Multiple Buttons Expanding/Collapsing the Same Element
There might be situations where multiple elements on the same page would be able to control the same element's visibility. In that case, there would need to be a way to "link" all of them together. I'm not sure what a good solution would look like. But off the top of my head, one potential idea is to use another attribute that can group together a set of controls (just like radio buttons are grouped by
name
).Doing More Than Attribute Toggling
It's possible that what's really surfacing from this feature proposal is a way to control attributes without JavaScript in a more broad sense. However, I'm not immediately certain what the use cases for that would be. It's just a thought.
The text was updated successfully, but these errors were encountered: