Move the disableRipple behaviour up

web/apps/photos/src/components/Upload/UploadTypeSelector.tsx

@@ -221,7 +221,6 @@ const TakeoutOptions: React.FC<Omit<OptionsProps, "intent">> = ({
                         <FocusVisibleButton
                             color="accent"
                             fullWidth
-                            disableRipple
                             onClick={() => onSelect("folders")}
                         >
                             {t("select_folder")}
@@ -229,7 +228,6 @@ const TakeoutOptions: React.FC<Omit<OptionsProps, "intent">> = ({
                         <FocusVisibleButton
                             color="secondary"
                             fullWidth
-                            disableRipple
                             onClick={() => onSelect("zips")}
                         >
                             {t("Select zips")}
@@ -239,11 +237,7 @@ const TakeoutOptions: React.FC<Omit<OptionsProps, "intent">> = ({
                             target="_blank"
                             rel="noopener"
                         >
-                            <FocusVisibleButton
-                                color="secondary"
-                                fullWidth
-                                disableRipple
-                            >
+                            <FocusVisibleButton color="secondary" fullWidth>
                                 {t("faq")}
                             </FocusVisibleButton>
                         </Link>

web/apps/photos/src/utils/ui/index.tsx

@@ -36,6 +36,7 @@ export const getTrashFilesMessage = (
         action: deleteFileHelper,
         text: t("MOVE_TO_TRASH"),
         variant: "critical",
+        autoFocus: true,
     },
     close: { text: t("cancel") },
 });

web/packages/new/photos/components/DevSettings.tsx

@@ -177,7 +177,6 @@ const Form: React.FC<FormProps> = ({ initialAPIOrigin, onClose }) => {
                     color="accent"
                     fullWidth
                     disabled={form.isSubmitting}
-                    disableRipple
                 >
                     {t("save")}
                 </FocusVisibleButton>
@@ -185,7 +184,6 @@ const Form: React.FC<FormProps> = ({ initialAPIOrigin, onClose }) => {
                     onClick={onClose}
                     color="secondary"
                     fullWidth
-                    disableRipple
                 >
                     {t("cancel")}
                 </FocusVisibleButton>

web/packages/new/photos/components/FocusVisibleButton.tsx

@@ -1,10 +1,16 @@
-import { Button, styled } from "@mui/material";
+import { Button, styled, type ButtonProps } from "@mui/material";
+import React from "react";
 
-/** A MUI {@link Button} that shows a keyboard focus indicator. */
-export const FocusVisibleButton = styled(Button)`
-    /* Show an outline when the button gains keyboard focus, e.g. when the user
-       tabs to it. */
+export const RippleDisabledButton: React.FC<ButtonProps> = (...props) => (
+    <Button disableRipple {...props} />
+);
+
+/**
+ * A MUI {@link Button} that shows a keyboard focus indicator, e.g. when the
+ * user tabs to it
+ */
+export const FocusVisibleButton = styled(RippleDisabledButton)`
     &.Mui-focusVisible {
-        outline: 1px solid #aaa;
+        outline: 1px solid #fff;
     }
 `;

web/packages/new/photos/components/WhatsNew.tsx

@@ -58,7 +58,6 @@ export const WhatsNew: React.FC<WhatsNewProps> = ({ open, onClose }) => {
                         onClick={onClose}
                         color="accent"
                         fullWidth
-                        disableRipple
                         endIcon={<ArrowForward />}
                     >
                         <ButtonContents>{ut("Continue")}</ButtonContents>

web/packages/shared/components/DialogBox/index.tsx

@@ -1,6 +1,6 @@
+import { FocusVisibleButton } from "@/new/photos/components/FocusVisibleButton";
 import {
     Breakpoint,
-    Button,
     DialogActions,
     DialogContent,
     DialogProps,
@@ -73,7 +73,7 @@ export default function DialogBox({
                 <DialogActions>
                     <>
                         {attributes.close && (
-                            <Button
+                            <FocusVisibleButton
                                 size="large"
                                 color={attributes.close?.variant ?? "secondary"}
                                 onClick={() => {
@@ -83,10 +83,10 @@ export default function DialogBox({
                                 }}
                             >
                                 {attributes.close?.text ?? t("OK")}
-                            </Button>
+                            </FocusVisibleButton>
                         )}
                         {attributes.proceed && (
-                            <Button
+                            <FocusVisibleButton
                                 size="large"
                                 color={attributes.proceed?.variant}
                                 onClick={() => {
@@ -95,13 +95,12 @@ export default function DialogBox({
                                 }}
                                 disabled={attributes.proceed.disabled}
                                 autoFocus={attributes.proceed?.autoFocus}
-                                disableFocusRipple={attributes.proceed?.autoFocus}
                             >
                                 {attributes.proceed.text}
-                            </Button>
+                            </FocusVisibleButton>
                         )}
                         {attributes.secondary && (
-                            <Button
+                            <FocusVisibleButton
                                 size="large"
                                 color={attributes.secondary?.variant}
                                 onClick={() => {
@@ -111,7 +110,7 @@ export default function DialogBox({
                                 disabled={attributes.secondary.disabled}
                             >
                                 {attributes.secondary.text}
-                            </Button>
+                            </FocusVisibleButton>
                         )}
                     </>
                 </DialogActions>