diff --git a/src/components/textField/textField.js b/src/components/textField/textField.js index 134164fef6c..67deaf63095 100644 --- a/src/components/textField/textField.js +++ b/src/components/textField/textField.js @@ -30,6 +30,7 @@ angular.module('material.components.textField', [ * @param {string} label String value or expression that specifies the input text field label/hint. * @param {string=} type Optional value to define the type of input field. Defaults to string. * @param {string=} md-fid Optional attribute used for accessibility link pairing between the Label and Input elements + * @param {string=} tabindex Optional attribute to specify tab order. * * @usage * @@ -65,14 +66,18 @@ function mdTextFloatDirective($mdTheming, $mdUtil, $parse) { }; scope.inputType = attrs.type || "text"; + + scope.tabIndex = attrs.tabindex || '0'; + + element.attr('tabindex', '-1'); }, post: $mdTheming }; }, template: - '' + - ' ' + - ' ' + + '' + + ' ' + + ' ' + '' }; } @@ -142,9 +147,11 @@ function mdInputDirective($mdUtil) { var inputGroupCtrl = ctrls[0]; var ngModelCtrl = ctrls[1]; + var initialTabIndex = angular.isUndefined(attr.tabindex) ? 0 : attr.tabindex; + scope.$watch(scope.isDisabled, function(isDisabled) { element.attr('aria-disabled', !!isDisabled); - element.attr('tabindex', !!isDisabled); + element.attr('tabindex', (isDisabled ? -1 : initialTabIndex)); }); element.attr('type', attr.type || element.parent().attr('type') || "text"); diff --git a/src/components/textField/textField.spec.js b/src/components/textField/textField.spec.js index e39b914568a..288e4687409 100644 --- a/src/components/textField/textField.spec.js +++ b/src/components/textField/textField.spec.js @@ -77,6 +77,13 @@ describe('Text Field directives', function() { } }); + it('should have a valid tabindex', function() { + var el = setupTextFloat( { tabIndex:"1" }, model); + + expect(el.attr('tabindex')).toBe('-1'); + expect(el.find('input').attr('tabIndex')).toBe('1'); + }); + it('should set input type `password` properly', function() { var el = setupTextFloat( { type:"password" }, model); expect( el.find('input').attr('type')).toBe("password"); @@ -234,13 +241,14 @@ describe('Text Field directives', function() { md_text_float : '' + '', - md_input_group: '
' + + md_input_group: '' + ' ' + - ' ' + - '
' + ' ' + + '
' }; /**