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:
parent
264e202ccd
commit
45132ec6aa
3 changed files with 8 additions and 17 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue