Support <button> in mat-nav-list

[calebegg]

<mat-nav-list> only supports <a> tags. Sometimes, a <button> would be more semantically appropriate; for example, the common "send feedback" menu item.

[jelbourn]

Do you actually want the new <mat-action-list>?

The idea behind the different list variants is that they each provide a shortcut a specific a11y interaction pattern, with the long-form <mat-list> being dissociated with any specific interaction pattern so people can do something custom.

• <mat-selection-list> is a role="listbox"
• <mat-nav-list> is for role="navigation" plus anchors
• <mat-action-list> doesn't have a direct analog, but it's roughly role="group" around a bunch of buttons

Recently on my radar is the idea of a <mat-menu-list>, which has the same visuals backed by role="menu" and role="menuitem"

In AngularJS Material, the <md-list> tried to be all of those things at once and the accessibility suffered for it, so the approach in this iteration is to provide specific, well-supported interaction patterns and a path where you define your own interaction pattern.

[calebegg]

I think I do want a nav list. For my use case, it's in a <mat-sidenav>, and the other items are navigational <a> tags, so not appropriate for action list.

TBH, I don't really like the pattern of feedback being in the sidenav, but it's standard: https://material.io/design/communication/help-feedback.html

[crisbeto]

The selector for mat-list-item does allow you to use a button, but we weren't doing the proper resets to get the buttons to look correctly. It'll be fixed in https://github.com/angular/material2/pull/13617.

[calebegg]

Perfect, thanks!

[jelbourn]

Closing this since I don't think there's any action to take.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}