Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

tabindex and mdTextFloat #583

Closed
Closed
@mlibby

Description

@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):

tabindex
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>

Metadata

Metadata

Assignees

Labels

a11yThis issue is related to accessibilitytype: bug

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions