focus styles

cds-snc · Jan 20, 2025 · bd6577b · bd6577b
1 parent ab036b3
commit bd6577b
Show file tree

Hide file tree

Showing 36 changed files with 152 additions and 131 deletions.
diff --git a/app/assets/stylesheets/index.css b/app/assets/stylesheets/index.css
diff --git a/app/assets/stylesheets/tailwind/components/back-link.css b/app/assets/stylesheets/tailwind/components/back-link.css
@@ -1,20 +1,19 @@
 @layer components {
   /*! purgecss start ignore */
   .back-link {
-    padding-left: 14px;
-    @apply text-small leading-tight font-normal text-black inline-block relative mt-gutterHalf mb-4 no-underline border-b-1 border-solid border-black;
+    @apply text-small text-black inline-flex mt-gutterHalf mb-4 no-underline border-b-1 border-solid border-black gap-4;
   }
-  .back-link:focus {
-    @apply border-b-1;
+  .back-link:focus,
+  .back-link:focus-visible {
+    @apply border-b-1 ring ring-yellow-300
   }
   .back-link:link,
   .back-link:visited {
     @apply text-black;
   }
-  .back-link:before,
-  .back-link:after {
+  .back-link:before {
     content: "";
-    @apply absolute border-solid border-transparent;
+    @apply border-solid border-transparent;
   }
   .back-link:before {
     -webkit-clip-path: polygon(0% 50%, 100% 100%, 100% 0%);
@@ -25,12 +24,6 @@
     bottom: 1px;
     @apply block w-0 h-0 left-0 m-auto;
   }
-  .back-link:after {
-    content: "";
-    top: -15px;
-    left: -3px;
-    border-width: 15px 30px 15px 3px;
-    @apply w-full h-full;
-  }
+
   /*! purgecss end ignore */
 }
diff --git a/app/assets/stylesheets/tailwind/components/big-number.css b/app/assets/stylesheets/tailwind/components/big-number.css
@@ -48,7 +48,7 @@
 
   .big-number-link:active,
   .big-number-link:focus {
-    @apply outline-yellow bg-blue;
+    @apply outline outline-offset-2 outline-yellow-300 outline-3 shadow-outline bg-blue z-10;
   }
 
   .big-number-link:hover .big-number-label,
@@ -71,13 +71,13 @@
   .big-number-status-link:focus {
     background-color: revert;
     box-shadow: none;
-    @apply outline-yellow border-0;
+    @apply outline-none shadow-outline;
   }
 
   /* Covers -normal, -warn, -critical */
   div[class*="review-email-status-"]:active,
   div[class*="review-email-status-"]:focus {
-    @apply outline-yellow;
+    @apply outline-none shadow-outline;
   }
 
   div[class*="review-email-status-"]:hover

diff --git a/app/assets/stylesheets/tailwind/components/buttons.css b/app/assets/stylesheets/tailwind/components/buttons.css
@@ -7,15 +7,7 @@
   a.button:visited,
   a.button:active {
     padding: 0.55em 1em 0.45em;
-    box-shadow: 0 2px 0 theme("colors.blue.border");
-    @apply no-underline inline-flex items-center text-white text-smaller leading-tight align-top bg-blue min-h-target;
-  }
-  .button.shadow-none,
-  a.button.shadow-none,
-  a.button.shadow-none:link,
-  a.button.shadow-none:visited,
-  a.button.shadow-none:active {
-    padding: 0.5em 1em 0.5em;
+    @apply no-underline inline-flex items-center text-white text-smaller leading-tight align-top bg-blue min-h-target border-b-2 border-b-blue;
   }
 
   .button:hover,
@@ -24,10 +16,10 @@
   }
 
   .button:focus,
-  a.button:focus {
-    outline: 3px solid theme("colors.yellow.DEFAULT");
-    outline-offset: 0;
-    @apply border-transparent shadow-outline;
+  .button:focus-visible,
+  a.button:focus,
+  a.button:focus-visible {
+    @apply border-transparent outline-none shadow-outline;
   }
 
   .button-blue-lighter,
@@ -44,16 +36,14 @@
 
   .button-blue-lighter:focus,
   a.button-blue-lighter:focus {
-    box-shadow: 0px;
-    @apply bg-yellow outline-none border-transparent outline-none;
+    @apply border-transparent;
   }
 
   .button-red,
   a.button-red:visited,
   a.button-red:link,
   a.button-red {
-    @apply bg-red;
-    box-shadow: 0 2px 0 theme("colors.red.border");
+    @apply bg-red border-red-900;
   }
   .button-red:hover,
   a.button-red:hover {
@@ -64,9 +54,7 @@
   a.button-secondary,
   a.button-secondary:visited,
   a.button-secondary:link {
-    box-shadow: 0 2px 0 theme("colors.gray.border");
-    font-size: 1em;
-    @apply text-black bg-gray-button;
+    @apply text-black bg-gray-200 border-gray-400;
   }
 
   .button-secondary:hover,
@@ -76,8 +64,7 @@
 
   .button-secondary:focus,
   a.button-secondary:focus {
-    outline: 1px solid theme("colors.yellow.DEFAULT");
-    @apply border-transparent shadow-outline;
+    @apply border-transparent;
   }
 
   .button.disabled,
@@ -94,16 +81,26 @@
   a.button-link,
   a.button-link:visited,
   a.button-link:link {
-    box-shadow: none;
-    @apply bg-transparent border-b-2 border-transparent px-5 py-4 underline;
+    @apply shadow-none bg-transparent border-b-2 border-transparent px-5 py-4 underline;
   }
   .button-link:hover,
   a.button-link:hover {
     @apply no-underline;
   }
   .button-link:focus,
   a.button-link:focus {
-    @apply bg-yellow text-blue outline-none border-white no-underline;
+    @apply border-transparent no-underline;
+  }
+
+  .nav-link {
+    @apply p-2 text-small no-underline line-under border-b-2 border-transparent hover:underline decoration-clone inline-flex items-center min-h-target;
+  }
+  .nav-link-dark {
+    @apply text-white focus:text-black focus-visible:text-black;
+  }
+
+  .nav-link-light {
+    @apply text-blue focus:text-black focus-visible:text-black;
   }
 
   /*! purgecss end ignore */

diff --git a/app/assets/stylesheets/tailwind/components/file-upload.css b/app/assets/stylesheets/tailwind/components/file-upload.css
@@ -24,7 +24,7 @@
   }
 
   .js-enabled .file-upload-group:focus-within .file-upload-button {
-    @apply outline-yellow;
+    @apply outline-none shadow-outline;
   }
 
   .js-enabled #file-upload-button {

diff --git a/app/assets/stylesheets/tailwind/components/layout.css b/app/assets/stylesheets/tailwind/components/layout.css
@@ -9,7 +9,7 @@
 
   .banner:focus,
   .banner-default-with-tick:focus {
-    @apply outline-yellow;
+    @apply outline-none shadow-outline;
   }
 
   .banner-dangerous {

diff --git a/app/assets/stylesheets/tailwind/components/message.css b/app/assets/stylesheets/tailwind/components/message.css
@@ -16,7 +16,7 @@
   }
 
   .message-name a:focus {
-    @apply outline-yellow border-0;
+    @apply outline-none shadow-outline;
   }
   .message-name a .message-name-separator {
     margin-right: -2px;

diff --git a/app/assets/stylesheets/tailwind/components/pill.css b/app/assets/stylesheets/tailwind/components/pill.css
@@ -31,7 +31,7 @@
   }
   .pill a:active,
   .pill a:focus {
-    @apply z-10 bg-yellow text-blue outline-none;
+    @apply z-10 bg-yellow text-blue outline-none shadow-outline;
   }
 
   a.pill-selected-item {
@@ -42,7 +42,7 @@
   }
   a.pill-selected-item:focus {
     z-index: 1000;
-    @apply outline-yellow;
+    @apply outline-none shadow-outline
   }
 
   a.pill-unselected-item {
@@ -62,7 +62,7 @@
   }
   a.pill-unselected-item:focus {
     z-index: 1000;
-    @apply outline-yellow border-0;
+    @apply outline-none shadow-outline;
   }
 
   .pill-centered-item {

diff --git a/app/assets/stylesheets/tailwind/components/placeholder.css b/app/assets/stylesheets/tailwind/components/placeholder.css
@@ -74,7 +74,7 @@
   }
 
   .autocomplete__input--focused {
-    outline-color: #ffbf47;
+    @apply outline-none shadow-outline
   }
   /*! purgecss end ignore */
 }
diff --git a/app/assets/stylesheets/tailwind/components/show-more.css b/app/assets/stylesheets/tailwind/components/show-more.css
@@ -5,17 +5,20 @@
     @apply text-small leading-tight font-normal block p-0 mx-0 mt-gutterHalf mb-gutter text-center border-t-1 border-solid border-gray-grey2 border-b-0;
   }
   .show-more:focus,
