diff --git a/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts b/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
index c1854f6810411..edc4fc808cb3a 100644
--- a/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
+++ b/packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts
@@ -46,18 +46,18 @@ export const focusInteractive = style([
basicInteractive,
{
selectors: {
- ':not([data-mobile="true"]) &::before': {
+ '&::before': {
opacity: 0,
boxShadow: `0 0 0 2px ${cssVar('brandColor')}`,
},
- ':not([data-mobile="true"]) &::after': {
+ '&::after': {
border: '1px solid transparent',
},
- ':not([data-mobile="true"]) &:focus-visible::before': {
+ '&:focus-visible::before': {
opacity: 0.5,
},
- ':not([data-mobile="true"]) &:focus-visible::after': {
+ '&:focus-visible::after': {
borderColor: cssVar('brandColor'),
},
},
diff --git a/packages/frontend/component/src/ui/menu/mobile/root.tsx b/packages/frontend/component/src/ui/menu/mobile/root.tsx
index e1530ff84e1bd..d5f731f4135e5 100644
--- a/packages/frontend/component/src/ui/menu/mobile/root.tsx
+++ b/packages/frontend/component/src/ui/menu/mobile/root.tsx
@@ -130,6 +130,7 @@ export const MobileMenu = ({
className: clsx(className, styles.mobileMenuModal),
...otherContentOptions,
}}
+ disableAutoFocus={true}
>
@@ -83,7 +84,7 @@ class ModalTransitionContainer extends HTMLElement {
this.requestTransition();
return child;
} else {
- // eslint-disable-next-line unicorn/prefer-dom-node-remove
+ // oxlint-disable-next-line unicorn/prefer-dom-node-remove
return super.removeChild(child);
}
}
@@ -105,7 +106,7 @@ class ModalTransitionContainer extends HTMLElement {
});
startScopedViewTransition(styles.modalVTScope, () => {
nodes.forEach(child => {
- // eslint-disable-next-line unicorn/prefer-dom-node-remove
+ // oxlint-disable-next-line unicorn/prefer-dom-node-remove
super.removeChild(child);
});
});
@@ -163,6 +164,7 @@ export const ModalInner = forwardRef(
contentWrapperStyle,
animation = BUILD_CONFIG.isMobileEdition ? 'slideBottom' : 'fadeScaleTop',
fullScreen,
+ disableAutoFocus,
...otherProps
} = props;
const { className: closeButtonClassName, ...otherCloseButtonProps } =
@@ -208,6 +210,13 @@ export const ModalInner = forwardRef(
[onEscapeKeyDown, persistent]
);
+ const handleAutoFocus = useCallback(
+ (e: Event) => {
+ disableAutoFocus && e.preventDefault();
+ },
+ [disableAutoFocus]
+ );
+
if (!container) {
return;
}
@@ -249,6 +258,7 @@ export const ModalInner = forwardRef(
onPointerDownOutside={handlePointerDownOutSide}
onEscapeKeyDown={handleEscapeKeyDown}
className={clsx(styles.modalContent, contentClassName)}
+ onOpenAutoFocus={handleAutoFocus}
style={{
...assignInlineVars({
[styles.widthVar]: getVar(