MenuItem: fix caption usage (#12455)

* Add placement and fix additional span for `AccessibleButton`

* Use only `RovingAccessibleButton` in `MenuItem`

* Replace `tooltip` by `caption`

* Update snapshots
This commit is contained in:
Florian Duros 2024-04-26 12:17:13 +02:00 committed by GitHub
parent 264e202ccd
commit 45132ec6aa
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 8 additions and 17 deletions

View file

@ -18,25 +18,16 @@ limitations under the License.
import React from "react";
import { RovingAccessibleButton, RovingAccessibleTooltipButton } from "../RovingTabIndex";
import { RovingAccessibleButton } from "../RovingTabIndex";
interface IProps extends React.ComponentProps<typeof RovingAccessibleButton> {
label?: string;
tooltip?: string;
}
// Semantic component for representing a role=menuitem
export const MenuItem: React.FC<IProps> = ({ children, label, tooltip, ...props }) => {
export const MenuItem: React.FC<IProps> = ({ children, label, ...props }) => {
const ariaLabel = props["aria-label"] || label;
if (tooltip) {
return (
<RovingAccessibleTooltipButton {...props} role="menuitem" aria-label={ariaLabel} title={tooltip}>
{children}
</RovingAccessibleTooltipButton>
);
}
return (
<RovingAccessibleButton {...props} role="menuitem" aria-label={ariaLabel}>
{children}