feat: add accessibility attributes to buttons in CopyButton, Navbar, and SchemaSearch components

Author: ErwanDecoster

src/components/CopyButton.tsx

@@ -63,6 +63,9 @@ const CopyButton = ({
               onMouseEnter={handleMouseEnter}
               onMouseLeave={handleMouseLeave}
               className="hover:before:bg-muted active:before:bg-secondary relative z-0 -mx-1 -my-1 flex items-center gap-1 px-1 py-1 transition-colors before:absolute before:inset-0 before:-z-10 before:rounded-lg before:duration-200 active:before:scale-x-[0.98] active:before:scale-y-[0.94]"
+              id="copy-button"
+              type="button"
+              aria-label="Copy"
             >
               {buttonText && <span className="mr-1 text-sm">{buttonText}</span>}
               <Copy className="size-4 flex-none" />

src/components/navbar/NavBar.tsx

@@ -50,6 +50,8 @@ export function Navbar() {
 
             <button
               type="button"
+              id="logout-button"
+              aria-label="Logout"
               className="hover:drop-shadow-link-hover p-1"
               onClick={() => logout()}
             >
@@ -93,6 +95,8 @@ export function Navbar() {
 
                 <button
                   type="button"
+                  id="logout-button"
+                  aria-label="Logout"
                   className="hover:drop-shadow-link-hover p-1"
                   onClick={() => logout()}
                 >

src/modules/datasets/SchemaSearch.tsx

@@ -46,6 +46,8 @@ export function SchemaSearch({
   return (
     <div className="rounded-2xl border">
       <button
+        id="schema-search-button"
+        aria-label="Toggle schema search filters"
         className={cn('flex w-full items-center gap-2 px-10 py-6 duration-200')}
         onClick={() => setIsOpen(!isOpen)}
       >
@@ -103,7 +105,12 @@ export function SchemaSearch({
                   >
                     <span className={cn('inline-block')}>{schema.path}</span>
                     <span className={cn('inline-block')}>: {schema.type}</span>
-                    <button onClick={() => onRemoveFilter(index)}>
+                    <button
+                      type="button"
+                      id={`remove-filter-${index}`}
+                      aria-label={`Remove filter ${schema.path} of type ${schema.type}`}
+                      onClick={() => onRemoveFilter(index)}
+                    >
                       <X className="ml-1" size={12} />
                     </button>
                   </span>