From 6ece94268ea9595213f33cb3dfaa62263cb7a2e5 Mon Sep 17 00:00:00 2001
From: Benedict Etzel <benedict@hearthsim.net>
Date: Tue, 22 Aug 2023 10:49:02 +0200
Subject: [PATCH] chore: clean up CheckBox.tsx

---
 src/utils/CheckBox.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/utils/CheckBox.tsx b/src/utils/CheckBox.tsx
index 4c7338a..8fd5398 100644
--- a/src/utils/CheckBox.tsx
+++ b/src/utils/CheckBox.tsx
@@ -8,7 +8,7 @@ interface Props {
 	onChange: (checked: boolean) => void;
 }
 
-const Container = styled.div<{ disabled?: boolean }>`
+const Container = styled.label<{ disabled?: boolean }>`
 	display: flex;
 	color: rgba(255, 255, 255, ${(props) => (props.disabled ? 0.5 : 1)});
 `;
@@ -30,9 +30,20 @@ export default class CheckBox extends React.Component<Props> {
 		return (
 			<Container
 				onClick={() => !disabled && onChange(!checked)}
+				onDoubleClick={(event) => {
+					// prevent Twitch fullscreen when clicked
+					event.stopPropagation();
+				}}
 				disabled={disabled}
 			>
-				<Box disabled={disabled}>{checked ? "✔" : ""}</Box>
+				<Box
+					disabled={disabled}
+					role="checkbox"
+					aria-checked={checked}
+					aria-disabled={disabled}
+				>
+					{checked ? "✔" : ""}
+				</Box>
 				{label}
 			</Container>
 		);