Rivet 2 beta releases

[levimcg]

Use this thread to discuss Rivet 2 beta releases.

https://v2.rivet.iu.edu/docs/getting-started/

[basham]

I would like an accessibility review of the markup for the new Link Hub component.

<a class="rvt-link-hub__link" href="#">
  <span class="rvt-link-hub__text">Admission standards</span>
  <span class="rvt-link-hub__description">See coursework requirements, test score expectations, and other standards for admission to each IU campus.</span>
</a>

As is, the announced text on VoiceOver is:

Link, Admission standards See coursework requirements, test score expectations, and other standards for admission to each IU campus.

All the text runs into each other. Including the description as part of the link also clutters up the Rotor, which lists all the link names in a flat list. Instead, consider using aria-labelledby and aria-describedby. This will result in more markup, but it will be a better experience.

<a class="rvt-link-hub__link" href="#" aria-labelledby="link-admissions-standards-text" aria-describedby="link-admissions-standards-description">
  <span class="rvt-link-hub__text" id="link-admissions-standards-text">Admission standards</span>
  <span class="rvt-link-hub__description" id="link-admissions-standards-description">See coursework requirements, test score expectations, and other standards for admission to each IU campus.</span>
</a>

Now, it announces as:

Link, Admission standards

See coursework requirements, test score expectations, and other standards for admission to each IU campus.

And the link in the Rotor is just the primary text, so it becomes easier to scan.

[levimcg]

@basham Thanks for the heads up. The prototype version of this component is used extensively on sites that have been through multiple rounds of accessibility reviews (eg. iu.edu) and this was never raised as an issue. I meet with the team regularly and can have them take a look. We can make updates to the docs as needed.

[basham]

I just read the notes on the 2.0.0-beta.3 release. Two things stick out to me.

1. The Badge size is odd. The font size is 88% (14.08px) rather than just 0.875rem (14px). The line height is 1.6 (22.528px). The top and bottom padding is 0.0313rem. All of this results in a height of 27.52px. This will make it unnecessarily difficult when lining up content with the badges. The font size should be effectively 14px. The height should be effectively 24px. That will make using this much easier in practice. We should make sure all components conform to standard font sizes and a 4px grid.
2. The Button width is 4px too wide. Buttons should be a square when the content is only an icon (16x16). Since the height is 40px, the width should also be 40px (not 44px).