652: x button close labels

[JT0Y]

@bacitracin Is this valid/semantic?

<span role="button" tabindex="0" class="blah">
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-label="close 13th Democratic Ward" class="max-h-[80%]">
        <path d="blah"></path>
    </svg>
</span>

My concern here is that the aria-label is not on the outermost element (span). I can't seem to modify this component without modifying the nextui component. I have tested this with V.O and it seems right. V.O can focus & read it without extra stops.

PR addresses #652

[vercel]

Someone is attempting to deploy a commit to the Clean and Green Philly Team on Vercel.

A member of the Team first needs to authorize it.

[bacitracin]

@bacitracin Is this valid/semantic?

<span role="button" tabindex="0" class="blah">
    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256" aria-label="close 13th Democratic Ward" class="max-h-[80%]">
        <path d="blah"></path>
    </svg>
</span>

My concern here is that the aria-label is not on the outermost element (span). I can't seem to modify this component without modifying the nextui component. I have tested this with V.O and it seems right. V.O can focus & read it without extra stops.

@JT0Y Good question! So there's a computation that is done by the browser/user agent that determines the "accessible name" of each element in the DOM (the final name you'll come across in the screenreader). This computation is different depending on the element.

You're right in that it seems weird that this works when you didn't set the aria-label on the span, which is what the focus lands on. But the span has a role set of "button", and that has different rules. Buttons can get their name either from their contents (preferred) or by explicitly setting a name (adding an aria-label to the button tag). Here's some more background info: https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions

[bacitracin]

@JT0Y One more thing - download the Axe Devtools browser extension in order to run quick accessibility scans on each webpage. That will help identify some of the semantic/naming issues and point you towards how to fix them. Here's a link to the Chrome version, but there's a Firefox one too https://www.deque.com/axe/devtools/chrome-browser-extension/

[bacitracin]

👍