sr-only content should not be selectable

[swanson]

👋 I think this is a bug, but willing to admit that I'm by no-means an accessibility expert.

When adding screen-reader content with sr-only, if I select over the content it ends up on my clipboard.

You can see an example from the TailwindUI Stats section:

<div class="ml-2 flex items-baseline text-sm leading-5 font-semibold text-green-600">
  <svg class="self-center flex-shrink-0 h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
    <path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
  </svg>
  <span class="sr-only">
    Increased by
  </span>
  5.4%
</div>

If you select the percentage, sometimes you'll end up with "Increased by5.4%" in your clipboard depending on how much you drag. There is no visual indicator that you have extra text when dragging.

I can work around this by adding select-none but should sr-only be forcing that style? It was unexpected behavior to me.

[tlgreg]

I don't think this should be the default.
In many cases sr-only text should be selectable as that's what the SR reads out. I would argue even the given example should be selectable.
It might be a bit inconvenient for other users, but otherwise would hinder accessibility for the visually impaired.

[swanson]

I don't think this should be the default.
In many cases sr-only text should be selectable as that's what the SR reads out. I would argue even the given example should be selectable.
It might be a bit inconvenient for other users, but otherwise would hinder accessibility for the visually impaired.

Thanks -- I was not sure what the expectation for a SR would be, so appreciate the input.

[estevanmaito]

It could also be prevented by adding proper ARIA labels to the SVG:

<svg role="img" aria-label="Increased by" class="..."

With this approach you don't need the extra span with sr-only, your icon is correctly announced and you don't have extra content to focus/select.