[A11y] Improved visibility of checkboxes when keyboard navigating a page (especially in high-contrast mode) (#8933)

* Bug fixed, made it a solid outline for greater visibility

* Using an outline with a slight offset around checkboxes

Author: advay26

src/Bootstrap/dist/css/bootstrap.css

@@ -100,6 +100,13 @@ input[type="checkbox"]:focus {
   .tab-focus();
 }
 
+// Focus for checkboxes in forced-color modes (eg. Windows high-contrast mode)
+@media (forced-colors: active) {
+  input[type="checkbox"]:focus {
+    .forced-colors-tab-focus();
+  }
+}
+
 // Adjust output element
 output {
   display: block;

src/Bootstrap/less/forms.less

@@ -4,6 +4,13 @@
   // WebKit-specific. Other browsers will keep their default outline style.
   // (Initially tried to also force default via `outline: initial`,
   // but that seems to erroneously remove the outline in Firefox altogether.)
-  outline: 5px auto -webkit-focus-ring-color;
+  outline: 4px solid -webkit-focus-ring-color;
   outline-offset: -2px;
 }
+
+.forced-colors-tab-focus() {
+  // Specific to high-contrast mode, and other forced-color schemes
+  // To override color changes in high-contrast mode, use "forced-color-adjust: none;"
+  outline: 3px solid -webkit-focus-ring-color;
+  outline-offset: 2px;
+}