refactor(material): use static strings for aria roles

pkozlowski-opensource · pkozlowski-opensource · commit 98fcf8c6ef8c · 2015-06-15T18:58:10.000+02:00
Closes angular#2542
diff --git a/modules/angular2_material/src/components/checkbox/checkbox.ts b/modules/angular2_material/src/components/checkbox/checkbox.ts
@@ -10,7 +10,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
   host: {
     '(keydown)': 'onKeydown($event)',
     '[tabindex]': 'tabindex',
-    '[attr.role]': 'role',
+    '[attr.role]': '"checkbox"',
     '[attr.aria-checked]': 'checked',
     '[attr.aria-disabled]': 'disabled'
   }
@@ -23,14 +23,10 @@ export class MdCheckbox {
   /** Whether this checkbox is disabled. */
   _disabled: boolean;
 
-  /** Setter for `role` attribute. */
-  role: string;
-
   /** Setter for tabindex */
   tabindex: number;
 
   constructor(@Attribute('tabindex') tabindex: string) {
-    this.role = 'checkbox';
     this.checked = false;
     this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
     this._disabled = false;
diff --git a/modules/angular2_material/src/components/grid_list/grid_list.ts b/modules/angular2_material/src/components/grid_list/grid_list.ts
@@ -225,7 +225,7 @@ export class MdGridList {
     '[style.left]': 'styleLeft',
     '[style.marginTop]': 'styleMarginTop',
     '[style.paddingTop]': 'stylePaddingTop',
-    '[role]': 'role'
+    '[role]': '"listitem"'
   },
   lifecycle: [onDestroy, onChange]
 })
@@ -241,15 +241,12 @@ export class MdGridTile {
   styleLeft: string;
   styleMarginTop: string;
   stylePaddingTop: string;
-  role: string;
 
   isRegisteredWithGridList: boolean;
 
   constructor(@Parent() gridList: MdGridList) {
     this.gridList = gridList;
 
-    this.role = 'listitem';
-
     // Tiles default to 1x1, but rowspan and colspan can be changed via binding.
     this.rowspan = 1;
     this.colspan = 1;
diff --git a/modules/angular2_material/src/components/progress-linear/progress_linear.ts b/modules/angular2_material/src/components/progress-linear/progress_linear.ts
@@ -8,9 +8,9 @@ import {Math} from 'angular2/src/facade/math';
   lifecycle: [onChange],
   properties: ['value', 'bufferValue'],
   host: {
-    '[attr.role]': 'role',
-    '[attr.aria-valuemin]': 'ariaValuemin',
-    '[attr.aria-valuemax]': 'ariaValuemax',
+    '[attr.role]': '"progressbar"',
+    '[attr.aria-valuemin]': '"0"',
+    '[attr.aria-valuemax]': '"100"',
     '[attr.aria-valuenow]': 'value'
   }
 })
@@ -34,18 +34,10 @@ export class MdProgressLinear {
   /** CSS `transform` property applied to the secondary bar. */
   secondaryBarTransform: string;
 
-  role: string;
-  ariaValuemin: string;
-  ariaValuemax: string;
-
   constructor(@Attribute('md-mode') mode: string) {
     this.primaryBarTransform = '';
     this.secondaryBarTransform = '';
 
-    this.role = 'progressbar';
-    this.ariaValuemin = '0';
-    this.ariaValuemax = '100';
-
     this.mode = isPresent(mode) ? mode : Mode.DETERMINATE;
   }
 
diff --git a/modules/angular2_material/src/components/radio/radio_button.ts b/modules/angular2_material/src/components/radio/radio_button.ts
@@ -31,7 +31,7 @@ var _uniqueIdCounter: number = 0;
     // TODO(jelbourn): Remove ^ when event retargeting is fixed.
     '(^keydown)': 'onKeydown($event)',
     '[tabindex]': 'tabindex',
-    '[attr.role]': 'role',
+    '[attr.role]': '"radiogroup"',
     '[attr.aria-disabled]': 'disabled',
     '[attr.aria-activedescendant]': 'activedescendant'
   }
@@ -61,8 +61,6 @@ export class MdRadioGroup {
 
   tabindex: number;
 
-  role: string;
-
   constructor(@Attribute('tabindex') tabindex: string, @Attribute('disabled') disabled: string,
               radioDispatcher: MdRadioDispatcher) {
     this.name_ = `md-radio-group-${_uniqueIdCounter++}`;
@@ -72,8 +70,6 @@ export class MdRadioGroup {
     this.selectedRadioId = '';
     this.disabled_ = false;
 
-    this.role = 'radiogroup';
-
     // The simple presence of the `disabled` attribute dictates disabled state.
     this.disabled = isPresent(disabled);
 
diff --git a/modules/angular2_material/src/components/switcher/switch.ts b/modules/angular2_material/src/components/switcher/switch.ts
@@ -13,7 +13,7 @@ import {NumberWrapper} from 'angular2/src/facade/lang';
     '(keydown)': 'onKeydown($event)',
     '[attr.aria-checked]': 'checked',
     '[attr.aria-disabled]': 'disabled_',
-    '[attr.role]': 'role'
+    '[attr.role]': '"checkbox"'
   }
 })
 @View({templateUrl: 'angular2_material/src/components/switcher/switch.html', directives: []})
@@ -25,10 +25,8 @@ export class MdSwitch {
   disabled_: boolean;
 
   tabindex: number;
-  role: string;
 
   constructor(@Attribute('tabindex') tabindex: string) {
-    this.role = 'checkbox';
     this.checked = false;
     this.tabindex = isPresent(tabindex) ? NumberWrapper.parseInt(tabindex, 10) : 0;
   }
