jackocnr/intl-tel-input

Mismatched ARIA Attributes and Roles in intl-tel-input

Closed this issue · 3 comments

rashadmehtab commented

During accessibility testing using Lighthouse, I encountered an error regarding mismatched ARIA attributes and roles in the intl-tel-input component.

Issue found here:

<div class="iti__selected-flag" aria-expanded="false" aria-label="Selected country" aria-haspopup="true" aria-controls="iti-0__dropdown-content" tabindex="0">

Additional Information:

  • Version of intl-tel-input used: 20.0.4.
  • This issue impacts the accessibility of intl-tel-input and needs to be addressed to ensure compliance with accessibility standards.
jackocnr commented

Thanks for reporting this. Can you tell me which initialisation options you were using?

And what exactly is the mismatch?

rashadmehtab commented

image

Please run live demo in page speed you will get the issue: https://pagespeed.web.dev/analysis/https-intl-tel-input-com/nkiaqnnx19?form_factor=desktop

Options I have used:

        const options={
          preferredCountries: ["AE"],
          separateDialCode: true,
          lazyLoading: true,
          showFlags:true,
          showSelectedDialCode:true,
          placeholderNumberType: "MOBILE",
          utilsScript: utilsScript,
          initialCountry:"AE",
        }
jackocnr commented

Fix released in v20.0.5

  • ❤️1