[BUG]: Accessible Name Mismatch Error: Fails with Spaces in aria-label vs Visible Label Text

[oyeharry]

Project

extension-checker

Browser

Chrome

Operating system

MacOS

Description

The accessibility checker incorrectly flags buttons where the aria-label attribute contains spaces compared to the visible text. Specifically, it passes validation if the accessible name matches the concatenated visible text exactly (without added spaces) but fails if spaces are added for clarity. This is specific to child nodes scenario tested on button element.

Let me know if you consider this as valid bug.

Thanks for the great tool!

Steps to reproduce

1. Use the following button HTML structure in your code or use this URL https://cr2463.csb.app/ :

<button type="button" id="count-badge-1-button" title="Click here to see notification. 2 Notification available." aria-label="Click here to see notification. 2 Notification available." > <span> <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" color="primary" viewBox="0 0 24 24" style="width: 24px; height: 24px" > <g fill="none" fill-rule="evenodd"> <path d="M0 0h24v24H0z"></path> <path d="M16 16.5H8v-6C8 8.02 9.51 6 12 6s4 2.02 4 4.5v6zm2 0v-6c0-3.07-1.63-5.64-4.5-6.32V3.5c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 4.86 6 7.42 6 10.5v6H4.99a.99.99 0 00-.99.99v.02c0 .547.443.99.99.99h14.02a.99.99 0 00.99-.99v-.02a.99.99 0 00-.99-.99H18zm-6 5c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2z" fill="#000" ></path> </g></svg ><span>2</span></span > Notification</button>

2. Run the accessibility checker from chrome extension.

3. Observe the violation stating:
   "Accessible name does not match or contain the visible label text".

4. Update aria-label to remove the space between "2 Notification":
   <button aria-label="Click here to see notification. 2Notification available.">

5. Run the checker again.

6. Notice that the violation no longer occurs.

[MHoov]

Possible dup of #2122

[shunguoy]

dup to #2122