Add title attributes to Marker icons

Author: webstackdev

src/components/CallToAction/Download/index.astro

@@ -5,7 +5,7 @@
  */
 import { BuildError } from '@lib/errors/BuildError'
 import List from '@components/List/index.astro'
-import Marker from '@components/List/marker.astro'
+import Marker from '@components/Marker/index.astro'
 
 export interface Props {
   /** Optional base id for internal aria relationships */

src/components/Consent/Preferences/client/__tests__/index.spec.ts

@@ -242,6 +242,7 @@ describe('ConsentPreferencesElement', () => {
       analyticsCheckbox!.checked = true
       functionalCheckbox!.checked = false
       marketingCheckbox!.checked = true
+      marketingCheckbox!.dispatchEvent(new window.Event('change', { bubbles: true }))
 
       const saveBtn = window.document.getElementById(
         'consent-save-preferences'
@@ -255,4 +256,26 @@ describe('ConsentPreferencesElement', () => {
       expect(updateConsent).toHaveBeenCalledWith('marketing', true)
     })
   })
+
+  it('enables save button only when preferences differ from saved consent', async () => {
+    await renderConsentPreferences(({ window }) => {
+      const saveBtn = window.document.getElementById(
+        'consent-save-preferences'
+      ) as HTMLButtonElement | null
+      const functionalCheckbox = window.document.getElementById(
+        'functional-cookies'
+      ) as HTMLInputElement | null
+
+      expect(saveBtn).not.toBeNull()
+      expect(functionalCheckbox).not.toBeNull()
+      expect(saveBtn!.disabled).toBe(true)
+
+      functionalCheckbox!.checked = true
+      functionalCheckbox!.dispatchEvent(new window.Event('change', { bubbles: true }))
+      expect(saveBtn!.disabled).toBe(false)
+
+      saveBtn!.dispatchEvent(new window.MouseEvent('click', { bubbles: true }))
+      expect(saveBtn!.disabled).toBe(true)
+    })
+  })
 })

src/components/Consent/Preferences/client/index.ts

@@ -32,9 +32,18 @@ export const CONSENT_PREFERENCES_READY_EVENT = 'consent-preferences:ready'
 export class ConsentPreferencesElement extends LitElement {
   static registeredName = COMPONENT_TAG_NAME
 
+  private static readonly saveButtonDisabledClasses = [
+    'bg-gray-300',
+    'cursor-not-allowed',
+    'hover:bg-gray-300',
+  ]
+
+  private static readonly saveButtonEnabledClasses = ['bg-spotlight', 'hover:bg-spotlight-offset']
+
   private allowAllBtn!: HTMLButtonElement
   private denyAllBtn!: HTMLButtonElement
   private saveBtn!: HTMLButtonElement
+  private toggleChangeHandler: (() => void) | null = null
   private domReadyHandler: (() => void) | null = null
   private beforePreparationHandler: (() => void) | null = null
   private afterSwapHandler: (() => void) | null = null
@@ -85,6 +94,8 @@ export class ConsentPreferencesElement extends LitElement {
       this.unsubscribeConsent = null
     }
 
+    this.removePreferenceToggleListeners()
+
     this.isInitialized = false
     delete this.dataset['consentPreferencesReady']
   }
