Skip to content

Bug - MenuToggle - apply aria-label prop to typeahead caret button #9976

@thatblindgeye

Description

@thatblindgeye

Describe the problem
Right now, MenuToggle applies an aria-label prop only for non-typeahead variants. Instead, a typeahead MenuToggle has a hardcoded aria-label="Menu toggle" for the caret icon button, since a consumer needs to pass in the actual input element/components which would get its own aria-label as well.

We should still apply MenuToggle's aria-label to the .pf-v5-c-menu-toggle__button element for typeahead variant instead of hardcoding it to "Menu toggle". We should also expose aria-label in the interface.

const content = (
<>
{icon && <span className={css(styles.menuToggleIcon)}>{icon}</span>}
{isTypeahead ? children : <span className={css(styles.menuToggleText)}>{children}</span>}
{React.isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}
{isTypeahead ? (
<button
type="button"
className={css(styles.menuToggleButton)}
aria-expanded={isExpanded}
onClick={onClick}
aria-label="Menu toggle"
>
{toggleControls}
</button>
) : (
toggleControls
)}
</>
);

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Done

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions