Libraries and Dependencies

Bootstrap

This UI style guide is largely built on Bootstrap 4.3. Where possible, we maintained or slightly altered Bootstrap’s default styles. Because web accessibility is a strong driver for this project, we enhanced, reimplemented, or removed parts of Bootstrap that do not facilitate conformance with Yale’s Web Accessibility Policy.

Noteworthy pieces of Bootstrap that we have not and may not include in the component library:

  • Carousels
  • Popovers
  • Scrollspies
  • Spinners
  • Toasts
  • Tooltips

Developers who wish to recompile the UI Component Library to include these assets are responsible for ensuring they are usable and accessible.

Bootstrap Re-implementations

We have re-implemented the following parts of Bootstrap to be more appropriate for our purposes:

  • Alerts
  • Text and Background Utilities
  • List Groups
  • Buttons
  • Tables
  • Progress Bars

In all of these cases, we strove to keep the API broadly similar to Bootstrap, so users who are comfortable with Bootstrap will hopefully find the transition easy.

Ally.js

Ally.js is a collection of JavaScript modules intended to give developers greater tools when developing accessibly. We use A11y.js to dynamically add classes to every object in the DOM that is an ancestor to the element that currently has focus. This allows for powerful styling possibilities, such as changing the appearance of a form label when its associated form field has focus.

Focus-Visible

Focus-Visible is a polyfill for the :focus-visible pseudo-selector. Browsers implement focus styles inconsistently, such that some browsers will display focus styles when mouse users click on a focusable element. Many designers and developers find that behavior unattractive, and they typically respond by removing focus styles altogether, creating an accessibility problem for users who rely on focus. This polyfill only shows focus styles to keyboard user, and hides from mouse users consistently across browsers.

Sass Color Contrast Function

Because Bootstrap consistently presents color contrast issues, Yale has implemented a Sass color contrast library to force color contrast based on WCAG standards. The library is based on a gist by Sérgio Gomes. It is a best practice to pass all Sass color declarations through the find-accessible-colors function in order to ensure accessible colors.