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"
\>
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.
ARIA is a set of attributes that define ways to make web content and web applications more accessible to people with disabilities.
The
aria-expandedattribute 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.
There are two declarations that can be applied to objects that control the visibility of another object:
aria-controls, oraria-ownscombined witharia-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>