Skip to content

Accordion block outputs invalid ARIA (aria-expanded on wrapper <div>) #3582

@alinav12

Description

@alinav12

The Accordion block renders markup that violates the WAI-ARIA Authoring Practices and triggers accessibility checker errors. The block places aria-expanded on a non-interactive wrapper <div>.

These patterns cause automated tools (like Accessible Web Helper) to report errors like:
“Elements must only use supported ARIA attributes”
“ARIA attribute is not allowed: aria-expanded=”

Steps to Reproduce:

  1. Add a Stackable → Accordion block to a post/page.
  2. Publish and view the front-end.
  3. Toggle the accordion to update the aria-expanded attribute on the element.
  4. Run an accessibility audit with Accessible Web Helper extension.

Example rendered HTML (trimmed):

<div class="wp-block-ugb-accordion ugb-accordion ..." aria-expanded="false">
  <div class="ugb-inner-block">

Actual Result
aria-expanded is applied to the outer <div class="wp-block-ugb-accordion ..."> (non-interactive).

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions