From 98fcf8c6ef8c5f779275a0ce6d5b6a2b8350d138 Mon Sep 17 00:00:00 2001 From: Pawel Kozlowski Date: Sun, 14 Jun 2015 14:24:19 +0200 Subject: [PATCH] refactor(material): use static strings for aria roles Closes #2542 --- .../src/components/checkbox/checkbox.ts | 6 +----- .../src/components/grid_list/grid_list.ts | 5 +---- .../components/progress-linear/progress_linear.ts | 14 +++----------- .../src/components/radio/radio_button.ts | 6 +----- .../src/components/switcher/switch.ts | 4 +--- 5 files changed, 7 insertions(+), 28 deletions(-) diff --git a/modules/angular2_material/src/components/checkbox/checkbox.ts b/modules/angular2_material/src/components/checkbox/checkbox.ts index 332ef3b882..c5bbb3a6b1 100644 --- 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 index 76303ee271..70fa4be5d2 100644 --- 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 index bafc51599d..8b75893872 100644 --- 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 index 93b249bd62..557c0fd693 100644 --- 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 index 2ac91a2ce2..e190779fad 100644 --- 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; }