[Toggler] aria-expanded toggles opposite to the controlled element if hidden initially
- Dominant language
- JavaScript
- Stars
- 29.8k
- Forks
- 5.4k
- Avg merge
- 25m
- Merged PRs (30d)
- 1
Description
## Expected Behavior
It should be possible to set up a Toggler so that the toggled element is hidden initially, then toggled open, and aria-expanded should follow from false to true, not the other way around.
## Current Behavior
I want to have a Toggler that opens an element at first click.
Toggler seems to always assume that the toggled element is visible initially, and forces aria-expanded=true (in 6.8.1) on it, even if I have explicitly set an "aria-expanded=false" on the elements.
"The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden."
...
## Possible Solution
If the controlling element has "aria-expanded=false" on a Toggler, then it should not change it - instead toggle it to true when toggled the first time.
(Or invent a new data- attribute for this, like "data-toggler-expaned=false")
...
## Test Case and/or Steps to Reproduce (for bugs)
Test Case: https://codepen.io/clindh/pen/dyazyqe
How to reproduce:
1.
2.
3.
## Context
I use the toggler to pop up extra information blocks etc, and changing properties of the controlling toggler with css (like an up/down button). I tried using "aria-expanded" attribute to control in css if it is open or not, but notices it is true when my element is hidden and vice versa.
I can work around that, but for accesibility it would be nice if aria-expanded followed the visibility state.
...
## Your Environment
- Foundation version(s) used: 6.8.1
- Browser(s) name and version(s): Chrome 119.0.6045.105 (Official Build) (arm64)
- Device, Operating System and version: macOS 12.4
- Link to your project:
## Checklist
- [x] I have read and follow the CONTRIBUTING.md document.
- [x] This is a bug report or a feature request.
- [x] There are no other issues similar to this one.
- [x] The issue title and template are correctly filled.
Contributor guide
Research direction
Start with the linked CodePen reproduction and the Toggler entry point, focusing on an initially hidden controlled element and its aria-expanded state in Foundation 6.8.1. Done means the control remains false while the element is hidden and changes to true on the first toggle, matching the reported expected behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100