search

flekschas / svelte-simple-modal

A simple, small, and content-agnostic modal for Svelte v3 and v4
https://svelte.dev/repl/b95ce66b0ef34064a34afc5c0249f313
MIT License
422 stars 30 forks source link

make tabindex lower case #80

Closed daniel17903 closed 2 years ago

daniel17903 commented 2 years ago

Background

Hi, I have a Svelte App with multiple input fields inside the modal. I cannot use tabindex to switch between inputs. This is because the tabindex attribute should be written in lower case (see https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex).

Currently Observed Behavior

I cannot use tabindex to switch between inputs. Demo: https://svelte.dev/repl/f2da168bd00b4ea08acc63c5719b67d9?version=3.48.0

New Behavior

I can use tabindex to switch betwwen inputs. Demo: https://svelte.dev/repl/f15d53f9987d4eb4afe7d01db72a2f24?version=3.48.0

flekschas commented 2 years ago

You are referencing the HTML documentation, not the web API documentation of HTMLElement. tabIndex is camel-cased: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex

Also the current behavior is expected. The focus event is trapped to elements inside the modal. The new behavior is broken because node.tabindex is always undefined. It also throws Uncaught TypeError: tabbable[index] is undefined.

I don't exactly know what you're trying to achieve with this code change.

daniel17903 commented 2 years ago

Sorry, you are right, camelCase is correct and I understand that the focus should be trapped inside the modal. My issue is that the focus order set by tabIndex is currently ignored. I updated my code to fix it.

Currently Observerd Behaviour In my demo I have three inputs in the modal with tabIndex="2", tabIndex="1" and tabIndex="3". When focusing the first input field and pressing Tab, focus jumps to the second input field. Demo: https://svelte.dev/repl/f2da168bd00b4ea08acc63c5719b67d9?version=3.48.0

New Behaviour When focusing the first input field and pressing Tab, focus jumps to the third input field. Because as the web API documentation says "Navigation proceeds from the lowest tabIndex to the highest tabIndex." (https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex). Demo: https://svelte.dev/repl/c3f863d92a304217ab8b74cb9dd3ac42?version=3.48.0

flekschas commented 2 years ago

I just released v1.3.4 which contains the fix from your PR! Thanks again 🙏