Alternative fix for laurent22#9982: Make focus look similar to hover

personalizedrefrigerator · Feb 23, 2024 · bdeab4b · bdeab4b
1 parent 4d4fa49
commit bdeab4b
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 10 deletions.
diff --git a/packages/app-desktop/gui/Button/Button.tsx b/packages/app-desktop/gui/Button/Button.tsx
@@ -80,8 +80,9 @@ const StyledButtonPrimary = styled(StyledButtonBase)`
 	background-color: ${(props: any) => props.theme.backgroundColor5};
 
 	${(props: any) => props.disabled} {
-		&:hover {
+		&:hover, &:focus-visible {
 			background-color: ${(props: any) => props.theme.backgroundColorHover5};
+			outline: none;
 		}
 
 		&:active {
@@ -103,8 +104,9 @@ const StyledButtonSecondary = styled(StyledButtonBase)`
 	background-color: ${(props: any) => props.theme.backgroundColor4};
 
 	${(props: any) => props.disabled} {
-		&:hover {
+		&:hover, &:focus-visible {
 			background-color: ${(props: any) => props.theme.backgroundColorHover4};
+			outline: none;
 		}
 
 		&:active {
@@ -125,7 +127,7 @@ const StyledButtonTertiary = styled(StyledButtonBase)`
 	border: 1px solid ${(props: any) => props.theme.color3};
 	background-color: ${(props: any) => props.theme.backgroundColor3};
 
-	&:hover {
+	&:hover, &:focus-visible {
 		background-color: ${(props: any) => props.theme.backgroundColorHoverDim3};
 	}
 
@@ -162,7 +164,7 @@ const StyledButtonSidebarSecondary = styled(StyledButtonBase)`
 	border-color: ${(props: any) => props.theme.color2};
 	color: ${(props: any) => props.theme.color2};
 
-	&:hover {
+	&:hover, &:focus-visible {
 		color: ${(props: any) => props.theme.colorHover2};
 		border-color: ${(props: any) => props.theme.colorHover2};
 		background: none;

diff --git a/packages/app-desktop/gui/ConfigScreen/Sidebar.tsx b/packages/app-desktop/gui/ConfigScreen/Sidebar.tsx
@@ -32,8 +32,9 @@ export const StyledListItem = styled.a`
 	opacity: ${(props: any) => props.selected ? 1 : 0.8};
 	padding-left: ${(props: any) => props.isSubSection ? '35' : props.theme.mainPadding}px;
 
-	&:hover {
+	&:hover, &:focus-visible {
 		background-color: ${(props: any) => props.theme.backgroundColorHover2};
+		outline: none;
 	}
 `;
 

diff --git a/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx b/packages/app-desktop/gui/NoteEditor/NoteBody/TinyMCE/TinyMCE.tsx
@@ -433,6 +433,7 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			.tox .tox-tbtn--enabled,
 			.tox .tox-tbtn--enabled:hover,
 			.tox .tox-menu button:hover,
+			.tox .tox-menu button:focus-visible,
 			.tox .tox-split-button {
 				background-color: ${theme.selectedColor};
 			}
@@ -447,7 +448,9 @@ const TinyMCE = (props: NoteBodyEditorProps, ref: any) => {
 			}
 			
 			.tox .tox-tbtn:hover,
-			.tox .tox-menu button:hover > svg {
+			.tox .tox-tbtn:focus-visible,
+			.tox .tox-menu button:hover > svg,
+			.tox .tox-menu button:focus-visible > svg {
 				color: ${theme.colorHover3} !important;
 				fill: ${theme.colorHover3} !important;
 				background-color: ${theme.backgroundColorHover3}

diff --git a/packages/app-desktop/gui/NoteListItem.tsx b/packages/app-desktop/gui/NoteListItem.tsx
@@ -35,8 +35,9 @@ const StyledRoot = styled.div`
 		left: 16px;
 	}
 
-	&:hover {
+	&:hover, &:focus-visible {
 		background-color: ${(props: any) => props.theme.backgroundColorHover3};
+		outline: none;
 	}
 `;
 

diff --git a/packages/app-desktop/gui/Sidebar/styles/index.ts b/packages/app-desktop/gui/Sidebar/styles/index.ts
@@ -57,8 +57,9 @@ export const StyledListItem = styled.div`
 	/*text-transform: ${(props: any) => props.isSpecialItem ? 'uppercase' : 'none'};*/
 	transition: 0.1s;
 
-	&:hover {
+	&:hover, &:focus-visible {
 		background-color: ${(props: any) => props.theme.backgroundColorHover2};
+		outline: none;
 	}
 `;
 

diff --git a/packages/app-desktop/gui/ToolbarButton/styles/index.ts b/packages/app-desktop/gui/ToolbarButton/styles/index.ts
@@ -24,8 +24,9 @@ export const StyledRoot = styled.a<RootProps>`
 	padding-left: 5px;
 	padding-right: 5px;
 
-	&:hover {
+	&:hover, &:focus-visible {
 		background-color: ${(props: RootProps) => props.disabled ? 'none' : props.theme.backgroundColorHover3};
+		outline: none;
 	}
 `;
 

diff --git a/packages/app-desktop/main.scss b/packages/app-desktop/main.scss
@@ -69,7 +69,7 @@ a {
 	border: 1px solid rgba(0,160,255,0);
 }
 
-.icon-button:hover {
+.icon-button:hover, .icon-button:focus-visible {
 	background-color: rgba(0,0,0,0.05) !important;
 	border: 1px solid rgba(0,0,0,0.10);
 	border-radius: 5px;