Bootstrap Accessibility Components

Library leverages the functionality and accessibility of Bootstrap components, but removes all styling except where required for functionality. All components are intended to be used without the full Bootstrap library.

Installation

Add library as NPM dependency. Follow the usage instructions below for each component. Implementing project is responsible for compiling Javascript and SCSS.

Components

Accordian

Build vertically collapsing accordions in combination with our Collapse JavaScript plugin.

Usage

HTML

<div id="accordionExample">
  <div id="panelsStayOpen-headingOne">
    <button type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="true" aria-controls="panelsStayOpen-collapseOne">
      Accordion Item #1
    </button>
  </div>
  <div id="panelsStayOpen-collapseOne" class="collapse show" data-bs-parent="#accordionExample" aria-labelledby="panelsStayOpen-headingOne">
    <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
  </div>
  <div id="panelsStayOpen-headingTwo">
    <button class="collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo">
      Accordion Item #2
    </button>
  </div>
  <div id="panelsStayOpen-collapseTwo" class="collapse" data-bs-parent="#accordionExample" aria-labelledby="panelsStayOpen-headingTwo">
    <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
  </div>
</div>

Javascript

import "bootstrap/js/src/collapse";

SCSS

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/transitions";

Collapse

Toggle the visibility of content across your project with a few classes and our JavaScript plugins.

Usage

HTML

<a data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">Open with link</a>
<button type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Open with button</button>
<div style="display: flow-root">
  <div class="collapse" id="collapseExample">
    Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non mi porta gravida at eget metus.
  </div>
</div>

Javascript

import "bootstrap/js/src/collapse";

SCSS

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/transitions";

Support

Supports all Bootstrap functionality.

Dropdown

Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.

Usage

HTML

<button type="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown button</button>
<ul class="dropdown-menu animate">
  <li class="dropdown-item"><a href="#">Action</a></li>
  <li class="dropdown-item"><a href="#">Another action</a></li>
  <li class="dropdown-item"><a href="#">Something else here</a></li>
</ul>

Javascript

import "bootstrap/js/src/dropdown";

SCSS

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "src/dropdown";

CSS Variables

.dropdown-menu {
  --#{$prefix}dropdown-zindex: #{$zindex-dropdown};
  --#{$prefix}dropdown-bg: #FFF;
}

Support

Supports all Boostrap functionality except: split button

Modal

Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Usage

HTML

<button type="button" data-bs-toggle="modal" data-bs-target="#exampleModal">Open modal</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <button type="button" data-bs-dismiss="modal" aria-label="Close"></button>
        <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.</p>
        <p>Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.</p>
        <p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <p>Nulla vitae elit libero, a pharetra augue. Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod.</p>
        <p>Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.</p>
      </div>
    </div>
  </div>
</div>

Javascript

import "bootstrap/js/src/modal";

SCSS

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/transitions";
@import "src/modal";

CSS Variables

.modal {
  --#{$prefix}modal-zindex: #{$zindex-modal};
  --#{$prefix}modal-bg: #FFF;
  --#{$prefix}modal-inline-margin: 20px;
  --#{$prefix}modal-block-margin: 20px;
}

.modal-backdrop {
  --#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
  --#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
  --#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
}

Support

Supports all Boostrap functionality.

Tabs

Documentation and examples for how to use Bootstrap’s included navigation components.

Usage

HTML

<ul id="myTab" role="tablist">
  <li role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Nullam quis <a href="#">risus eget urna</a> mollis ornare vel eu leo.</div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Aenean lacinia bibendum nulla sed consectetur.</div>
</div>

Javascript

import "bootstrap/js/src/tab";

SCSS

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/transitions";
@import "src/nav";

Support

Only supports Javascript behavior. All other "Navs & tabs" features are exclusively styling.

Tooltips

Usage

HTML

<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="tooltip" data-bs-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

Javascript

import Tooltip from "bootstrap/js/src/tooltip";

(function() {
  let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    let tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    });
})()

SCSS

@import "../src/tooltip";

.tooltip {
  --#{$prefix}tooltip-bg: #CCC;
  --#{$prefix}tooltip-arrow-width: 0.8rem;
  --#{$prefix}tooltip-arrow-height: 0.4rem;
}

Support

Supports all Boostrap functionality, except Bootstrap CSS variables are minimized.