Add focus-visible handling to consent form

Author: webstackdev

_TODO.md

@@ -257,3 +257,5 @@ This article has different approaches to [print pagination](https://www.customjs
 - Need an article on OpenStack
 
 - Add links to the privacy policy page to go to preferences and my-data
+
+- The four service offerings should be clickable links that take you to the Contact page and pre-fill in the form with the service the person is interested in. The Contact project scopes could have the four services offerings and a "general questions" option.

src/components/Layout/HeadingAnchor/index.astro

@@ -6,4 +6,4 @@ export type Props = {
 const { href } = Astro.props
 ---
 
-<a class="heading-anchor no-underline hover:no-underline focus-visible:no-underline transition-colors" aria-label="Link to this section" href={href}><span class="anchor-link text-base sm:text-lg" aria-hidden="true">🔗</span></a>
+<a class="heading-anchor no-underline hover:no-underline focus-visible:no-underline transition-colors" aria-label="Link to this section" href={href} tabindex="-1"><span class="anchor-link text-base sm:text-lg" aria-hidden="true">🔗</span></a>

src/components/Pages/Consent/index.astro

@@ -161,7 +161,7 @@ const { content } = Astro.props
                   checked
                 />
                 <div
-                  class="w-11 h-6 bg-content peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+                  class="w-11 h-6 bg-content rounded-full peer dark:bg-gray-700 peer-focus-visible:outline-2 peer-focus-visible:outline-spotlight peer-focus-visible:outline-offset-2 peer-focus-visible:rounded-none peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
                 >
                 </div>
               </label>
@@ -189,7 +189,7 @@ const { content } = Astro.props
                   aria-describedby="consent-preferences__functional-desc"
                 />
                 <div
-                  class="w-11 h-6 bg-content peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+                  class="w-11 h-6 bg-content rounded-full peer dark:bg-gray-700 peer-focus-visible:outline-2 peer-focus-visible:outline-spotlight peer-focus-visible:outline-offset-2 peer-focus-visible:rounded-none peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
                 >
                 </div>
               </label>
@@ -220,7 +220,7 @@ const { content } = Astro.props
                   aria-describedby="consent-preferences__marketing-desc"
                 />
                 <div
-                  class="w-11 h-6 bg-content peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
+                  class="w-11 h-6 bg-content rounded-full peer dark:bg-gray-700 peer-focus-visible:outline-2 peer-focus-visible:outline-spotlight peer-focus-visible:outline-offset-2 peer-focus-visible:rounded-none peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600"
                 >
                 </div>
               </label>
@@ -234,19 +234,19 @@ const { content } = Astro.props
       <div class="px-6 py-4 flex gap-3 justify-end flex-wrap">
         <button
           id="consent-allow-all"
-          class="px-6 py-2 bg-success-offset text-content-inverse rounded-lg hover:bg-success transition-colors duration-200 font-medium"
+          class="px-6 py-2 bg-success-offset text-content-inverse rounded-lg hover:bg-success transition-colors duration-200 font-medium focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
         >
           {content.buttons.acceptAll}
         </button>
         <button
           id="consent-deny-all"
-          class="px-6 py-2 bg-warning-offset text-content-inverse rounded-lg hover:bg-warning transition-colors duration-200 font-medium"
+          class="px-6 py-2 bg-warning-offset text-content-inverse rounded-lg hover:bg-warning transition-colors duration-200 font-medium focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
         >
           {content.buttons.rejectAll}
         </button>
         <button
           id="consent-save-preferences"
-          class="px-6 py-2 text-content-inverse rounded-lg cursor-not-allowed transition-colors duration-200 font-medium"
+          class="px-6 py-2 text-content-inverse rounded-lg cursor-not-allowed transition-colors duration-200 font-medium focus-visible:outline-2 focus-visible:outline-spotlight focus-visible:outline-offset-2 focus-visible:rounded-none"
           disabled
           aria-disabled="true"
         >