VoiceOver issue with uppercase

CSS uppercase text shall not be spelled-out.

by Sylvain Gamel

HTML

<p>
With the bug
</p>
<button type="button">
  Add me if you dare
</button>

<p>
Trying to avoid spell-out with speak property.
</p>
<button type="button" class="nospell">
  Add me if you dare
</button>

<p>
Fixed by duplicating label in aria-label.
</p>
<button type="button" aria-label="Add me if you dare">
  Add me if you dare
</button>

CSS

button {
  text-transform: uppercase;
}
    
button.nospell {
  speak: normal;
}