feat(toolbar): add pointer for button

[Shyam-Chen]

<header class="mdc-toolbar mdc-toolbar--fixed">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
      <button type="button" aria-label="Menu" id="menu" class="mdc-toolbar__icon--menu" style="cursor: pointer">
        <svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M0 0h24v24H0z" fill="none" />
          <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />
        </svg>
      </button>
    </section>
  </div>
</header>

[codecov-io]

Codecov Report

Merging #860 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #860   +/-   ##
=======================================
  Coverage   98.56%   98.56%           
=======================================
  Files          70       70           
  Lines        3199     3199           
  Branches      387      387           
=======================================
  Hits         3153     3153           
  Misses         46       46

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f0f0a86...3a49ee1. Read the comment docs.

[hebbet]

I think pointer is not needed on buttons. See also https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b by @adamsilver.

Bootstrap also removed pointer with v4

[yeelan0319]

Good question. Most of our guideline demos are made for touchscreen, we will ask our designer the best practice for it.

[Shyam-Chen]

Ref: https://angular.io/docs

[Garbee]

MCW doesn't add in features or functionality because other "material-like" things do it. The goal is to be a reference implementation of the Material Design Specification as it is written with the best eye towards a11y for the web that we can add on.

That being said, if we have a solid background color hover state for the button then I don't think we need the cursor change. Since the background changing would cover the intellectual trigger that something can be acted upon with a mouse.

[yeelan0319]

We had a discussion with our designer about cursor state for button, here is the result:
For existing material design guideline, there weren't distinct hover states for components like buttons. The only indication of hover was the cursor changing to pointer. There are a number of known issues with this approach, particularly with buttons that appear within other hit areas (for example, a clickable row that has actions within it...the cursor is always a pointer, so it's not clear when you're within the hit area of the nested action vs the row). So for the moment, the cursor needs to change to pointer to indicate when something is clickable.

As that being said, we will make cursor to pointer for better a11y purpose and I am totally with @Garbee if we can better address it other way, we can safely remove the cursor pointer specification in the future.

[yeelan0319]

@Shyam-Chen Could we also add this to __iconbesides __icon--menu

[Shyam-Chen]

#974