feat: toggle #3822
feat: toggle #3822
Conversation
|
|
Since this solution is very implementation specific I've created a new issue to refactor this to a generic solution. |
There was a problem hiding this comment.
As discussed offline, this component seems a great fit for applying the ARIA APG Tabs pattern. It would make sense to follow the Tabs with Manual Activation example. Note for example how the aria-controls attribute would be a great semantic alternative to the current data-target-id.
I understand the time pressure but as discussed before, in its current form it is not fully accessible.
rocky/assets/js/toggleSwitch.js
Outdated
| document | ||
| .getElementById(option.getAttribute("data-target-id")) | ||
| .classList.add("hidden"); |
There was a problem hiding this comment.
I'd say, Hide all of them by applyting a className to it.
And then use the :target selector and the url to show the one being active. that moves the state-management from JS to Css for most of this.
It would not be compatible with nested versions of this component, as selecting a nested 'tab' would hide the parent tab, But I don't think we have that usecase anyway.
There was a problem hiding this comment.
While it would be nice if state management didn't require JS, it's unfortunately not possible to make this fully accessible without using JS to manage ARIA attributes.
@underdarknl could you please verify whether the APG's Tabs pattern aligns with the expected use here, as I suspect? If so I would implore you to follow one of the APG's example implementations. If not, let's look together for fitting ARIA roles and behaviours.
There was a problem hiding this comment.
I do think the Tabs pattern fits this nicely. Do you have a preference on which example to follow? Especially if we want to move this to Manon upstream at some point?
There was a problem hiding this comment.
I don't know the exact context. If switching accidentally would be a problem, manual activation would make sense. For upstream we could add both and make it configurable.
…ed the hard coded option[0]
|
The 'Live filter' doesn't seem to pick up the chosen filtered items. The list of items remains empty with the following filter applied:
The manual selection does pick up the applied filter:
|
Changes
Adds toggle element. Test case is placed within "generate report > Select objects"
Todo:
Issue link
Closes #3812
Demo
Hover:
QA notes
Please review:
Code Checklist
.envchanges files if required and changed the.env-distaccordingly.Checklist for code reviewers:
Copy-paste the checklist from the docs/source/templates folder into your comment.
Checklist for QA:
Copy-paste the checklist from the docs/source/templates folder into your comment.