docs(button): Add aria-hidden="true" to icon elements (#2582)

material-components · Apr 17, 2018 · 41f496c · 41f496c
1 parent 30710a4
commit 41f496c
Show file tree

Hide file tree

Showing 15 changed files with 112 additions and 101 deletions.
diff --git a/demos/button.html b/demos/button.html
@@ -119,11 +119,11 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
               Secondary
             </button>
             <button class="mdc-button">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button">
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -148,11 +148,11 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--raised">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--raised">
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -177,11 +177,11 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--unelevated">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--unelevated">
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -206,11 +206,11 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--stroked">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--stroked">
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -238,11 +238,11 @@ <h1 class="mdc-typography--headline3">Ripple Enabled</h1>
           <legend class="mdc-typography--headline6">Different Color Icons/Ink</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated demo-ink-color">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Ink Color
             </button>
             <button class="mdc-button mdc-button--stroked demo-icon-color">
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon Color
             </button>
           </div>
@@ -262,11 +262,11 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
               Secondary
             </button>
             <button class="mdc-button" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button" data-demo-no-js>
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -291,11 +291,11 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--raised" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--raised" data-demo-no-js>
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -320,11 +320,11 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--unelevated" data-demo-no-js>
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -350,11 +350,11 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
               Secondary
             </button>
             <button class="mdc-button mdc-button--stroked" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon
             </button>
             <button class="mdc-button mdc-button--stroked" data-demo-no-js>
-              <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
+              <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#000000">
                 <path fill="none" d="M0 0h24v24H0z"/>
                 <path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
               </svg>
@@ -382,11 +382,11 @@ <h1 class="mdc-typography--headline3">CSS Only</h1>
           <legend class="mdc-typography--headline6">Different Color Icons/Ink</legend>
           <div>
             <button class="mdc-button mdc-button--unelevated demo-ink-color" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Ink Color
             </button>
             <button class="mdc-button mdc-button--stroked demo-icon-color" data-demo-no-js>
-              <i class="material-icons mdc-button__icon">favorite</i>
+              <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
               Icon Color
             </button>
           </div>

diff --git a/docs/theming.md b/docs/theming.md
@@ -450,7 +450,7 @@ Then apply the custom class to the button elements:
 
 ```html
 <button class="mdc-button accessible-button">
-  <i class="material-icons mdc-button__icon">favorite</i>
+  <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
   Button
 </button>
 ```
diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md
@@ -55,17 +55,17 @@ semantically correct.
 ### Adding Icon
 
 Users can nest `mdc-button__icon` inside the button element to add an icon. The icon in button
-is set to 18px to meet legibility requirements.
+is set to 18px to meet legibility requirements. This element should also include `aria-hidden="true"`.
 
-We recommend you load [Material Icons](https://material.io/icons/) from Google Fonts
+We recommend you load [Material Icons](https://material.io/icons/) from Google Fonts:
 
 ```html
 <head>
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 
 <button class="mdc-button">
-  <i class="material-icons mdc-button__icon">favorite</i>
+  <i class="material-icons mdc-button__icon" aria-hidden="true">favorite</i>
   Button
 </button>
 ```
@@ -74,7 +74,7 @@ It's also possible to use an SVG icon:
 
 ```html
 <button class="mdc-button">
-  <svg class="mdc-button__icon" xmlns="http://www.w3.org/2000/svg" viewBox="...">
+  <svg class="mdc-button__icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="...">
   ...
   </svg>
   SVG Icon

diff --git a/packages/mdc-textfield/icon/adapter.js b/packages/mdc-textfield/icon/adapter.js
@@ -35,6 +35,12 @@ class MDCTextFieldIconAdapter {
    */
   setAttr(attr, value) {}
 
+  /**
+   * Removes an attribute on the icon element.
+   * @param {string} attr
+   */
+  removeAttr(attr, value) {}
+
   /**
    * Registers an event listener on the icon element for a given event.
    * @param {string} evtType

diff --git a/packages/mdc-textfield/icon/constants.js b/packages/mdc-textfield/icon/constants.js
@@ -18,6 +18,7 @@
 /** @enum {string} */
 const strings = {
   ICON_EVENT: 'MDCTextField:icon',
+  ICON_ROLE: 'button'
 };
 
 export {strings};
diff --git a/packages/mdc-textfield/icon/foundation.js b/packages/mdc-textfield/icon/foundation.js
@@ -38,6 +38,7 @@ class MDCTextFieldIconFoundation extends MDCFoundation {
   static get defaultAdapter() {
     return /** @type {!MDCTextFieldIconAdapter} */ ({
       setAttr: () => {},
+      removeAttr: () => {},
       registerInteractionHandler: () => {},
       deregisterInteractionHandler: () => {},
       notifyIconAction: () => {},
@@ -73,8 +74,10 @@ class MDCTextFieldIconFoundation extends MDCFoundation {
   setDisabled(disabled) {
     if (disabled) {
       this.adapter_.setAttr('tabindex', '-1');
+      this.adapter_.removeAttr('role');
     } else {
       this.adapter_.setAttr('tabindex', '0');
+      this.adapter_.setAttr('role', strings.ICON_ROLE);
     }
   }
 

diff --git a/packages/mdc-textfield/icon/index.js b/packages/mdc-textfield/icon/index.js
@@ -46,6 +46,7 @@ class MDCTextFieldIcon extends MDCComponent {
   getDefaultFoundation() {
     return new MDCTextFieldIconFoundation(/** @type {!MDCTextFieldIconAdapter} */ (Object.assign({
       setAttr: (attr, value) => this.root_.setAttribute(attr, value),
+      removeAttr: (attr) => this.root_.removeAttribute(attr),
       registerInteractionHandler: (evtType, handler) => this.root_.addEventListener(evtType, handler),
       deregisterInteractionHandler: (evtType, handler) => this.root_.removeEventListener(evtType, handler),
       notifyIconAction: () => this.emit(