-  .show-more-empty:focus {
-    @apply outline-none bg-transparent mb-gutter border-gray-grey2 border-b-0;
+  .show-more:focus-visible,
+  .show-more-empty:focus,
+  .show-more-empty:focus-visible {
+    @apply outline-none shadow-none bg-transparent;
   }
   .show-more:focus span,
-  .show-more-empty:focus span {
-    @apply bg-yellow outline-none border-b-1 border-blue;
+  .show-more:focus-visible span,
+  .show-more-empty:focus span,
+  .show-more-empty:focus-visible span {
+    @apply outline-none shadow-outline bg-yellow text-black border-0;
   }
   .show-more span,
   .show-more-empty span {
     top: -11px;
-    outline: 10px solid white;
     @apply relative bg-white inline-block border-b-1 border-solid border-blue;
   }
 

diff --git a/app/assets/stylesheets/tailwind/components/table.css b/app/assets/stylesheets/tailwind/components/table.css
@@ -286,7 +286,7 @@
     table-layout: inherit !important;
   }
   .scrollable-table:focus {
-    @apply outline-yellow;
+    @apply outline-none shadow-outline;
   }
 
   .scrollable-table table {

diff --git a/app/assets/stylesheets/tailwind/components/task-list.css b/app/assets/stylesheets/tailwind/components/task-list.css
@@ -18,7 +18,7 @@
     margin-bottom: -2px;
     padding-top: 16px;
     padding-bottom: 16px;
-    @apply outline-yellow text-black border-transparent shadow-focusLine2;
+    @apply outline-none shadow-outline text-black border-transparent;
   }
 
   .task-list-item:focus-within .task-list-indicator-completed {

diff --git a/app/assets/stylesheets/tailwind/components/typography.css b/app/assets/stylesheets/tailwind/components/typography.css
@@ -25,17 +25,11 @@
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
   }
 
-  a:visited,
-  a:link {
-    @apply text-blue;
-  }
 
-  a:focus {
-    @apply bg-yellow border-b-2 border-blue outline-none no-underline;
-  }
 
-  a:link:focus {
-    @apply text-blue;
+  a:focus,
+  a:focus-visible {
+    @apply no-underline bg-yellow text-black outline-none shadow-outline;
   }
 
   a[target="_blank"]::after {
@@ -53,10 +47,6 @@
     @apply text-red-mellow;
   }
 
-  [class*="delete-link"] a:focus {
-    @apply border-red-mellow text-blue;
-  }
-
   .page-content h3,
   .heading-small {
     margin-top: 2.3684em;

diff --git a/app/assets/stylesheets/tailwind/elements/details.css b/app/assets/stylesheets/tailwind/elements/details.css
@@ -18,7 +18,7 @@
     @apply text-blue-lightblue;
   }
   details summary:focus {
-    @apply outline-yellow;
+    @apply outline-none shadow-outline;
   }
 
   summary::-moz-details-marker,

diff --git a/app/assets/stylesheets/tailwind/elements/form-multiple-choice.css b/app/assets/stylesheets/tailwind/elements/form-multiple-choice.css
@@ -68,7 +68,7 @@
 
   /* Focus state */
   .multiple-choice [type="radio"]:focus + label:before {
-    @apply shadow-outline4;
+    @apply shadow-outline;
   }
   .multiple-choice [type="checkbox"]:focus + label:before {
     @apply shadow-outline;

diff --git a/app/assets/stylesheets/tailwind/style.css b/app/assets/stylesheets/tailwind/style.css
@@ -102,10 +102,7 @@ section {
   @apply m-0 p-0 align-baseline;
 }
 
-main {
-  width: 90%;
-  @apply mx-auto block max-w-screen-xl;
-}
+
 
 input[type="search"]::-webkit-search-cancel-button {
   -webkit-appearance: searchfield-cancel-button;
@@ -124,7 +121,6 @@ section[id]:target {
     0 0 0 15px var(--white),
     0 0 0 20px var(--yellow);
   animation: target 3s linear 3s forwards;
-  /* @apply bg-yellow-light; */
 }
 
 @keyframes target {

diff --git a/app/assets/stylesheets/tailwind/toolkit/gcds.css b/app/assets/stylesheets/tailwind/toolkit/gcds.css
@@ -1,9 +1,44 @@
+/* Theming API*/
 gcds-header {
   --gcds-header-margin: 0;
-  --gcds-nav-link-top-nav-padding: theme("spacing.5")
-    theme("spacing.gutterHalf") theme("spacing.5") 0;
+}
+gcds-nav-group {
+  --gcds-nav-group-trigger-focus-background: theme("colors.yellow.DEFAULT");
+  --gcds-nav-group-trigger-focus-text: theme("colors.black");
+  --gcds-nav-group-trigger-focus-border-radius: 0;
+  --gcds-nav-group-trigger-focus-outline: 3px solid
+    theme("colors.yellow.300");
+}
+
+gcds-nav-link {
+  --gcds-nav-link-focus-background: theme("colors.yellow.DEFAULT");
+  --gcds-nav-link-focus-text: theme("colors.black");
+  --gcds-nav-link-focus-border-radius: 0;
+  --gcds-nav-link-focus-outline: 3px solid
+    theme("colors.yellow.300");
 }
 
-nav#account gcds-nav-group[open] {
-  @apply bg-white border-1 border-t-0 border-gray-300;
+gcds-footer,
+gcds-header,
+gcds-link {
+  --gcds-link-focus-background: theme("colors.yellow.DEFAULT");
+  --gcds-link-focus-text: theme("colors.black");
+  --gcds-link-focus-border-radius: 0;
+  --gcds-link-focus-outline-width: 0;
+  --gcds-link-focus-box-shadow: 0 0 0 2px white, 0 0 0 5px theme('colors.yellow.300');
 }
+
+
+/* Interfacing with Notify */
+[slot=search] gcds-nav-group[open] {
+  @apply bg-white border border-gray-300;
+}
+[slot=search] gcds-nav-group {
+  @apply border border-transparent;
+}
+
+
+/* Recipe to set fluid width on containers, as does GCDS */
+.container.max-w-screen-xl {
+  width: 90%;
+}