[Toggler] aria-expanded toggles opposite to the controlled element if hidden initially

[clindh]

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

• I have read and follow the CONTRIBUTING.md document.
• This is a bug report or a feature request.
• There are no other issues similar to this one.
• The issue title and template are correctly filled.