Bugzilla

After finally being able to catch the callout with the NVDA running, it does appears to be that this is the NVDA behavior when it is not announcing image buttons (refer to [my comment in a similar Shopping bug 1851735](https://bugzilla.mozilla.org/show_bug.cgi?id=1851735#c7)), but the button itself is properly labeled and is announced by NVDA as `Close, button` when focused with a keyboard (at the moment, you have to click on the callout and then press `Tab` to hear it though, per [this discussion in callout bug 1841374](https://bugzilla.mozilla.org/show_bug.cgi?id=1841374#c4))

Thus lowering the a11y-severity to S4, because while the button is not unlabeled (the user would know the purpose of this control, if they navigate there with a keyboard or access it via the screen reader-provided list of buttons), but we still could try to use an image with `alt` text - this seems to resolve the issue and hovered image button provides expected label announcement, i.e. in the following test case (CSS-provided images are ignored by screen readers vs HTML elements): `data:text/html,<div id="1">How we determine review quality?%20%20%20%20%20 <button style="height:3rem;width:3rem;" aria-labelledby="1"></button>%20 </div><p>something else</p><button ><img src="https://cdn.iconscout.com/icon/free/png-256/free-touch-134-444304.png" alt="Label from image"></button>`

I think we could keep the bug, but adjust it so the button's hover behavior is improved on the callout component level, but it is not an accessibility blocker for the release.

What do you think, Shane and Rares?

After finally being able to catch the callout with the NVDA running, it does appears to be that this is the NVDA behavior when it is not announcing image buttons (refer to [my comment in a similar Shopping bug 1851735](https://bugzilla.mozilla.org/show_bug.cgi?id=1851735#c7)), but the button itself is properly labeled and is announced by NVDA as `Close, button` when focused with a keyboard (at the moment, you have to click on the callout and then press `Tab` to hear it though, per [this discussion in callout bug 1841374](https://bugzilla.mozilla.org/show_bug.cgi?id=1841374#c4))

Thus lowering the a11y-severity to S3, because while the button is not unlabeled (the user would know the purpose of this control, if they navigate there with a keyboard or access it via the screen reader-provided list of buttons), but we still could try to use an image with `alt` text - this seems to resolve the issue and hovered image button provides expected label announcement, i.e. in the following test case (CSS-provided images are ignored by screen readers vs HTML elements): `data:text/html,<div id="1">How we determine review quality?%20%20%20%20%20 <button style="height:3rem;width:3rem;" aria-labelledby="1"></button>%20 </div><p>something else</p><button ><img src="https://cdn.iconscout.com/icon/free/png-256/free-touch-134-444304.png" alt="Label from image"></button>`

I think we could keep the bug, but adjust it so the button's hover behavior is improved on the callout component level, but it is not an accessibility blocker for the release.

What do you think, Shane and Rares?