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

[rschmukler]

This will be part of #985. Closing as a duplicate.

[rdesimone]

@rschmukler why closing this issue? #985 is a different issue. The approach of @marcysutton (see above) should be at least documented in the md-list section with the correct directives and styling even though I am not convinced that md-button is the correct approach. Be also aware of #1890 - at a certain point we need also swipe functionality on list items. Bottom line best practices are needed to support ripple and clicks. Thanks!

[smaye81]

So, was md-list-item made to be clickable by default in 0.9.0? It looks to be that way. Any way that can be turned off? Or is there documentation for how to write the markup so that list-item is not an interactive element?

[marcysutton]

Just don't put ng-click on a list item and it should work. Look at the first list demo to see how it works.

Also, this issue is closed...further questions should be asked on the ngMaterial forum. Thanks!

[smaye81]

Sorry for commenting here again, but I think this issue needs to be looked at further. If I put an md-checkbox in the row, then it makes the entire row clickable, causing a dual ripple effect on the checkbox and the row itself:

http://codepen.io/anon/pen/gpPZvJ

[marcysutton]

@smaye81 please file a separate issue.