KonnorRogers / konnors-ninja-keys

Ninja Keys fork!
https://konnorrogers.github.io/konnors-ninja-keys/
MIT License
9 stars 2 forks source link

(possible breaking change): Create a more declarative API #11

Open KonnorRogers opened 7 months ago

KonnorRogers commented 7 months ago

Because ninja-keys is really a Combobox under the hood, it uses a very JS heavy API. Even including emulating click handlers. (This fork has allowed for rendering <a> tags and using native handling of anchor tags)

I would love a more declarative API, however comboboxes come with some accessibility limitations around cross-root aria issues, so options and its corresponding listbox do need to live in the same "document root".

Example APIs:

Option 1 exposes the actions and listbox into the light DOM, which is much different than today, and would create a weird gap because I would like to maintain backwards compatibility with the existing API.

<ninja-keys>
  <ninja-listbox>
     <ninja-action>
        <button type="button">Do stuff</button>
     </ninja-action>
  </ninja-listbox>
</ninja-keys>

Option 2 is much closer to what exists today, but can be a little counter intuitive for people because the elements will be cloned into the Shadow DOM:

<ninja-keys>
  <template>
    <ninja-action>
      <button type="button">Do Stuff</button>
    </ninja-action>
  </template>
</ninja-keys>

I'm leaning much closer to option 2 purely because it would be easier to maintain backwards compatibility with what exists today, but can be confusing to new users because the elements will be cloned into the shadow dom.