Desktop: Accessibility: Disable sync icon animation when reduce motion is enabled (#13283)

packages/app-desktop/gui/Button/Button.tsx

@@ -225,7 +225,7 @@ const Button = React.forwardRef(({
 			animation={iconAnimation}
 			mr={iconOnly ? '0' : '6px'}
 			color={color}
-			className={iconName}
+			className={`${iconName} icon`}
 			role='img'
 		/>;
 	}

packages/app-desktop/gui/Sidebar/Sidebar.tsx

@@ -25,14 +25,13 @@ interface Props {
 const SidebarComponent = (props: Props) => {
 	const renderSynchronizeButton = (type: string) => {
 		const label = type === 'sync' ? _('Synchronise') : _('Cancel');
-		const iconAnimation = type !== 'sync' ? 'icon-infinite-rotation 1s linear infinite' : '';
 
 		return (
 			<StyledSynchronizeButton
 				level={ButtonLevel.SidebarSecondary}
+				className={`sidebar-sync-button ${type === 'sync' ? '' : '-syncing'}`}
 				iconName="icon-sync"
 				key="sync_button"
-				iconAnimation={iconAnimation}
 				title={label}
 				onClick={() => {
 					void CommandService.instance().execute('synchronize', type !== 'sync');

packages/app-desktop/gui/Sidebar/style.scss

@@ -5,4 +5,5 @@
 @use 'styles/sidebar-expand-link.scss';
 @use 'styles/sidebar-header-container.scss';
 @use 'styles/sidebar-spacer-item.scss';
-@use 'styles/sidebar-header-button.scss';
+@use 'styles/sidebar-header-button.scss';
+@use 'styles/sidebar-sync-button.scss';

packages/app-desktop/gui/Sidebar/styles/sidebar-sync-button.scss

@@ -0,0 +1,16 @@
+
+@keyframes icon-infinite-rotation {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.sidebar-sync-button {
+	&.-syncing > .icon {
+		animation: icon-infinite-rotation 1s linear infinite;
+
+		@media (prefers-reduced-motion: reduce) {
+			animation: none;
+		}
+	}
+}

packages/app-desktop/main.scss

@@ -97,12 +97,6 @@ a {
 	border-radius: 5px;
 }
 
-@keyframes icon-infinite-rotation{
-	to {
-		transform: rotate(360deg);
-	}
-}
-
 .rdtPicker {
 	min-width: 250px;
 	width: auto !important;