foundation / foundation/yeti

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

Open
#12,604 0 comments 1 reaction 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.