Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

173
Views
The aria-expanded shows false even when the element is expanded

I want to know why the aria is not expanded when clicking.

<div 
    class="tooltip filter-tooltip" 
    tabindex="0" 
    role="button" 
    aria-label="Vaccine Brand More Information" 
    aria-expanded="false" 
    aria-controls="filter_dialog"
\>
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

That attribute won't change its value by itself. You need to add some steps to your script that change the attribute to "true" when you click the element to expand, and back to "false" when you click again to close it.

about 4 years ago · Juan Pablo Isaza Report

0

ARIA is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities.

Aria expanded

The aria-expanded attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not its child elements are displayed or hidden.

So you're the one supposed to change that value based on whether the content is expanded.

Aria owns

There are two declarations that can be applied to objects that control the visibility of another object: aria-controls, or aria-owns combined with aria-expanded.

If an element visually, functionally, or contextually appears to "own" (be an ancestor of) an element, but isn't actually an ancestor of the element in the DOM, include the aria-owns to create that relationship.

So you also need to add aria-owns which includes the id of the children if you're going to use aria-expanded.

<div 
  class="tooltip filter-tooltip" 
  tabindex="0" 
  role="button" 
  aria-label="Vaccine Brand More Information" 
  aria-expanded="false" 
  aria-controls="filter_dialog"
  aria-owns="children"
\>
<div id="children"> 
  ...
</div> 
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!