Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BST-189]: Fixed autofocus on submenu's first element #6

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

[BST-189]: Fixed autofocus on submenu's first element #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
11ba4ef
[BST-189]: Fixed autofocus on submenu's first element
ayush-chauhan233 Nov 29, 2024
29df78b
[BST-189]: Review fixes: Added padding shorthand and header props to …
ayush-chauhan233 Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 7 additions & 5 deletions webapp/channels/src/components/dot_menu/post_reminder_submenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,13 +159,15 @@ function PostReminderSubmenu(props: Props) {
leadingElement={<ClockOutlineIcon size={18}/>}
trailingElements={<span className={'dot-menu__item-trailing-icon'}><ChevronRightIcon size={16}/></span>}
menuId={`remind_post_${props.post.id}-menu`}
>
<h5 className={'dot-menu__post-reminder-menu-header'}>
subMenuHeader={<h5 className={'dot-menu__post-reminder-menu-header'}>
{formatMessage(
{id: 'post_info.post_reminder.sub_menu.header',
defaultMessage: 'Set a reminder for:'},
{
id: 'post_info.post_reminder.sub_menu.header',
defaultMessage: 'Set a reminder for:',
},
)}
</h5>
</h5>}
>
{postReminderSubMenuItems}
</Menu.SubMenu>
);
Expand Down
2 changes: 1 addition & 1 deletion webapp/channels/src/components/menu/menu.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ describe('menu click handlers', () => {
expect(screen.getByText('Open modal from submenu')).toBeInTheDocument();

// Press the down arrow once to focus first submenu item and then twice more to select the one we want
userEvent.keyboard('{arrowdown}{arrowdown}{arrowdown}');
userEvent.keyboard('{arrowdown}{arrowdown}');

expect(screen.getByText('Open modal from submenu').closest('li')).toHaveFocus();

Expand Down
38 changes: 27 additions & 11 deletions webapp/channels/src/components/menu/menu_styled.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,42 @@

import MuiMenu from '@mui/material/Menu';
import type {MenuProps as MuiMenuProps} from '@mui/material/Menu';
import MuiPopover from '@mui/material/Popover';
import type {PopoverProps as MuiPopoverProps} from '@mui/material/Popover';
import {styled} from '@mui/material/styles';

interface Props extends MuiMenuProps {
asSubMenu?: boolean;
interface PopoverProps extends MuiPopoverProps {
width?: string;
}

interface MenuProps extends MuiMenuProps {
width?: string;
}

/**
* A styled version of the Material-UI Menu component with few overrides.
* @warning This component is meant to be only used inside of the Menu component directory.
* A styled version of the Material-UI Popover component with few overrides.
* @warning This component is meant to be only used inside of the SubMenu component directory.
*/
export const MuiMenuStyled = styled(MuiMenu, {
shouldForwardProp: (prop) => prop !== 'asSubMenu',
})<Props>(
({asSubMenu, width}) => ({
export const MuiPopoverStyled = styled(MuiPopover)<PopoverProps>(
({width}) => ({
'& .MuiPaper-root': {
paddingTop: '4px',
paddingBottom: '4px',
backgroundColor: 'var(--center-channel-bg)',
boxShadow: 'var(--elevation - 5), 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.12) inset',
minWidth: '114px',
maxWidth: '496px',
maxHeight: '80vh',
width,
},
}),
);

export const MuiMenuStyled = styled(MuiMenu)<MenuProps>(
({width}) => ({
'& .MuiPaper-root': {
backgroundColor: 'var(--center-channel-bg)',
boxShadow: `${
asSubMenu ? 'var(--elevation-5)' : 'var(--elevation-4)'
}, 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.12) inset`,
boxShadow: 'var(--elevation-4), 0 0 0 1px rgba(var(--center-channel-color-rgb), 0.12) inset',
minWidth: '114px',
maxWidth: '496px',
maxHeight: '80vh',
Expand Down
54 changes: 27 additions & 27 deletions webapp/channels/src/components/menu/sub_menu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ import {isKeyPressed} from 'utils/keyboard';
import {SubMenuContext, useMenuContextValue} from './menu_context';
import {MenuItem} from './menu_item';
import type {Props as MenuItemProps} from './menu_item';
import {MuiMenuStyled} from './menu_styled';
import {MuiPopoverStyled} from './menu_styled';

import './sub_menu.scss';

Expand All @@ -47,6 +47,7 @@ interface Props {
menuAriaLabel?: string;
forceOpenOnLeft?: boolean; // Most of the times this is not needed, since submenu position is calculated and placed

subMenuHeader?: ReactNode;
children: ReactNode;
}

Expand All @@ -61,6 +62,7 @@ export function SubMenu(props: Props) {
menuAriaLabel,
forceOpenOnLeft,
children,
subMenuHeader,
...rest
} = props;

Expand Down Expand Up @@ -134,6 +136,7 @@ export function SubMenu(props: Props) {
menuId,
menuAriaLabel,
children,
subMenuHeader,
},
}));
}
Expand Down Expand Up @@ -163,34 +166,28 @@ export function SubMenu(props: Props) {
onMouseLeave={handleMouseLeave}
onKeyDown={handleKeyDown}
>
<MuiMenuStyled
anchorEl={anchorElement}
open={isSubMenuOpen}
asSubMenu={true}
anchorOrigin={originOfAnchorAndTransform.anchorOrigin}
transformOrigin={originOfAnchorAndTransform.transformOrigin}
sx={{pointerEvents: 'none'}}
>
{/* This component is needed here to re enable pointer events for the submenu items which we had to disable above as */}
{/* pointer turns to default as soon as it leaves the parent menu */}
{/* Notice we dont use the below component in menu.tsx */}
<MuiMenuList
id={menuId}
component='ul'
aria-label={menuAriaLabel}
className={A11yClassNames.POPUP}
onKeyDown={handleSubMenuKeyDown}
sx={{
pointerEvents: 'auto', // reset pointer events to default from here on
paddingTop: 0,
paddingBottom: 0,
}}
<SubMenuContext.Provider value={providerValue}>
<MuiPopoverStyled
anchorEl={anchorElement}
open={isSubMenuOpen}
anchorOrigin={originOfAnchorAndTransform.anchorOrigin}
transformOrigin={originOfAnchorAndTransform.transformOrigin}
>
<SubMenuContext.Provider value={providerValue}>
{subMenuHeader}
<MuiMenuList
id={menuId}
aria-label={menuAriaLabel}
className={A11yClassNames.POPUP}
onKeyDown={handleSubMenuKeyDown}
autoFocusItem={true}
sx={{
py: 0,
}}
>
{children}
</SubMenuContext.Provider>
</MuiMenuList>
</MuiMenuStyled>
</MuiMenuList>
</MuiPopoverStyled>
</SubMenuContext.Provider>
</MenuItem>
);
}
Expand All @@ -199,6 +196,7 @@ interface SubMenuModalProps {
menuId: Props['menuId'];
menuAriaLabel?: Props['menuAriaLabel'];
children: Props['children'];
subMenuHeader?: ReactNode;
}

function SubMenuModal(props: SubMenuModalProps) {
Expand All @@ -220,9 +218,11 @@ function SubMenuModal(props: SubMenuModalProps) {
className='menuModal'
>
<MuiMenuList
component={'div'}
aria-hidden={true}
onClick={handleModalClose}
>
{props.subMenuHeader}
{props.children}
</MuiMenuList>
</GenericModal>
Expand Down
Loading