ff-asn > ff-asn-group > disable-auto-expand results in "[aria-*] attributes do not have valid values"

[view6com]

• FACT-Finder-Web-Components Magento2-Module version (see composer.json): 4.0.2
• Magento edition and version: 2.4.2
• PHP version: 7.2
• Expected behavior: allow value disable-auto-expand="true"
• Actual behavior: value stripped to render 'disable-auto-expand' which is interpreted by browser as disable-auto-expand=""
• Steps to reproduce: run Lighthouse report on FACT Finder search results with Filters, view Accessibility issues

The following file:

/Omikron_Factfinder/templates/ff/asn.phtml

allows the Property 'disable-auto-expand' within ff-asn-group. This property results in the following 'highlighted opportunity to improve experience for assertive users' within a Lighthouse report:

[aria-*] attributes do not have valid values
Assistive technologies, like screen readers, can't interpret ARIA attributes with invalid values.

[a-laurowski]

Hi @view6com
Attribute disable-auto-expand is a boolean attribute and Web Components ignores its values. They uses only the fact this attribute exist or not.
https://web-components.fact-finder.de/api/4.x/ff-asn#tab=api

Correct configuration should be :

Is this incorrect for ARIA?

[view6com]

Hi @a-laurowski,

ARIA requires that an attribute has a valid value.

When we run the Lighthouse report we get the warning:

[aria-*] attributes do not have valid values

If we following the link to: https://web.dev/aria-valid-attr-value/

It says:

"If an element's ARIA attribute doesn't have a valid value, assistive technologies won't be able to interact with it as the developer intended."

We have tried setting the value as below in our stores 'asn.phtml' file:

disable-auto-expand="true"

but we seem to be unable to set this for the 'filter-style' list below:

filter-style="TREE"
filter-style="MULTISELECT"
filter-style="DEFAULT"