tabindex and mdTextFloat

[mlibby]

The tabindex attribute is not being set correctly on text inputs if it is set on a mdTextFloat. Some of what I'm seeing is partially due to including ngAria, but I believe the problem is in tabindex propagation inside mdTextFloat.

In my sample code I am attempting to set the tabindex on the mdButton so that it is last in the tab order. That way the keyboard user can just tab into the form at the first field, enter values, tab thru the form, and finally tab to the Save button and save.

However, it does not work as expected. I have set up this sample code:

<style>
  input[type=text]:focus{ background-color: red; }
  md-input-group:focus{ background-color: blue; }
</style>

<form novalidate>
  <md-toolbar class='md-toolbar-tools'>
    <h1>New Account</h1>
    <span flex></span>
    <md-button tabindex='2' class='md-button' type='submit' ng-click='ctrl.submit()'>Save</md-button>
  </md-toolbar>
  <md-content layout-padding>
    <md-text-float tabindex='1' label='Text One' ng-model='$rootScope.foo'></md-text-float>
    <md-text-float tabindex='1' label='Text Two' ng-model='$rootScope.bar'></md-text-float>
  </md-content>
</form>

which behaves as follows as shown in the animated GIF (one frame per Tab keypress):

The markup that was generated was:

<main class="md-padding clearfix ng-scope" layout="vertical" role="main" ng-view="">
<style class="ng-scope">
  input[type=text]:focus{ background-color: red; }
  md-input-group:focus{ background-color: blue; }
</style>

<form class="ng-pristine ng-valid ng-scope ng-submitted" novalidate="">
  <md-toolbar class="md-toolbar-tools md-default-theme">
    <h1>New Account</h1>
    <span flex=""></span>
    <button tabindex="2" type="submit" ng-click="ctrl.submit()" class="md-button md-default-theme" ng-transclude=""><span class="ng-scope">Save</span></button>
  </md-toolbar>
  <md-content class="md-default-theme" layout-padding="">
    <md-input-group aria-invalid="false" class="ng-isolate-scope md-default-theme ng-valid ng-touched" label="Text One" ng-model="$rootScope.foo" ng-disabled="isDisabled" tabindex="1 -1"> 
      <label class="ng-binding" for="001">Text One</label> 
      <input class="ng-valid ng-touched" aria-invalid="false" aria-disabled="false" tabindex="0" id="001" ng-model="value" type="text">
    </md-input-group>
    <md-input-group aria-invalid="false" class="ng-isolate-scope md-default-theme ng-valid ng-touched" label="Text Two" ng-model="$rootScope.bar" ng-disabled="isDisabled" tabindex="1 -1">
       <label class="ng-binding" for="002">Text Two</label>
       <input class="ng-valid ng-touched" aria-invalid="false" aria-disabled="false" tabindex="0" id="002" ng-model="value" type="text">
     </md-input-group>
  </md-content>
</form>
</main>

Note the tabindex attribute on the md-input-groups somehow manage to get the value of 1 -1! This should be either undefined or -1 to keep them out of the tab order entirely.

The inputs themselves have tabindex="0", which should be 1 set by the mdTextFloat directive based on the original markup. 0 puts elements last in the order after any element with a positive tabindex.

For this to work as expected, the output should be:

<main class="md-padding clearfix ng-scope" layout="vertical" role="main" ng-view="">
<style class="ng-scope">
  input[type=text]:focus{ background-color: red; }
  md-input-group:focus{ background-color: blue; }
</style>

<form novalidate="" class="ng-pristine ng-valid ng-scope">
  <md-toolbar class="md-toolbar-tools md-brown-theme">
    <h1>Test Form</h1>
    <span flex=""></span>
    <button class="md-button md-brown-theme" ng-transclude="" tabindex="2" type="submit" ng-click="ctrl.submit()" style="touch-action: pan-y; -webkit-user-select: none; -webkit-user-drag: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><span class="ng-scope">Save</span></button>
  </md-toolbar>
  <md-content layout-padding="" class="md-brown-theme">
    <md-input-group ng-disabled="isDisabled" label="Text One" ng-model="$rootScope.foo" class="ng-isolate-scope md-brown-theme ng-valid ng-touched" aria-invalid="false"> 
      <label for="001" class="ng-binding">Text One</label> 
      <input id="001" ng-model="value" type="text" tabindex="1" aria-disabled="false" aria-invalid="false" class="ng-valid ng-touched">
    </md-input-group>
    <md-input-group ng-disabled="isDisabled" label="Text Two" ng-model="$rootScope.bar" class="ng-isolate-scope md-brown-theme ng-valid ng-touched" aria-invalid="false">
      <label for="002" class="ng-binding">Text Two</label>
      <input id="002" ng-model="value" type="text" tabindex="1" aria-disabled="false" aria-invalid="false" class="ng-valid ng-touched">
    </md-input-group>
  </md-content>
</form>
</main>

[ajoslin]

Fixed via 60fcd6f