fix: Fixed issue where search options weren't selectable on macOS

packages/web/src/javascripts/Components/Bubble/Bubble.tsx

@@ -1,3 +1,4 @@
+import { classNames } from '@standardnotes/snjs'
 import { FunctionComponent } from 'react'
 
 type Props = {
@@ -13,9 +14,14 @@ const styles = {
 }
 
 const Bubble: FunctionComponent<Props> = ({ label, selected, onSelect }) => (
-  <span role="tab" className={`${styles.base} ${selected ? styles.selected : styles.unselected}`} onClick={onSelect}>
+  <button
+    role="checkbox"
+    aria-checked={selected}
+    className={classNames(styles.base, selected ? styles.selected : styles.unselected)}
+    onClick={onSelect}
+  >
     {label}
-  </span>
+  </button>
 )
 
 export default Bubble

packages/web/src/javascripts/Components/SearchOptions/SearchOptions.tsx

@@ -15,7 +15,7 @@ const SearchOptions = ({ searchOptions }: Props) => {
   }, [searchOptions])
 
   return (
-    <div role="tablist" className="mt-3 flex flex-wrap gap-2" onMouseDown={(e) => e.preventDefault()}>
+    <div className="mt-3 flex flex-wrap gap-2" onMouseDown={(e) => e.preventDefault()}>
       <Bubble
         label="Protected Contents"
         selected={includeProtectedContents}