[Toggler] Incorrect use of aria-expanded attribute invalids accessibility compliance

[fleps]

How to reproduce this bug:

1. Configure Toggler plugin using any of the steps described on the documentation
2. Open the page and check the generated code

What should happen:

The aria-expanded attribute is being set on the element that contains the expandable content / is being expanded.

What happened instead:

This attribute must be set on the element that expands and collapses content, not on the content that is expanded or collapsed.

Note: The information above came directly from a specialized company that audits WCAG Accessibility and they mentioned that this is a common mistake / miss-use of the aria-expanded attribute.

Foundation Version(s) you are using:

6.4.1

Test case link:

https://codepen.io/anon/pen/rdxagp

[fleps]

Additions

I investigated the plugin and fixed on my side, as we are on a hurry to have valid AA compliance. Maybe this helps for a future fix:

On the init function, changed from this:

var id = this.$element[0].id;
$('[data-open="' + id + '"], [data-close="' + id + '"], [data-toggle="' + id + '"]').attr('aria-controls', id);
// If the target is hidden, add aria-hidden
this.$element.attr('aria-expanded', this.$element.is(':hidden') ? false : true);

To this:

// Add ARIA attributes to triggers
var id = this.$element[0].id;
$('[data-open="' + id + '"], [data-close="' + id + '"], [data-toggle="' + id + '"]').attr({
    'aria-controls': id,
    'aria-expanded': this.$element.is(':hidden') ? false : true
});
// The line below is no longer needed and was actually saying "aria-hidden" while it adds "aria-expanded"
//this.$element.attr('aria-expanded', this.$element.is(':hidden') ? false : true);

And also a change on the _updateARIA function is needed to this:

var id = this.$element[0].id;
$('[data-open="' + id + '"], [data-close="' + id + '"], [data-toggle="' + id + '"]').attr('aria-expanded', isOn ? true : false);

[fleps]

Hi @DanielRuf, I saw the open PR but I have the impression that it will fix only the initial attribute set.

Doesn't the _updateARIA function needs to be changed also to toggle aria-expanded true/false on the trigger, or i'm reading it wrong?

[DanielRuf]

You are right. I've updated the PR and tests accordingly.