search

indiana-university / rivet-source

Indiana University’s design system for web application development
https://rivet.iu.edu
BSD 3-Clause "New" or "Revised" License
54 stars 4 forks source link

Gap between visible and hidden text in buttons creating "extra" space #741

Closed scottanthonymurray closed 4 months ago

scottanthonymurray commented 8 months ago

Describe the bug

Rivet 2.6.0 adds gap styles to buttons to create space between elements within a single button, such as the text label and an icon.

However, some buttons have visually hidden text to help people using assistive technologies better understand what a button does. An example of this is the "Copy" button that appears on code snippets on the Rivet website, which have markup like shown below:

<button class="rvt-button rvt-button--small rvt-c-copyable-code-snippet__button" data-copy-code-snippet>
  Copy <span class="rvt-sr-only">hosted CSS code</span>
</button>

The buttons renders the space between "Copy" and the span element, even though the span element is not visible, resulting in extra spacing on the button's right side.

Expected behavior

The button styles should not apply a gap between visible button text and screen reader-only button text.

Potential workaround

Wrapping the entire text of the example button above in a span solves the issue:

<button class="rvt-button rvt-button--small rvt-c-copyable-code-snippet__button" data-copy-code-snippet>
  <span>Copy <span class="rvt-sr-only">hosted CSS code</span></span>
</button>

If a CSS solution isn't possible, it might be sufficient to tell people to wrap the entire button text in a span in situations where part of the text is hidden. Thoughts?

Relevant context (required)

levimcg commented 4 months ago

I'm gonna close this out. Should be fixed as of the 2.7.0 release. More info here 👉🏻 #748