docs: links from header directives are not compatible with base URL (#11634)

fix a11y contrast issue with visited header links on toolbars

Fixes #11285

Author: Splaktar

docs/app/css/style.css

@@ -29,7 +29,8 @@ body.docs-body {
   height: auto;
 }
 
-.docs-anchor {
+.docs-anchor,
+.docs-anchor:visited {
   color: inherit;
 }
 
@@ -54,7 +55,6 @@ body.docs-body {
   border-top: 1px solid #ddd;
 }
 
-
 .training_link {
   color: #D32F2F;
   text-transform: none;

docs/app/js/anchor.js

@@ -1,57 +1,60 @@
-(function() {
-  angular
-    .module('docsApp')
-    .directive('h4', MdAnchorDirective)
-    .directive('h3', MdAnchorDirective)
-    .directive('h2', MdAnchorDirective)
-    .directive('h1', MdAnchorDirective);
-
-  function MdAnchorDirective($mdUtil, $compile) {
-
-    /** @const @type {RegExp} */
-    var unsafeCharRegex = /[&\s+$,:;=?@"#{}|^~[`%!'\]./()*\\]/g;
-
-    return {
-      restrict: 'E',
-      scope: {},
-      require: '^?mdContent',
-      link: postLink
-    };
-
-    function postLink(scope, element, attr, ctrl) {
-
-      // Only create anchors when being inside of a md-content.
-      if (!ctrl) {
-        return;
-      }
-
-      var anchorEl = $compile('<a class="docs-anchor" ng-href="#{{ name }}" name="{{ name }}"></a>')(scope);
-
-      // Wrap contents inside of the anchor element.
-      anchorEl.append(element.contents());
-
-      // Append the anchor element to the directive element.
-      element.append(anchorEl);
-
-      // Delay the URL creation, because the inner text might be not interpolated yet.
-      $mdUtil.nextTick(createContentURL);
-
-      /**
-       * Creates URL from the text content of the element and writes it into the scope.
-       */
-      function createContentURL() {
-        scope.name = element.text()
-          .trim()                           // Trim text due to browsers extra whitespace.
-          .replace(/'/g, '')                // Transform apostrophes words to a single one.
-          .replace(unsafeCharRegex, '-')    // Replace unsafe chars with a dash symbol.
-          .replace(/-{2,}/g, '-')           // Remove repeating dash symbols.
-          .replace(/^-|-$/g, '')            // Remove preceding or ending dashes.
-          .toLowerCase();                   // Link should be lower-case for accessible URL.
-      }
-    }
-  }
-
-  // Manually specify $inject because Strict DI is enabled.
-  MdAnchorDirective.$inject = ['$mdUtil', '$compile'];
-
-})();
+(function() {
+  angular
+    .module('docsApp')
+    .directive('h4', MdAnchorDirective)
+    .directive('h3', MdAnchorDirective)
+    .directive('h2', MdAnchorDirective)
+    .directive('h1', MdAnchorDirective);
+
+  function MdAnchorDirective($mdUtil, $compile, $rootScope) {
+
+    /** @const @type {RegExp} */
+    var unsafeCharRegex = /[&\s+$,:;=?@"#{}|^~[`%!'\]./()*\\]/g;
+
+    return {
+      restrict: 'E',
+      scope: {},
+      require: '^?mdContent',
+      link: postLink
+    };
+
+    function postLink(scope, element, attr, ctrl) {
+
+      // Only create anchors when being inside of a md-content.
+      if (!ctrl) {
+        return;
+      }
+
+      var anchorEl = $compile('<a class="docs-anchor" ng-href="{{ name }}" name="{{ name }}"></a>')(scope);
+
+      // Wrap contents inside of the anchor element.
+      anchorEl.append(element.contents());
+
+      // Append the anchor element to the directive element.
+      element.append(anchorEl);
+
+      // Delay the URL creation, because the inner text might be not interpolated yet.
+      $mdUtil.nextTick(createContentURL);
+
+      /**
+       * Creates URL from the text content of the element and writes it into the scope.
+       */
+      function createContentURL() {
+        var path = scope.$root.$location ? scope.$root.$location.path() : '';
+        var name = element.text();
+        name = name
+          .trim()                           // Trim text due to browsers extra whitespace.
+          .replace(/'/g, '')                // Transform apostrophes words to a single one.
+          .replace(unsafeCharRegex, '-')    // Replace unsafe chars with a dash symbol.
+          .replace(/-{2,}/g, '-')           // Remove repeating dash symbols.
+          .replace(/^-|-$/g, '')            // Remove preceding or ending dashes.
+          .toLowerCase();                   // Link should be lower-case for accessible URL.
+        scope.name = path + '#' + name;
+      }
+    }
+  }
+
+  // Manually specify $inject because Strict DI is enabled.
+  MdAnchorDirective.$inject = ['$mdUtil', '$compile'];
+
+})();

docs/app/js/app.js

@@ -148,8 +148,9 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
    AngularyticsProvider.setEventHandlers(['GoogleUniversal']);
 }])
 
-.run(['Angularytics', function(Angularytics) {
+.run(['$rootScope', '$location', 'Angularytics', function($rootScope, $location, Angularytics) {
   Angularytics.init();
+  $rootScope.$location = $location;
 }])
 
 .factory('menu', [