Fix implementation bug in search bar related to handling escape keypress

Author: webstackdev

_TODO.md

@@ -160,7 +160,3 @@ We have generated detailed outlines for each of the MDX proposed articles we hav
 Act as a principal software engineer. Your goal is to write a detailed technical article based on the provided outline. Context: The target audience is Senior DevOps and infrastructure Engineers. The tone should be authoritative, professional, and concise, avoiding fluff or filler words. Think step-by-step before writing to improve the accuracy of technical explanations. Use a friendly first-person voice. Anything that reads like generic marketing copy is not what we want but we still want the effect of being "real" and approachable - try not to sound like technical documentation. We want to show empathy for our readers.
 
 Let's work through each article section by section based on the H2 headers in the outline. If the section looks good as-is, I'll just type "ok" so you know to continue to the next section.
-
-## Build Errors
-
-22:50:48 [WARN] [glob-loader] The base directory "/home/kevin/Repos/WebstackBuilders/CorporateWebsite/astro.webstackbuilders.com/src/content/about/" does not exist.

src/components/Footer/footer.module.css

@@ -25,6 +25,22 @@
   stroke: var(--color-content);
 }
 
+.footerSocialLink {
+  text-decoration: none;
+}
+
+.footerSocialPlatform {
+  text-decoration-color: var(--color-primary);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 4px;
+}
+
+.footerSocialLink:hover .footerSocialPlatform,
+.footerSocialLink:focus-visible .footerSocialPlatform {
+  text-decoration-color: var(--color-secondary);
+}
+
 .footerSocialLink:hover :global([data-icon]),
 .footerSocialLink:focus-visible :global([data-icon]) {
   fill: var(--color-secondary);
@@ -211,6 +227,7 @@
 
   .footerHireMeAnchor {
     margin-top: 0.5rem;
+    text-decoration: none;
   }
 }
 

src/components/Footer/index.astro

@@ -74,7 +74,7 @@ const year = new Date().getFullYear()
           id="page-footer__hire-me-anchor"
           class:list={[
             styles.footerHireMeAnchor,
-            "hidden uppercase hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary after:ml-1 after:content-['>']",
+            "hidden uppercase hover:text-secondary focus:text-secondary after:ml-1 after:content-['>']",
           ]}
           aria-label="Available Now. Hire Me"
         >
@@ -96,7 +96,7 @@ const year = new Date().getFullYear()
                     rel="me"
                     class:list={[
                       styles.footerSocialLink,
-                      'group flex flex-col hover:text-secondary hover:decoration-secondary focus:text-secondary focus:decoration-secondary',
+                      'group flex flex-col hover:text-secondary focus:text-secondary',
                     ]}
                   >
                     <span class:list={[styles.footerSocialHeaderRow, 'flex items-baseline']}>

src/components/Search/SearchBar/client/__tests__/index.spec.ts

@@ -5,6 +5,7 @@ import SearchBarHeaderFixture from '@components/Search/SearchBar/client/__fixtur
 import type { SearchBarElement as SearchBarElementInstance } from '../index'
 import type { WebComponentModule } from '@components/scripts/@types/webComponentModule'
 import { executeRender } from '@test/unit/helpers/litRuntime'
+import { __resetHeaderSearchForTests } from '@components/scripts/store/search'
 
 type SearchBarModule = WebComponentModule<SearchBarElementInstance>
 
@@ -57,6 +58,8 @@ describe('SearchBar web component', () => {
     container = await AstroContainer.create()
     searchQueryMock.mockReset()
 
+    __resetHeaderSearchForTests()
+
     delete (globalThis as unknown as Record<string, unknown>)['SpeechRecognition']
     delete (globalThis as unknown as Record<string, unknown>)['webkitSpeechRecognition']
   })
@@ -173,7 +176,7 @@ describe('SearchBar web component', () => {
       expect(toggleBtn.hasAttribute('hidden')).toBe(true)
       expect(clearBtn.hasAttribute('hidden')).toBe(false)
 
-      input.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Escape', bubbles: true }))
+      input.dispatchEvent(new window.KeyboardEvent('keyup', { key: 'Escape', bubbles: true }))
       await flushMicrotasks()
 
       expect(toggleBtn.getAttribute('aria-expanded')).toBe('false')

src/components/Search/SearchBar/client/index.ts

@@ -434,19 +434,21 @@ export class SearchBarElement extends LitElement {
       return
     }
 
-    if (!(event instanceof KeyboardEvent)) {
+    if (!(typeof (event as KeyboardEvent).key === 'string')) {
       return
     }
 
-    if (event.key !== 'Escape') {
+    const keyboardEvent = event as KeyboardEvent
+
+    if (keyboardEvent.key !== 'Escape') {
       return
     }
 
     if (!this.isExpanded) {
       return
     }
 
-    event.preventDefault()
+    keyboardEvent.preventDefault()
     this.collapse({ restoreFocus: true })
   }