preline icon indicating copy to clipboard operation
preline copied to clipboard
verified publisher icon htmlstreamofficial

Modal keyboard navigation (tab/shift+tab) not working correctly

Open UnlockQA opened this issue 1 year ago • 1 comments

Summary

The modal component has inconsistent keyboard navigation behavior

Steps to Reproduce

  1. Open any modal containing form elements e.g. User Profile Create Event
  2. Try to navigate through elements using Tab key
  3. Try to navigate backwards using Shift+Tab
  4. Try to tab through select fields

Demo Link

https://preline.co/pro/examples/modals-add-create-forms.html

Expected Behavior

  1. Users should be able to tab forward through ALL focusable elements (inputs, selects, buttons etc.)
  2. Users should be able to tab backwards using Shift+Tab
  3. Tab order should follow a logical sequence
  4. Behavior should comply with WCAG keyboard accessibility guidelines

Actual Behavior

  1. Can only tab forward through some input fields
  2. Cannot tab backwards at all
  3. Some fields you cannot tab into at all, and then you cannot tab backwards, so you're stuck

Screenshots

No response

UnlockQA avatar Dec 07 '24 12:12 UnlockQA

I have the same issue. Tab works to cycle forward through controls, but shift+tab does not cycle backwards. Also, get stuck on certain inputs. Quite frustrating

P00HB33R avatar Jan 13 '25 18:01 P00HB33R

@UnlockQA, @P00HB33R - we've just released v3.2 Preline UI which addresses this issue and includes new Accessibility Manager to handle advanced accessibility cases. You may learn more here: https://preline.co/docs/accessibility.html

jahaganiev avatar Jul 30 '25 19:07 jahaganiev