Skip to content

Commit

Permalink
fix: adds an aria-label to the caret button with a matching property
Browse files Browse the repository at this point in the history
  • Loading branch information
iOvergaard committed Jul 25, 2024
1 parent 6b7795a commit 03d22c1
Showing 1 changed file with 16 additions and 2 deletions.
18 changes: 16 additions & 2 deletions packages/uui-menu-item/lib/uui-menu-item.element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,15 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
@property({ type: String, attribute: 'select-mode', reflect: true })
public selectMode?: 'highlight' | 'persisting';

/**
* Sets the aria-label for the caret button.
* @remark Only used when the menu item has children.
* @attr
* @default 'Reveal the underlying items'
*/
@property({ type: String, attribute: 'caret-label' })
public caretLabel = 'Reveal the underlying items';

@state()
private iconSlotHasContent = false;

Expand Down Expand Up @@ -206,8 +215,13 @@ export class UUIMenuItemElement extends SelectOnlyMixin(
return html`
<div id="menu-item" aria-label="menuitem" role="menuitem">
${this.hasChildren
? html`<button id="caret-button" @click=${this._onCaretClicked}>
<uui-symbol-expand ?open=${this.showChildren}></uui-symbol-expand>
? html`<button
id="caret-button"
aria-label=${this.caretLabel}
@click=${this._onCaretClicked}>
<uui-symbol-expand
aria-hidden="true"
?open=${this.showChildren}></uui-symbol-expand>
</button>`
: ''}
${this.href ? this._renderLabelAsAnchor() : this._renderLabelAsButton()}
Expand Down

0 comments on commit 03d22c1

Please sign in to comment.