fix(checkbox): handle links in transcluded label in an a11y-friendly way

don't toggle the checkbox on link actions
don't output aria warnings when using aria-labelledby
require md-input-container when using links in checkbox labels
update license copyright year

Fixes #11134

Author: Splaktar

docs/app/partials/license.tmpl.html

@@ -3,7 +3,7 @@
     <p>The MIT License</p>
 
     <p>
-      Copyright (c) 2014-2016 Google, Inc.
+      Copyright (c) 2014-2018 Google, Inc.
       <a href="http://angularjs.org">http://angularjs.org</a>
     </p>
 

src/components/checkbox/checkbox.js

@@ -97,6 +97,24 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
       var containerCtrl = ctrls[0];
       var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
       var formCtrl = ctrls[2];
+      var labelHasLink = element.find('a').length > 0;
+
+      // The original component structure is not accessible when the checkbox's label contains a link.
+      // In order to keep backwards compatibility, we're only changing the structure of the component
+      // when we detect a link within the label. Using a span after the md-checkbox and attaching it
+      // via aria-labelledby allows screen readers to find and work with the link within the label.
+      if (labelHasLink) {
+        var labelId = 'label-' + $mdUtil.nextUid();
+        attr.$set('aria-labelledby', labelId);
+
+        var label = element.children()[1];
+        var labelContents = label.innerHTML;
+        label.remove();
+        element.after('<span id="' + labelId + '" class="md-checkbox-link-label">' + labelContents + '</span>');
+        // Make sure that clicking on the label still causes the checkbox to be toggled, when appropriate.
+        var externalLabel = element.next();
+        externalLabel.on('click', listener);
+      }
 
       if (containerCtrl) {
         var isErrorGetter = containerCtrl.isErrorGetter || function() {
@@ -133,7 +151,11 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
         false: attr.tabindex
       });
 
-      $mdAria.expectWithText(element, 'aria-label');
+      // Don't emit a warning when the label has a link within it. In that case we'll use
+      // aria-labelledby to point to another span that should be read as the label.
+      if (!labelHasLink) {
+        $mdAria.expectWithText(element, 'aria-label');
+      }
 
       // Reuse the original input[type=checkbox] directive from AngularJS core.
       // This is a bit hacky as we need our own event listener and own render
@@ -177,8 +199,10 @@ function MdCheckboxDirective(inputDirective, $mdAria, $mdConstant, $mdTheming, $
 
       function listener(ev) {
         // skipToggle boolean is used by the switch directive to prevent the click event
-        // when releasing the drag. There will be always a click if releasing the drag over the checkbox
-        if (element[0].hasAttribute('disabled') || scope.skipToggle) {
+        // when releasing the drag. There will be always a click if releasing the drag over the checkbox.
+        // If the click came from a link in the checkbox, don't toggle the value.
+        // We want the link to be opened without changing the value in this case.
+        if (element[0].hasAttribute('disabled') || scope.skipToggle || ev.target.tagName === 'A') {
           return;
         }
 

src/components/checkbox/checkbox.scss

@@ -68,3 +68,18 @@ md-checkbox {
 
   }
 }
+md-input-container .md-checkbox-link-label {
+  box-sizing: border-box;
+  position: relative;
+  display: inline-block;
+  vertical-align: middle;
+  white-space: normal;
+  user-select: text;
+  cursor: pointer;
+  // The span is actually after the checkbox in the DOM, but we need it to line up, so we move it up
+  // while not introducing any breaking changes to existing styles.
+  top: -21px;
+
+  @include rtl(margin-left, $checkbox-text-margin, 0);
+  @include rtl(margin-right, 0, $checkbox-text-margin);
+}

src/components/checkbox/demoLabels/index.html

@@ -0,0 +1,36 @@
+<div ng-controller="AppCtrl" class="md-padding" ng-cloak>
+  <div>
+    <fieldset class="standard">
+      <legend>Using Different Layouts and Labels</legend>
+      <div layout="column">
+        <md-checkbox ng-model="data.cb1">
+          Default Checkbox and Label
+        </md-checkbox>
+        <md-checkbox ng-model="data.cb2">
+          Dynamic Label: {{data.cb2 ? 'Checked' : 'Unchecked'}}
+        </md-checkbox>
+        <div>
+          <!-- Extra work is needed by the developer to make this work, including a11y. -->
+          <label for="label-in-front" ng-click="data.cb3 = !data.cb3"
+                 aria-hidden="true" tabindex="-1">
+            Label in Front
+          </label>
+          <md-checkbox ng-model="data.cb3" id="label-in-front"
+                       aria-label="Label in Front">
+          </md-checkbox>
+        </div>
+        <md-input-container>
+          <md-checkbox ng-model="data.cb4">
+            Checkbox in an md-input-container
+          </md-checkbox>
+        </md-input-container>
+        <md-subheader>Checkbox with an accessible link in the label</md-subheader>
+        <md-input-container>
+          <md-checkbox ng-model="data.cb5">
+            I agree to the <a href="/license">license</a>.
+          </md-checkbox>
+        </md-input-container>
+      </div>
+    </fieldset>
+  </div>
+</div>

src/components/checkbox/demoLabels/script.js

@@ -0,0 +1,10 @@
+angular.module('checkboxDemo1', ['ngMaterial'])
+
+.controller('AppCtrl', function($scope) {
+  $scope.data = {};
+  $scope.data.cb1 = true;
+  $scope.data.cb2 = true;
+  $scope.data.cb3 = false;
+  $scope.data.cb4 = false;
+  $scope.data.cb5 = false;
+});

src/components/checkbox/demoLabels/style.css

@@ -0,0 +1,12 @@
+fieldset.standard {
+  border: 1px solid;
+}
+legend {
+  color: #3F51B5;
+}
+label {
+  cursor: pointer;
+  margin-right: 10px;
+  outline: none;
+  user-select: none;
+}