From b377f9cba719d5d43af22dfadd6448dee3d2ef16 Mon Sep 17 00:00:00 2001
From: Aman Harwara <amanharwara@protonmail.com>
Date: Mon, 20 Nov 2023 21:34:51 +0530
Subject: [PATCH] fix: Fixed issue where search options weren't selectable on
 macOS

---
 .../web/src/javascripts/Components/Bubble/Bubble.tsx   | 10 ++++++++--
 .../Components/SearchOptions/SearchOptions.tsx         |  2 +-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/javascripts/Components/Bubble/Bubble.tsx b/packages/web/src/javascripts/Components/Bubble/Bubble.tsx
index 4a76689bc..65865a47c 100644
--- a/packages/web/src/javascripts/Components/Bubble/Bubble.tsx
+++ b/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
diff --git a/packages/web/src/javascripts/Components/SearchOptions/SearchOptions.tsx b/packages/web/src/javascripts/Components/SearchOptions/SearchOptions.tsx
index 4854a4426..89829a3ea 100644
--- a/packages/web/src/javascripts/Components/SearchOptions/SearchOptions.tsx
+++ b/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}