VTabs "remote control" #152
Replies: 1 comment 2 replies
-
|
Hey, I have a few thoughts here. I think ultimately what you're describing does not match the WAI ARIA description of tabs (https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) since the "tabs" and the "tabpanels" would live apart from each other. With that in mind, it's probably not a feature I'd be open to adding to the library. If you want to build out your own, I have some ideas, though: What you're describing sound like it should follow the specs of a disclosure or dialog where you'd use aria-controls and aria-expanded to hint about the state of the hidden items (https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/) Alternatively, the VTabs component does accept a Or if you want, you could also fork the code into your project. I try to make each component quite self contained and easy to work with so folks aren't stuck using the library or can easily modify like this. Hope that helps. Sorry it's not something I can solve at the library level. |
Beta Was this translation helpful? Give feedback.
-
Don't be. I wouldn't want this to be a something for you to integrate for the very reason you wrote, which is why I posted this here (not as a feature request "issue") to get some idea or inspiration on how I could "workaround" it, while nor causing harm to the user experience. Visually and physically the "tabs" would still be above the panels, it's just the required visual integration is a bit tedious and "feels" brittle. I have to mix and style links with buttons literally sitting side by side w/o any of them looking or behaving like they don't belong to the group. I'll have a look at that Thanks for the ideas, Austin! It got me some material to work with. 🙏🏻 |
Beta Was this translation helpful? Give feedback.
-
|
For sure. Glad I could help, and very grateful for folks like you that are using the project. It's been rewarding |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Hello,
we'd like to use VTabs in more places but bypass the tab buttons and trigger the tab switch (
onClickmethod) by some other means from some other element in it's containing (parent) component located outside VTabs.One recurring patter would be a modal dialog with 3-4 radio buttons at the top (nicely styled to look like billboards or fancy buttons with icons and labels) that each should switch to a dedicated tab with a separate form. It'd be nice if the radio buttons could take control of the switch like the regular vtab buttons do.
In other scenarios the page has a "menu bar" somewhere in the middle where a few menu items link to sub sections in the page and others should toggle between 2-3 tabs. The real menu items and the VTabs buttons should look equal and appear in the same row/mnu bar like siblings, but that's hard to achieve without some horribly fragile CSS positioning. Again, it'd be easier if I could drop the tab buttons (physically or visually) and have menu items trigger the tab switch from outside.
Any ideas on how this "remote control" could be done?
Thanks.
Beta Was this translation helpful? Give feedback.
All reactions