mdList: Enhance mdItem to support ripple and clicks

[zachguo]

Just like the one used in the sidenav of documentation site.

See also: related discussion on google group

[ThomasBurleson]

Need to rename the md-item to md-list-item enhance with features similar to md-button:

• ripple features
• support for md-no-ripple for list items that should not have ripples
• hover css
• etc.

[marcysutton]

I disagree! List items are not interactive. The docs sidenav uses anchors and buttons to create interactivity, thereby effectively communicating roles to assistive technologies and making them operable by default.

[zachguo]

@marcysutton maybe it should be called menu-item rather than list-item, check out specs

[marcysutton]

That is a separate component. I do not think list-item should be changed. Rather, a menu component should be added. More info copied from the forum:

There are accessibility implications with this–list items are not interactive controls. Because the role of a list item is to be a member of a group, it cannot also have a role of button or link. For this reason, please put ng-click only on interactive child elements such as buttons.

[ThomasBurleson]

@marcy - you make a good point. While md-list-item itself is not an interactive element, it could be filled with a button so the entire item area supports hovers, ripples, and clicks.

Nevertheless, let's consider the SideNav list on http://material.angularjs.org.

<div ng-repeat="section in menu.sections">

        <button class="menu-item menu-title md-menu-item"
          ng-click="menu.toggleSelectSection(section)"
          md-highlight="menu.isSectionSelected(section)"
          md-ink-ripple="#bbb">
          {{section.name}}
        </button>

        <a class="menu-item menu-sub-item md-menu-item"
          ng-show="menu.isSectionSelected(section)"
          ng-repeat="page in section.pages"
          ng-href="#{{page.url}}"
          md-highlight="menu.isPageSelected(section, page)"
          md-ink-ripple="#bbb">
          <span ng-bind="page | humanizeDoc"></span>
        </a>

      </div>

This could be so much more nicely represented as:

<md-list ng-repeat="section in menu.sections">

   <md-list-item  ng-click="menu.toggleSelectSection(section)"
          md-highlight="menu.isSectionSelected(section)"
          md-ink-ripple="#bbb">
          {{section.name}} >
   </md-list-item>

   <md-list-item ng-show="menu.isSectionSelected(section)"
          ng-repeat="page in section.pages"
          ng-href="#{{page.url}}"
          md-highlight="menu.isPageSelected(section, page)"
          md-ink-ripple="#bbb">
          <span ng-bind="page | humanizeDoc"></span>
   </md-list-item>

</md-list>  

As such, the question becomes: "Should we force the user to explicitly fill the md-list-item with child elements... or allow md-ripple and ng-click on md-list-item?"

[marcysutton]

@ThomasBurleson we still need to nest an interactive item inside of <md-list-item>, which has a role of listitem (see ARIA documentation). To communicate correct semantics, the markup needs to look relatively like the below code. Note: this doesn't take <md-button>'s internals into account, it just shows list/listitem/button roles used together.

<md-list ng-repeat="section in menu.sections" role="list">
   <md-list-item role="listitem">
     <md-button role="button" tabIndex="0" ng-click="menu.toggleSelectSection(section)"
          md-highlight="menu.isSectionSelected(section)"
          md-ink-ripple="#bbb">
          {{section.name}} >
      </md-button>
   </md-list-item>

   <md-list-item role="listitem" ng-show="menu.isSectionSelected(section)"
       ng-repeat="page in section.pages">
      <md-button role="link" tabIndex="0" ng-href="#{{page.url}}"
          md-highlight="menu.isPageSelected(section, page)"
          md-ink-ripple="#bbb">
          <span ng-bind="page | humanizeDoc"></span>
       </md-button>
   </md-list-item>
</md-list>  

However we accomplish this in transclusion is fine, but to me it seems like a lot of extra work when users can just nest md-button inside of a list. We do, however, still need a menu component (which is a different thing than a list).

[ThomasBurleson]

@marcysutton - so from a ARIA semantic perspective your latest sample seems the right way to use mdList and mdListItem. This is really good to know.

To confirm: If it has a role="listitem", it is not correct to make an container element act (by itself) as an interactive element ?

[marcysutton]

That is correct–listitem is not intended to be interactive and may confuse AT users if it is made clickable with that role. There is a role called menuitem which can be made interactive using additional ARIA attributes (see example).

Questions:

• Because we also need to support regular non-interactive list items–a common grouping mechanism–does it make sense to combine menu and list?
• Are they similar enough to warrant this?
• Is every clickable item in a list going to be part of a menu?

See the design spec for lists. The "Inbox", etc. list looks like a menu, while the Chat contacts list does not: http://www.google.com/design/spec/components/lists.html#lists-specs

ARIA Menuitem documentation: http://www.w3.org/TR/wai-aria/roles#menuitem