fix(subheader): add accessibility support (#9817)

Fixes #9392.

Author: crisbeto

src/components/subheader/subheader.js

@@ -52,7 +52,7 @@ angular
  * </hljs>
  */
 
-function MdSubheaderDirective($mdSticky, $compile, $mdTheming, $mdUtil) {
+function MdSubheaderDirective($mdSticky, $compile, $mdTheming, $mdUtil, $mdAria) {
   return {
     restrict: 'E',
     replace: true,
@@ -78,6 +78,12 @@ function MdSubheaderDirective($mdSticky, $compile, $mdTheming, $mdUtil) {
         return angular.element(el[0].querySelector('.md-subheader-content'));
       }
 
+      // Set the ARIA attributes on the original element since it keeps it's original place in
+      // the DOM, whereas the clones are in reverse order. Should be done after the outerHTML,
+      // in order to avoid having multiple element be marked as headers.
+      attr.$set('role', 'heading');
+      $mdAria.expect(element, 'aria-level', '2');
+
       // Transclude the user-given contents of the subheader
       // the conventional way.
       transclude(scope, function(clone) {
@@ -92,7 +98,7 @@ function MdSubheaderDirective($mdSticky, $compile, $mdTheming, $mdUtil) {
           // compiled clone below will only be a comment tag (since they replace their elements with
           // a comment) which cannot be properly passed to the $mdSticky; so we wrap it in our own
           // DIV to ensure we have something $mdSticky can use
-          var wrapper = $compile('<div class="md-subheader-wrapper">' + outerHTML + '</div>')(scope);
+          var wrapper = $compile('<div class="md-subheader-wrapper" aria-hidden="true">' + outerHTML + '</div>')(scope);
 
           // Delay initialization until after any `ng-if`/`ng-repeat`/etc has finished before
           // attempting to create the clone

src/components/subheader/subheader.spec.js

@@ -11,7 +11,7 @@ describe('mdSubheader', function() {
       $delegate.checkStickySupport = angular.noop;
 
       return $delegate;
-    })
+    });
   }));
 
   beforeEach(inject(function($injector) {
@@ -172,6 +172,30 @@ describe('mdSubheader', function() {
     expect($exceptionHandler.errors).toEqual([]);
   });
 
+  it('adds the proper aria attributes only to the source element', function() {
+    build(
+      '<div>' +
+        '<md-subheader>Subheader</md-subheader>' +
+      '</div>'
+    );
+
+    expect(element.attr('role')).toBe('heading');
+    expect(element.attr('aria-level')).toBe('2');
+
+    expect(cloneElement.attr('role')).toBeFalsy();
+    expect(cloneElement.parent().attr('aria-hidden')).toBe('true');
+  });
+
+  it('allows for the aria-level to be overwritten', function() {
+    build(
+      '<div>' +
+        '<md-subheader aria-level="1">Subheader</md-subheader>' +
+      '</div>'
+    );
+
+    expect(element.attr('aria-level')).toBe('1');
+  });
+
   function build(template) {
     inject(function($compile, $timeout) {
       pageScope = $rootScope.$new();