search

mollie / components-examples

Examples and reference implementations for Mollie Components
13 stars 6 forks source link

Accessibility (= keyboard only) limitation when creditcard form has display:none on page load #8

Open mybooc opened 4 years ago

mybooc commented 4 years ago

I bounced into a accessibility (= keyboard only) limitation if you have a checkout page with collapsible (display:none) elements.

Assume the page starts with some form elements. After that you have a payment selection, for example ideal and creditcard.

If the creditcard form is collapsed on page load, and after selecting creditcard you display it (using display:block) then you cannot 'tab' beyond the Card holder. Instead you go back to the first form element on the page.

Checking mollie.js it looks that this has to do with mollie.js function reindexFocussableElements which is typically run at page load.

Does this mean that you should mount the creditcard fields every time after selecting the creditcard form, or is there another way?

Marinolinderhof commented 4 years ago

@mybooc Interesting challenge. Yes, Mollie components looks at the tab flow and will push our elements in the tab sequence accordingly. This is because we use iframes so we need to do this. So currently I don't see an other solution as you proposed. I do acknowledge this is not ideal. I will try to think of a solution with the team.

If we release something you can use I will get back to you. If you have any further questions please feel free to reply. Thanks for your question/remark highly appreciated.

cpuell commented 2 years ago

Any update on this?