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(