(chocolatey#429) General accessibility enhancements

This includes some general accessibility enhancements like increased spacing, link styles, and other minor changes to improve the overall accessibility of choco-theme.
st3phhays · Nov 21, 2024 · f5a562d · f5a562d
1 parent f60319d
commit f5a562d
Show file tree

Hide file tree

Showing 15 changed files with 126 additions and 12 deletions.
diff --git a/js/src/callouts.js b/js/src/callouts.js
@@ -29,6 +29,10 @@
                     calloutIconColor = 'warning';
                     calloutIcon = 'triangle-exclamation';
                     callout.classList.add('callout-warning');
+                } else if (callout.classList.contains('callout-tip') || calloutHeaderText.includes(':choco-tip:')) {
+                    calloutIconColor = 'tip';
+                    calloutIcon = 'lightbulb';
+                    callout.classList.add('callout-tip');
                 } else {
                     calloutIconColor = 'info';
                     calloutIcon = 'info';

diff --git a/js/src/util/tab-anchors.js b/js/src/util/tab-anchors.js
@@ -0,0 +1,16 @@
+export const tabAnchors = () => {
+    if (location.hash) {
+        const activeTab = document.querySelector(`[data-bs-target="${location.hash}"]`);
+
+        if (activeTab) {
+            bootstrap.Tab.getOrCreateInstance(activeTab).show();
+        }
+    }
+
+    document.querySelectorAll('button[data-bs-toggle="tab"]:not(.d-anchor-none)').forEach(button => {
+        button.addEventListener('click', () => {
+            const target = button.getAttribute('data-bs-target');
+            history.pushState(null, '', `${target}`);
+        });
+    });
+};
diff --git a/scss/_base.scss b/scss/_base.scss
@@ -34,6 +34,13 @@ strong {
     font-weight: 700;
 }
 
+*:disabled, 
+*.disabled {
+    cursor: not-allowed;
+    font-style: italic !important;
+    font-weight: normal !important;
+}
+
 [data-bs-theme="dark"] .light-theme,
 [data-bs-theme="light"] .dark-theme {
     display: none;

diff --git a/scss/_styles.scss b/scss/_styles.scss
@@ -54,4 +54,5 @@
 @import "utilities/validation";
 @import "utilities/borders";
 @import "utilities/form-checks";
+@import "libraries/sortable";
 @import "playwright";
diff --git a/scss/components/_buttons-badges.scss b/scss/components/_buttons-badges.scss
@@ -1,3 +1,8 @@
+.btn {
+    min-height: 44px;
+    min-width: 44px;
+}
+
 .btn-close
 {
     display: flex;
@@ -159,6 +164,20 @@ button.btn-grab:not(:disabled) {
     --#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
 }
 
+.btn-reorder {
+    --bs-btn-color: var(--bs-body-color);
+    --bs-btn-border-color: var(--bs-secondary);
+    --bs-btn-hover-color: var(--bs-primary);
+    --bs-btn-hover-border-color: var(--bs-primary);
+    --bs-btn-active-color: var(--bs-primary);
+    --bs-btn-active-border-color: var(--bs-primary);
+
+    &:focus {
+        border: 3px solid var(--bs-primary);
+        color: var(--bs-primary);
+    }
+}
+
 @each $color, $value in $theme-colors {
     .btn-#{$color} {
         --#{$prefix}btn-color: var(--#{$prefix}#{$color}-contrast);

diff --git a/scss/libraries/_sortable.scss b/scss/libraries/_sortable.scss
@@ -0,0 +1,43 @@
+.sortable-item {
+    &:focus-visible {
+        outline: none;
+    }
+
+    &:hover .card {
+        cursor: grab;
+        box-shadow: inset 0 0 0 1px var(--bs-primary); // using box-shadow vs. border to prevent text layout shifts
+    }
+
+    &.sortable-chosen {
+        cursor: grabbing;
+    }
+
+    &:hover,
+    &.sortable-chosen,
+    &.sortable-focused {
+        .card {
+            background-color: rgba(var(--bs-primary-rgb),.1) !important;
+            text-shadow: 0.5px 0 0 currentColor; // using text-shadow vs. bold to prevent text from layout shifts
+        }
+    }
+
+    &.sortable-chosen,
+    &.sortable-focused,
+    &.sortable-drag {
+        .card {
+            box-shadow: inset 0 0 0 3px var(--bs-primary); // using box-shadow vs. border to prevent text layout shifts
+        }
+    }
+
+    &.sortable-ghost {
+        .card {
+            box-shadow: none;
+            background: rgba(var(--bs-success-rgb),.1) !important;
+            outline: 3px dashed var(--bs-success) !important;
+        }
+    }
+
+    .btn-reorder.btn-outline-secondary:focus {
+        background-color: var(--bs-btn-hover-bg);
+    }
+}
diff --git a/scss/pages/_ccm.scss b/scss/pages/_ccm.scss
@@ -112,6 +112,12 @@
                     }
                 }
 
+                &:not(.active-parent):not(.active) {
+                    a {
+                        font-weight: 400;
+                    }
+                }
+
                 [aria-expanded="true"] .fa-angle-down {
                     transform: rotate(180deg);
                 }

diff --git a/scss/pages/_zendesk-guide.scss b/scss/pages/_zendesk-guide.scss
@@ -132,6 +132,10 @@
             .fa-solid.fa-xmark::before {
                 background-image: url("https://img.chocolatey.org/icons/xmark-solid.svg");
             }
+
+            .fa-solid.fa-lightbulb::before {
+                background-image: url("https://img.chocolatey.org/icons/lightbulb-solid.svg");
+            }
         }
     }
 

