search

digipolisantwerp / antwerp-ui_angular

Antwerp UI is a component interface library for building user interfaces and responsive web apps.
https://digipolisantwerp.github.io/antwerp-ui_angular
MIT License
13 stars 19 forks source link

TabIndex on flyout-action needs to be overrrideable #160

Closed pimeggermont closed 4 years ago

pimeggermont commented 5 years ago

Describe the bug

When you tab between input field and there is a flyout-action in between, it focusses on this flyout-action. -> works as designed I guess? But when we do not want this behavior and want to override tabIndex (-1) on this field it gets overwritten by the value set in flyout-action (0).

To Reproduce

1) Go to https://evenementenaanvraag-o.antwerpen.be 2) Login 3) Start a dossier: -> Evenementen -> Festivals, Concerten en fuiven -> Festival -> Aanvraag starten 4) Go to step 2 (Periode & Duur) 5) Fill in using tab 6) This reproduces the unwanted behavior.

Additional context

Fix: Make tabIndex overrideable

TriangleJuice commented 5 years ago

Next to the fact that I cannot reproduce this bug (I'm probably doing something wrong) you should take into consideration the effects towards accessibility. I don't think you want to make the flyout inaccessible, definitely not on purpose! If you want we can take a look at the problem together.

jensCocquyt commented 4 years ago

@TriangleJuice you cannot reproduce this issue because we reverted to a previous version :) You can see the issue in the gif below. The "meer info" labels shouldn't get focus when tabbing between input fields. flyout

TriangleJuice commented 4 years ago

Ok, I see what you mean. However, following the WCAG (required by the EU), this link must be focusable, so while it would be technically possibly to alter the behaviour we are not going to do this. We also advice against 'fixing' this yourselves, because of aforementioned reasons.