iXblinds title vanishes with tab key

[yetibrain]

What happened?

I got a bug when trying to move to an iXblind by using the tab key. Usually users should be able to navigate along controls without a mouse, just by keyboard (in case of tablet devices). I found out that it is not possible to move to an iXblind by tab key. When klicking onto an iXblind with the mouse and pressing the tab key, the iXblind title is no more visible. The expected behaviour should be that using the tab key an iXblind can become the active control and expanding/collapsing is done by using the enter or space key.

What type of frontend frameware are you seeing the problem on?

Angular

Which version of iX do you use?

v1.4.2

Code to produce this issue.

No response

[danielleroux]

@yetibrain should already be fixed in 1.5.0

https://github.com/siemens/ix/pull/461

[yetibrain]

@danielleroux thanks for your posting.

Now i can navigate to the ixBlind control and expand/collapse it using the tab key or the enter key. But when i don't expand it and try to move to the Cancel or OK button within the dialog by using the tab key, the title of the ixBlind vanishes and i cannot move forward nor backward with the tab key.

[nuke-ellington]

@yetibrain can you please specify what dialog you are referencing in your reply? Maybe you can post a quick code example of your markup that shows the blind and the buttons?

[yetibrain]

@nuke-ellington In the meanwhile i found out, that the iX-Blind we use within a html form, still allows to use the tab key to step from input field to input field although of course the input fields are not visible to the user, while the iX-Blind is collapsed. There is also an effect, that after the first strike of the Tab-key, the iX-Blind Title vanishes.

We now did a quick-fix and hook into the OnCollapsedChanged() event. Within the html component, we added a div element to group the form input fields and use a *ngIf statement along with a "collapsed" property, which we set from within the OnCollapsedChanged event handler.

Now, when the iX-Blind is collapsed and i press the Tab-key, the Title of the iX-Blind stays as is and the Tab-key pressing leads me to the Cancel button of the form and another Tab-key pressing, to the Submit-button of the form.

However i believe the iX-Blind should do the job implicit due to the fact that it makes no sense, to allow to step with the Tab-key along controls that are not visible while the iX-Blind is collapsed.

Here is a code snippet of our quick fix:

<form>
  <ix-blind
          class="margin-top"
          label="Options"
          [collapsed]="collapsed"
          (collapsedChange)="OnCollapsedChanged($event)"
          >
          <div *ngIf="!collapsed">

             <here-are-some-input-fields>

             </here-are-some-input-fields>

          </div>
  </ix-blind>
</form>