(#369)(#371) Accessibility for dropdowns, pagination, and maint items

.eslintrc.js

@@ -42,7 +42,7 @@ module.exports = {
             }
         },
         {
-            files: ['.eslintrc.js', 'js/**/*.*', 'getting-started/*.js', 'playwright/**/*.ts'],
+            files: ['.eslintrc.js', 'js/**/*.*', 'getting-started/*.js', 'playwright/**/*.ts', 'wwwroot/js/src/**/*.js', 'gulpfile.js'],
             rules: {
                 semi: ['error', 'always'],
                 quotes: ['error', 'single'],

getting-started/_package.json

@@ -12,7 +12,7 @@
   },
   "homepage": "https://github.com/chocolatey/chocolatey.org#readme",
   "devDependencies": {
-    "choco-theme": "0.5.19"
+    "choco-theme": "0.5.20"
   },
   "resolutions": {
     "glob-parent": "^6.0.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "choco-theme",
-  "version": "0.5.19",
+  "version": "0.5.20",
   "description": "The global theme for Chocolatey Software.",
   "repository": {
     "type": "git",

scss/_dropdowns.scss

@@ -0,0 +1,5 @@
+.dropdown-item {
+    &:hover {
+        cursor: pointer;
+    }
+}

scss/_flatpickr.scss

@@ -1,11 +1,25 @@
 /* stylelint-disable selector-class-pattern */
 
-.flatpickr .form-control[readonly]:not([disabled]) {
-    background: var(--choco-theme-elevation-1);
-}
-
-.flatpickr .flatpickr-input[disabled] {
-    cursor: default;
+.flatpickr {
+    &.input-group {
+        .form-control.input {
+            border-top-left-radius: $border-radius !important;
+            border-bottom-left-radius: $border-radius !important;
+        }
+
+        button[data-clear] {
+            border-top-right-radius: $border-radius !important;
+            border-bottom-right-radius: $border-radius !important;
+        }
+    }
+
+    .form-control[readonly]:not([disabled]) {
+        background: var(--choco-theme-elevation-1);
+    }
+
+    .flatpickr-input[disabled] {
+        cursor: default;
+    }
 }
 
 .flatpickr-calendar {

scss/_left-navigation.scss

@@ -145,6 +145,11 @@
     #leftSidebarNav {
         top: 0;
 
+        &.sticky-md-top {
+            height: 100vh;
+            overflow: auto;
+        }
+
         .navbar > .navbar-collapse {
             border-bottom: 0;
         }

scss/_pagination.scss

@@ -1,15 +1,4 @@
-.page-link {
-    background-color: unset;
-    border: 1px solid var(--choco-theme-border);
-
-    &:hover,
-    &:focus {
-        background-color: var(--choco-theme-neutral);
-        border-color: var(--choco-theme-neutral);
-    }
-}
-
-.page-item.disabled .page-link {
-    background: unset;
-    border-color: var(--choco-theme-border);
+.disabled > .page-link,
+.page-link.disabled {
+    opacity: .5;
 }

scss/_styles.scss

@@ -44,3 +44,4 @@
 @import "code-copy-for-view";
 @import "terminal";
 @import "anchorjs";
+@import "dropdowns";

scss/_utilities.scss

@@ -235,11 +235,6 @@ hr {
 }
 
 @include media-breakpoint-up(md) {
-    .sticky-md-top {
-        max-height: 100vh;
-        overflow: auto;
-    }
-
     .h-md-400-px {
         height: 400px !important;
     }

scss/variables/_chocolatey.scss

@@ -52,3 +52,19 @@ $alert-color-scale: 0%;
 $nav-tabs-link-active-bg: $white;
 $nav-pills-link-active-color: $black;
 
+// Pagination
+$pagination-bg:                     unset;
+$pagination-border-color:           $primary;
+
+$pagination-focus-color:            $black;
+$pagination-focus-bg:               $primary;
+
+$pagination-hover-color:            $black;
+$pagination-hover-bg:               $primary;
+$pagination-hover-border-color:     $primary;
+
+$pagination-active-color:           $black;
+
+$pagination-disabled-color:         $primary;
+$pagination-disabled-bg:            unset;
+$pagination-disabled-border-color:  $primary;

scss/variables/_global.scss

@@ -460,6 +460,8 @@ $dropdown-border-color:             var(--choco-theme-border);
 $dropdown-link-color:               var(--choco-theme-text);
 $dropdown-link-hover-color:         var(--choco-theme-text);
 $dropdown-link-hover-bg:            var(--choco-theme-background);
+$dropdown-link-active-color:        var(--choco-theme-text);
+$dropdown-link-active-bg:           var(--choco-theme-background);
 
 // Offcanvas
 $offcanvas-bg-color:                var(--choco-theme-elevation-1);