@@ -135,6 +146,7 @@ export class ConsentPreferencesElement extends LitElement {
 
   private syncConsentState(consent: ConsentState): void {
     this.updateCheckboxes(consent)
+    this.updateSaveButtonState()
   }
 
   private setViewTransitionsHandlers(): void {
@@ -182,6 +194,83 @@ export class ConsentPreferencesElement extends LitElement {
     addButtonEventListeners(this.allowAllBtn, () => this.allowAll())
     addButtonEventListeners(this.denyAllBtn, () => this.denyAll())
     addButtonEventListeners(this.saveBtn, () => this.savePreferences())
+
+    if (!this.toggleChangeHandler) {
+      this.toggleChangeHandler = () => this.updateSaveButtonState()
+    }
+
+    this.bindPreferenceToggleListeners()
+  }
+
+  private bindPreferenceToggleListeners(): void {
+    this.removePreferenceToggleListeners()
+
+    const analyticsCheckbox = document.getElementById('analytics-cookies')
+    const functionalCheckbox = document.getElementById('functional-cookies')
+    const marketingCheckbox = document.getElementById('marketing-cookies')
+
+    if (!this.toggleChangeHandler) {
+      return
+    }
+
+    if (isInputElement(analyticsCheckbox)) {
+      analyticsCheckbox.addEventListener('change', this.toggleChangeHandler)
+    }
+
+    if (isInputElement(functionalCheckbox)) {
+      functionalCheckbox.addEventListener('change', this.toggleChangeHandler)
+    }
+
+    if (isInputElement(marketingCheckbox)) {
+      marketingCheckbox.addEventListener('change', this.toggleChangeHandler)
+    }
+  }
+
+  private removePreferenceToggleListeners(): void {
+    const analyticsCheckbox = document.getElementById('analytics-cookies')
+    const functionalCheckbox = document.getElementById('functional-cookies')
+    const marketingCheckbox = document.getElementById('marketing-cookies')
+
+    if (!this.toggleChangeHandler) {
+      return
+    }
+
+    if (isInputElement(analyticsCheckbox)) {
+      analyticsCheckbox.removeEventListener('change', this.toggleChangeHandler)
+    }
+
+    if (isInputElement(functionalCheckbox)) {
+      functionalCheckbox.removeEventListener('change', this.toggleChangeHandler)
+    }
+
+    if (isInputElement(marketingCheckbox)) {
+      marketingCheckbox.removeEventListener('change', this.toggleChangeHandler)
+    }
+  }
+
+  private updateSaveButtonState(): void {
+    const currentPreferences = this.getCurrentPreferences()
+    const savedPreferences = getConsentSnapshot()
+
+    const hasUnsavedChanges =
+      (currentPreferences.analytics ?? false) !== (savedPreferences.analytics ?? false) ||
+      (currentPreferences.functional ?? false) !== (savedPreferences.functional ?? false) ||
+      (currentPreferences.marketing ?? false) !== (savedPreferences.marketing ?? false)
+
+    this.saveBtn.disabled = !hasUnsavedChanges
+    this.saveBtn.setAttribute('aria-disabled', String(!hasUnsavedChanges))
+
+    const disabledClasses = ConsentPreferencesElement.saveButtonDisabledClasses
+    const enabledClasses = ConsentPreferencesElement.saveButtonEnabledClasses
+
+    this.saveBtn.classList.remove(...disabledClasses, ...enabledClasses)
+
+    if (hasUnsavedChanges) {
+      this.saveBtn.classList.add(...enabledClasses)
+      return
+    }
+
+    this.saveBtn.classList.add(...disabledClasses)
   }
 
   private updateCheckboxes(preferences: ConsentState): void {
@@ -201,6 +290,10 @@ export class ConsentPreferencesElement extends LitElement {
   }
 
   private savePreferences(): void {
+    if (this.saveBtn.disabled) {
+      return
+    }
+
     const preferences = this.getCurrentPreferences()
 
     updateConsent('analytics', preferences.analytics ?? false)

src/components/Consent/Preferences/index.astro

@@ -209,7 +209,9 @@ import logoSvg from '@assets/images/site/logo.svg'
       </button>
       <button
         id="consent-save-preferences"
-        class="px-6 py-2 bg-gray-300 text-white rounded-lg hover:bg-gray-700transition-colors duration-200 font-medium"
+        class="px-6 py-2 bg-gray-300 text-white rounded-lg hover:bg-gray-300 cursor-not-allowed transition-colors duration-200 font-medium"
+        disabled
+        aria-disabled="true"
       >
         Save My Preferences
       </button>

src/components/Errors/NotFoundHero/index.astro

@@ -1,5 +1,5 @@
 ---
-import Marker from "@components/List/marker.astro"
+import Marker from "@components/Marker/index.astro"
 
 export type Props = {
   items: {

src/components/List/layouts/CheckIconsList.astro

@@ -1,5 +1,5 @@
 ---
-import Marker from "@components/List/marker.astro"
+import Marker from "@components/Marker/index.astro"
 
 export type Props = {
   items: {

src/components/List/layouts/ChevronList.astro

@@ -13,14 +13,7 @@ export type Props = {
   size?: number
 }
 
-type ColoredMarkerListItem = Props['items'][number]
-
 const { items, classes, size = 2 }: Props = Astro.props
-const coloredItems: ColoredMarkerListItem[] = items.map((item: ColoredMarkerListItem) => ({
-  text: item.text,
-  color: item.color,
-  ...(item.lead ? { lead: item.lead } : {}),
-}))
 
 const ulClass = ["list-none pl-0 text-content mt-4 mb-2 space-y-2", classes?.ul]
 const liClass = ["flex items-start", classes?.li]
@@ -29,7 +22,7 @@ const emClass = ["mr-2 not-italic font-bold", classes?.em]
 
 <ul class:list={ulClass}>
   {
-    coloredItems.map((item) => (
+    items.map((item) => (
       <li class:list={liClass}>
         <span class:list={[`w-${size} h-${size} rounded-full mt-3 mr-3 shrink-0`, item.color]} />
         <em class:list={emClass}>{item.lead}</em>

src/components/List/layouts/ColoredMarkerList.astro

@@ -1,5 +1,5 @@
 ---
-import Marker from '@components/List/marker.astro'
+import Marker from '@components/Marker/index.astro'
 
 export type Props = {
   items: {

src/components/List/layouts/PlainIconList.astro

@@ -1,5 +1,5 @@
 ---
-import Marker from "@components/List/marker.astro"
+import Marker from "@components/Marker/index.astro"
 
 export type Props = {
   items: {