fix(input): add aria-required to inputs (#8034)

angular · Nov 10, 2017 · 8178d6f · 8178d6f
1 parent bc8560e
commit 8178d6f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 0 deletions.
diff --git a/src/lib/input/input.spec.ts b/src/lib/input/input.spec.ts
@@ -238,6 +238,23 @@ describe('MatInput without forms', function () {
     expect(labelElement.getAttribute('aria-owns')).toBe(inputElement.id);
   });
 
+  it('should add aria-required reflecting the required state', () => {
+    const fixture = TestBed.createComponent(MatInputWithRequired);
+    fixture.detectChanges();
+
+    const inputElement: HTMLInputElement =
+        fixture.debugElement.query(By.css('input')).nativeElement;
+
+    expect(inputElement.getAttribute('aria-required'))
+        .toBe('false', 'Expected aria-required to reflect required state of false');
+
+    fixture.componentInstance.required = true;
+    fixture.detectChanges();
+
+    expect(inputElement.getAttribute('aria-required'))
+        .toBe('true', 'Expected aria-required to reflect required state of true');
+  });
+
   it('should not overwrite existing id', () => {
     let fixture = TestBed.createComponent(MatInputWithId);
     fixture.detectChanges();

diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
@@ -59,6 +59,7 @@ let nextUniqueId = 0;
     '[readonly]': 'readonly',
     '[attr.aria-describedby]': '_ariaDescribedby || null',
     '[attr.aria-invalid]': 'errorState',
+    '[attr.aria-required]': 'required.toString()',
     '(blur)': '_focusChanged(false)',
     '(focus)': '_focusChanged(true)',
     '(input)': '_onInput()',