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

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions