Skip to content

fix(Menu/Dropdown): updated external link and focus management #8879

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

Merged
merged 2 commits into from
Apr 5, 2023
Merged

fix(Menu/Dropdown): updated external link and focus management #8879

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
c8e44df
fix(Menu/Dropdown): updated external link and focus management
Mar 29, 2023
a7fa54d
Updated menu with links example description
Mar 31, 2023
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
4 changes: 3 additions & 1 deletion packages/react-core/src/components/Dropdown/Dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,9 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
// toggle was clicked open via keyboard, focus on first menu item
if (isOpen && toggleRef.current?.contains(event.target as Node) && event.detail === 0) {
setTimeout(() => {
const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
const firstElement = menuRef?.current?.querySelector(
'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
);
firstElement && (firstElement as HTMLElement).focus();
}, 0);
}
Expand Down
17 changes: 10 additions & 7 deletions packages/react-core/src/components/Menu/MenuItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,9 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
actions?: React.ReactNode;
/** Description of the menu item */
description?: React.ReactNode;
/** Render external link icon */
/** Render an external link icon on focus or hover, and set the link's
* "target" attribute to a value of "_blank".
*/
isExternalLink?: boolean;
/** Flag indicating if the option is selected */
isSelected?: boolean;
Expand Down Expand Up @@ -191,7 +193,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
if (flyoutVisible) {
const flyoutMenu = (flyoutTarget as HTMLElement).nextElementSibling;
const flyoutItems = Array.from(flyoutMenu.getElementsByTagName('UL')[0].children).filter(
el => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
(el) => !(el.classList.contains('pf-m-disabled') || el.classList.contains('pf-c-divider'))
);
(flyoutItems[0].firstChild as HTMLElement).focus();
} else {
Expand Down Expand Up @@ -232,7 +234,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
let drill: (event: React.KeyboardEvent | React.MouseEvent) => void;
if (direction) {
if (direction === 'down') {
drill = event =>
drill = (event) =>
onDrillIn &&
onDrillIn(
event,
Expand All @@ -243,7 +245,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
itemId
);
} else {
drill = event => onDrillOut && onDrillOut(event, parentMenu, itemId);
drill = (event) => onDrillOut && onDrillOut(event, parentMenu, itemId);
}
}
let additionalProps = {} as any;
Expand All @@ -252,7 +254,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
href: to,
'aria-disabled': isDisabled ? true : null,
// prevent invalid 'disabled' attribute on <a> tags
disabled: null
disabled: null,
target: isExternalLink ? '_blank' : null
};
} else if (Component === 'button') {
additionalProps = {
Expand Down Expand Up @@ -317,7 +320,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
{...props}
>
<GenerateId>
{randomId => (
{(randomId) => (
<Component
id={id}
tabIndex={-1}
Expand Down Expand Up @@ -393,7 +396,7 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
icon="favorites"
isFavorited={isFavorited}
aria-label={isFavorited ? 'starred' : 'not starred'}
onClick={event => onActionClick(event, itemId)}
onClick={(event) => onActionClick(event, itemId)}
tabIndex={-1}
actionId="fav"
/>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Menu/examples/Menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ To trigger an action when a specific item's action icon is selected, pass in the

### With links

Use the `to` property to add a link to a `<MenuItem>` that directs users to a new page when the item is selected. Use the `isExternalLink` property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it.
Use the `to` property to add a link to a `<MenuItem>` that directs users to a new page when the item is selected. Use the `isExternalLink` property when linking to external resources. This will annotate a menu item link with an external link icon when they navigate to the link or hover over it, as well as add `target="_blank"` so that the link opens in a new tab or window.

```ts file="MenuWithLinks.tsx"

Expand Down