Add a loading indicator for aria-busy

scss/utilities/_accessibility.scss

@@ -0,0 +1,46 @@
+/**
+ * Accessibility & User interaction
+ */
+
+
+// Based on :
+// - normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
+// - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+// ––––––––––––––––––––
+
+// Accessibility
+
+// Change the cursor on control elements in all browsers (opinionated)
+[aria-controls] {
+  cursor: pointer;
+}
+
+// Change the cursor on disabled, not-editable, or otherwise inoperable elements in all browsers (opinionated)
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+// Change the display on visually hidden accessible elements in all browsers (opinionated)
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
+
+// User interaction
+// Remove the tapping delay in IE 10
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+}

scss/utilities/_loading.scss

@@ -0,0 +1,55 @@
+/**
+ * Loading ([aria-busy=true])
+ */
+
+
+// Cursor
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+// Everyting except form elements
+[aria-busy="true"]:not(input):not(select):not(textarea) {
+
+  &::before {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    border: 0.1875em solid currentColor;
+    border-radius: 1em;
+    border-right-color: transparent;
+    vertical-align: text-bottom;
+    vertical-align: -.125em; // Visual alignment
+    animation: spinner 0.75s linear infinite;
+    content: '';
+    opacity: var(--loading-spinner-opacity);
+  }
+
+  &:not(:empty) {
+    &::before {
+      margin-right: calc(var(--spacing) / 2);
+    }
+  }
+
+  &:empty {
+    text-align: center;
+  }
+}
+
+// Buttons and links
+button,
+input[type="submit"],
+input[type="button"],
+input[type="reset"],
+a {
+  &[aria-busy="true"] {
+    pointer-events: none;
+  }
+}
+
+// Animation: rotate
+@keyframes spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}

scss/utilities/_reduce-motion.scss

@@ -0,0 +1,29 @@
+@if $enable-transitions and $enable-important {
+
+/**
+ * Reduce Motion Features
+ */
+
+
+  // Based on :
+  // - sanitize.css v12.0.1 | CC0 1.0 Universal | github.com/csstools/sanitize.css
+  // ––––––––––––––––––––
+
+  // 1. Remove animations when motion is reduced (opinionated)
+  // 2. Remove fixed background attachments when motion is reduced (opinionated)
+  // 3. Remove timed scrolling behaviors when motion is reduced (opinionated)
+  // 4. Remove transitions when motion is reduced (opinionated)
+  @media (prefers-reduced-motion: reduce) {
+    *:not([aria-busy="true"]),
+    :not([aria-busy="true"])::before,
+    :not([aria-busy="true"])::after {
+      background-attachment: initial !important; // 2
+      animation-duration: 1ms !important; // 1
+      animation-delay: -1ms !important; // 1
+      animation-iteration-count: 1 !important; // 1
+      scroll-behavior: auto !important; // 3
+      transition-delay: 0s !important; // 4
+      transition-duration: 0s !important; // 4
+    }
+  }
+}

scss/utilities/_tooltip.scss

@@ -0,0 +1,97 @@
+/**
+ * Tooltip ([data-tooltip])
+ */
+
+[data-tooltip] {
+  position: relative;
+
+  &:not(a):not(button):not(input) {
+    border-bottom: 1px dotted;
+    text-decoration: none;
+    cursor: help;
+  }
+
+  &::before,
+  &::after {
+    display: block;
+    z-index: 99;
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    padding: .25rem .5rem;
+    overflow: hidden;
+    transform: translate(-50%, -.25rem);
+    border-radius: var(--border-radius);
+    background: var(--tooltip-background-color);
+    color: var(--tooltip-color);
+    font-size: .875rem;
+    font-style: normal;
+    font-weight: var(--font-weight);
+    text-decoration: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    content: attr(data-tooltip);
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  // Caret
+  &::after {
+    padding: 0;
+    transform: translate(-50%, 0rem);
+    border-top: .3rem solid;
+    border-right: .3rem solid transparent;
+    border-left: .3rem solid transparent;
+    border-radius: 0;
+    background-color: transparent;
+    color: var(--tooltip-background-color);
+    content: '';
+  }
+
+  &:focus,
+  &:hover {
+    &::before,
+    &::after {
+      opacity: 1;
+
+      @if $enable-transitions {
+        animation-name: slide;
+        animation-duration: .2s;
+      }
+    }
+
+    &::after {
+      @if $enable-transitions {
+        animation-name: slideCaret;
+      }
+    }
+  }
+}
+
+// Animations
+@if $enable-transitions {
+  @keyframes slide {
+    from {
+      transform: translate(-50%, .75rem);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, -.25rem);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slideCaret {
+    from {
+      opacity: 0;
+    }
+    50% {
+      transform: translate(-50%, -.25rem);
+      opacity: 0;
+    }
+    to {
+      transform: translate(-50%, 0rem);
+      opacity: 1;
+    }
+  }
+}