fix guide a11y issue

Author: davemooreuws

src/components/guides/GuideFilterCheckbox.tsx

@@ -3,6 +3,7 @@
 import React from 'react'
 import { Checkbox } from '../ui/checkbox'
 import useParams from '@/hooks/useParams'
+import { dash } from 'radash'
 
 interface GuideFilterCheckboxProps {
   tag: string
@@ -15,7 +16,8 @@ const GuideFilterCheckbox: React.FC<GuideFilterCheckboxProps> = ({ tag }) => {
   return (
     <div className="flex items-center space-x-4">
       <Checkbox
-        id={tag}
+        id={dash(tag)}
+        aria-label={tag}
         checked={selectedTags.includes(tag)}
         onCheckedChange={(checked) => {
           if (checked) {
@@ -32,7 +34,7 @@ const GuideFilterCheckbox: React.FC<GuideFilterCheckboxProps> = ({ tag }) => {
         className="h-5 w-5 border-primary-400 data-[state=checked]:bg-primary"
       />
       <label
-        htmlFor={tag}
+        htmlFor={dash(tag)}
         className="cursor-pointer text-base font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
       >
         {tag}

src/components/guides/GuideMobileFilters.tsx

@@ -21,7 +21,7 @@ const GuideMobileFilters: React.FC<GuideMobileFiltersProps> = ({ allTags }) => {
   return (
     <Dialog>
       <DialogTrigger asChild>
-        <Button variant="outline" size="icon">
+        <Button variant="outline" size="icon" aria-label="Apply guide filters">
           <AdjustmentsHorizontalIcon className="h-6 w-6" />
         </Button>
       </DialogTrigger>