diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx index 886c67fcf48..6966811e045 100644 --- a/packages/react-core/src/components/Button/Button.tsx +++ b/packages/react-core/src/components/Button/Button.tsx @@ -124,6 +124,7 @@ const ButtonBase: React.FunctionComponent = ({ iconPosition = 'start', 'aria-label': ariaLabel = null, icon = null, + role, ouiaId, ouiaSafe = true, tabIndex = null, @@ -182,7 +183,7 @@ const ButtonBase: React.FunctionComponent = ({ disabled={isButtonElement ? isDisabled : null} tabIndex={tabIndex !== null ? tabIndex : getDefaultTabIdx()} type={isButtonElement || isInlineSpan ? type : null} - role={isInlineSpan ? 'button' : null} + role={isInlineSpan ? 'button' : role} ref={innerRef} {...ouiaProps} > diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md index c994bf6aa27..0939ade50e6 100644 --- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md +++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md @@ -11,13 +11,15 @@ propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps'] ### Selectable date ```ts file="./CalendarMonthSelectableDate.tsx" + ``` ### Date range In this example, there are 2 dates selected: a range start date (via the `rangeStart` prop) and a range end date (via the `date` prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the `validators` prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date. -For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](https://www.patternfly.org/v4/components/date-picker/react-demos). +For this example, these dates are static and cannot be updated. For an interactive demo, see our [Date picker demos](/components/date-and-time/date-picker/react-demos). ```ts file="./CalendarMonthDateRange.tsx" + ``` diff --git a/packages/react-core/src/components/Menu/MenuItemAction.tsx b/packages/react-core/src/components/Menu/MenuItemAction.tsx index a86a02c91a6..bd0d02d5359 100644 --- a/packages/react-core/src/components/Menu/MenuItemAction.tsx +++ b/packages/react-core/src/components/Menu/MenuItemAction.tsx @@ -3,8 +3,8 @@ import styles from '@patternfly/react-styles/css/components/Menu/menu'; import { css } from '@patternfly/react-styles'; import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon'; import { MenuContext, MenuItemContext } from './MenuContext'; - -export interface MenuItemActionProps extends Omit, 'type' | 'ref'> { +import { Button } from '../Button'; +export interface MenuItemActionProps extends React.HTMLProps { /** Additional classes added to the action button */ className?: string; /** The action icon to use */ @@ -24,7 +24,7 @@ export interface MenuItemActionProps extends Omit = ({ - className = '', + className, icon, onClick, 'aria-label': ariaLabel, @@ -45,24 +45,27 @@ const MenuItemActionBase: React.FunctionComponent = ({ onActionClick && onActionClick(event, itemId, actionId); }; return ( - + + ); }} diff --git a/packages/react-core/src/helpers/KeyboardHandler.tsx b/packages/react-core/src/helpers/KeyboardHandler.tsx index 1d499b992fa..afdaf7b5fb0 100644 --- a/packages/react-core/src/helpers/KeyboardHandler.tsx +++ b/packages/react-core/src/helpers/KeyboardHandler.tsx @@ -106,23 +106,30 @@ export const handleArrows = ( if (!activeRow.length || onlyTraverseSiblings) { let nextSibling = activeElement; - // While a sibling exists, check each sibling to determine if it should be focussed + while (nextSibling) { - // Set the next checked sibling, determined by the horizontal arrow key direction - nextSibling = key === 'ArrowLeft' ? nextSibling.previousElementSibling : nextSibling.nextElementSibling; + const isDirectChildOfNavigableElement = nextSibling.parentElement === element; + const nextSiblingMainElement = isDirectChildOfNavigableElement ? nextSibling : nextSibling.parentElement; + nextSibling = + key === 'ArrowLeft' + ? nextSiblingMainElement.previousElementSibling + : nextSiblingMainElement.nextElementSibling; + if (nextSibling) { if (validSiblingTags.includes(nextSibling.tagName)) { - // If the sibling's tag is included in validSiblingTags, set the next target element and break the loop moveTarget = nextSibling; break; } - // If the sibling's tag is not valid, skip to the next sibling if possible + // For cases where the validSiblingTag is inside a div wrapper + if (validSiblingTags.includes(nextSibling.children[0].tagName)) { + moveTarget = nextSibling.children[0]; + break; + } } } } else { activeRow.forEach((focusableElement, index) => { if (event.target === focusableElement) { - // Once found, move up or down the array by 1. Determined by the vertical arrow key direction const increment = key === 'ArrowLeft' ? -1 : 1; currentIndex = index + increment; if (currentIndex >= activeRow.length) { @@ -132,7 +139,6 @@ export const handleArrows = ( currentIndex = activeRow.length - 1; } - // Set the next target element moveTarget = activeRow[currentIndex]; } }); diff --git a/packages/react-integration/cypress/integration/menu.spec.ts b/packages/react-integration/cypress/integration/menu.spec.ts index dfdb3dd0c37..f26e40820b7 100644 --- a/packages/react-integration/cypress/integration/menu.spec.ts +++ b/packages/react-integration/cypress/integration/menu.spec.ts @@ -57,11 +57,11 @@ describe('Menu Test', () => { }); it('Verify Menu with Actions', () => { - cy.get('#actions-list.pf-v6-c-menu__list > li > button').last().should('have.class', 'pf-v6-c-menu__item-action'); + cy.get('#actions-list.pf-v6-c-menu__list > li > div').last().should('have.class', 'pf-v6-c-menu__item-action'); }); it('Verify Menu with Favorites', () => { - cy.get('#favorites-menu .pf-v6-c-menu__item-action[aria-label="not starred"]').first().click(); + cy.get('#favorites-menu .pf-v6-c-menu__item-action > button[aria-label="not starred"]').first().click(); cy.get('#favorites-menu.pf-v6-c-menu > section').first().should('contain', 'Favorites'); });