diff --git a/scss/tempus-dominus.scss b/scss/tempus-dominus.scss
@@ -10,11 +10,7 @@
     --td-active-color: var(--bs-primary-contrast);
     --td-dow-color: var(--bs-secondary-color);
     --td-disabled-color: var(--bs-secondary-color);
-    --td-alternate-color: var(--bs-secondary-color);
-}
-
-.form-control[readonly].form-control-tempus-dominus {
-    background: var(--bs-secondary-bg);
+    --td-alternate-color: var(--bs-body-color);
 }
 
 .tempus-dominus-widget {
@@ -41,8 +37,8 @@
     .time-container-minute,
     .time-container-second
      {
-        div:not(.no-highlight):hover:hover {
-            color: var(--bs-black) !important;
+        div:not(.no-highlight):hover {
+            color: var(--bs-primary-contrast) !important;
         }
     }
 }
diff --git a/scss/utilities/_links.scss b/scss/utilities/_links.scss
@@ -2,7 +2,8 @@
     text-decoration: none !important;
 }
 
-a {
+a,
+.btn-link:not(.link-underline-none) {
     text-underline-offset: 5px;
     text-decoration-thickness: 2px;
     font-weight: bold;

diff --git a/scss/utilities/_validation.scss b/scss/utilities/_validation.scss
@@ -33,6 +33,9 @@
                 .was-validated .form-control:valid {
                     @if $enable-validation-icons {
                         background-image: escape-svg($form-feedback-icon-valid-dark);
+                        background-repeat: no-repeat;
+                        background-position: right $input-height-inner-quarter center;
+                        background-size: $input-height-inner-half $input-height-inner-half;
                     }
                 }
 
@@ -58,6 +61,9 @@
                 .was-validated .form-control:invalid {
                     @if $enable-validation-icons {
                         background-image: escape-svg($form-feedback-icon-invalid-dark);
+                        background-repeat: no-repeat;
+                        background-position: right $input-height-inner-quarter center;
+                        background-size: $input-height-inner-half $input-height-inner-half;
                     }
                 }
 

diff --git a/scss/variables/_chocolatey.scss b/scss/variables/_chocolatey.scss
@@ -62,9 +62,6 @@ $font-family-sans-serif: "PT Sans", sans-serif;
 $code-color:                        var(--bs-body-color);
 $code-color-dark:                   var(--bs-body-color);
 
-// Cards
-$card-border-radius:                1rem;
-
 // Alerts
 $alert-border-radius:               0;
 $alert-border-width:                0;

diff --git a/scss/variables/_config.scss b/scss/variables/_config.scss
@@ -5,4 +5,5 @@ $line-height-base:                  1.7;
 $headings-line-height:              $line-height-base;
 $min-contrast-ratio:                4.5;
 $shift-amount:                      15%;
-$prefix:                            bs-;
+$prefix:                            bs-;
+$spacer-md:                         2rem;
diff --git a/scss/variables/_global.scss b/scss/variables/_global.scss
@@ -171,6 +171,8 @@ $btn-close-bg: none;
 
 // Cards
 $card-bg:                           var(--bs-secondary-bg);
+$card-spacer-y:                     $spacer-md;
+$card-spacer-x:                     $spacer-md;
 
 // Carousel
 // $carousel-indicator-active-bg:      $primary;

diff --git a/scss/variables/_maps.scss b/scss/variables/_maps.scss
@@ -171,6 +171,14 @@ $colors-dark: (
     "gray-dark":  $dark
 );
 
+$theme-colors-custom: (
+    "tip":        $purple
+);
+
+$theme-colors-dark-custom: (
+    "tip":        $purple-dark
+);
+
 $theme-colors-dark: (
     "primary":    $primary-dark,
     "secondary":  $secondary-dark,
@@ -182,6 +190,9 @@ $theme-colors-dark: (
     "dark":       $dark
 );
 
+$theme-colors: map-merge($theme-colors, $theme-colors-custom);
+$theme-colors-dark: map-merge($theme-colors-dark, $theme-colors-dark-custom);
+
 $spacers-custom: (
     6: $spacer * 6,
     7: $spacer * 12,