fix(stepper): set appropriate aria-orientation (#8657)

Based on the accessibility guidelines (https://www.w3.org/TR/wai-aria-1.1/#tablist), tab lists (which the stepper uses internally) can have an `aria-orientation`. Since we have both vertical and horizontal steppers, these changes set the appropriate `aria-orientation` in order to match the stepper's orientation.

Author: crisbeto

src/lib/stepper/stepper.spec.ts

@@ -56,6 +56,11 @@ describe('MatHorizontalStepper', () => {
       expect(stepperEl.getAttribute('role')).toBe('tablist');
     });
 
+    it('should set the proper "aria-orientation"', () => {
+      let stepperEl = fixture.debugElement.query(By.css('mat-horizontal-stepper')).nativeElement;
+      expect(stepperEl.getAttribute('aria-orientation')).toBe('horizontal');
+    });
+
     it('should set aria-expanded of content correctly', () => {
       let stepContents = fixture.debugElement.queryAll(By.css(`.mat-horizontal-stepper-content`));
       assertCorrectAriaExpandedAttribute(fixture, stepContents);
@@ -227,6 +232,11 @@ describe('MatVerticalStepper', () => {
       expect(stepperEl.getAttribute('role')).toBe('tablist');
     });
 
+    it('should set the proper "aria-orientation"', () => {
+      let stepperEl = fixture.debugElement.query(By.css('mat-vertical-stepper')).nativeElement;
+      expect(stepperEl.getAttribute('aria-orientation')).toBe('vertical');
+    });
+
     it('should set aria-expanded of content correctly', () => {
       let stepContents = fixture.debugElement.queryAll(By.css(`.mat-vertical-stepper-content`));
       assertCorrectAriaExpandedAttribute(fixture, stepContents);

src/lib/stepper/stepper.ts

@@ -90,6 +90,7 @@ export class MatStepper extends _MatStepper implements AfterContentInit {
   inputs: ['selectedIndex'],
   host: {
     'class': 'mat-stepper-horizontal',
+    'aria-orientation': 'horizontal',
     'role': 'tablist',
   },
   animations: [
@@ -116,6 +117,7 @@ export class MatHorizontalStepper extends MatStepper { }
   inputs: ['selectedIndex'],
   host: {
     'class': 'mat-stepper-vertical',
+    'aria-orientation': 'vertical',
     'role': 'tablist',
   },
   animations: [