Accessibility on the Content Toggle block

For the Content Toggle block, the aria-expanded HTML attribute is on the region that is toggled (<div role="region"> ) rather than on the <div> before that which shows and hides the region. That means that when the toggled region is hidden, there is no aria-expanded attribute for screen readers to read at all. The aria-expanded attribute should instead be on the element that triggers the toggle action, not on the region that is being toggled.

I confirmed this HTML accessibility issue with ChatGPT, and here is what it said:

“To fix this, you’ll need to move the aria-expanded attribute to the <div> that serves as the trigger for toggling visibility… Here’s how you can adjust your HTML [note the last attribute on the second <div>]:

<div class="wp-block-ub-content-toggle-accordion" id="ub-content-toggle-panel-block-d7d143b2-181a-4add-a564-8250fe5339a7">
    <div class="wp-block-ub-content-toggle-accordion-title-wrap" aria-controls="ub-content-toggle-panel-0-5821164e-81d8-4f2d-938c-cb5567d179cb" tabindex="0" aria-expanded="true">
        <h2 class="wp-block-ub-content-toggle-accordion-title ub-content-toggle-title-5821164e-81d8-4f2d-938c-cb5567d179cb">Read what people are saying about the Expo
	</h2>
	<div class="wp-block-ub-content-toggle-accordion-toggle-wrap right"><span class="wp-block-ub-content-toggle-accordion-state-indicator wp-block-ub-chevron-down open"></span>
      </div>
   </div>
   <div role="region" class="wp-block-ub-content-toggle-accordion-content-wrap" id="ub-content-toggle-panel-0-5821164e-81d8-4f2d-938c-cb5567d179cb" style="">[etc.]
   </div>
</div>

“

That means a JavaScript change as well, I suspect.

Otherwise I find your blocks very helpful. Thanks!

The page I need help with: [log in to see the link]