Support focus style for focusable components

[gokulkrishh]

I am using DateRangepicker component in an app, it is focusable but there is no indicator for it like border or outline.

This is issue is request for supporting it, example i used here is DateRangepicker but ideally it should be supported by all focusable inputs, buttons etc,.

How it is now

How it can be

[birjj]

This is a general accessibility concern that tremor doesn't seem to have handled. Just to add a bit to the list, the following components have problematic styling for keyboard navigation in either Chrome or Firefox:

(sad cat 😿 indicates problem that makes keyboard interaction near unusable, usually due to removed focus indicator)

Accordion 😿

Corners of outline cut off on Chrome, no outline in Firefox (😿):

Buttons

Normal buttons have good focus styling (🎉), but light variants have a white outline that is almost invisible in both Chrome and Firefox:

Date Range Picker 😿

No outline for root elements in Chrome (😿). Good outline in Firefox (🎉):

Good (but inconsistent) outlines for internal elements in both Chrome and Firefox.

Slightly nit-picky, but keyboard interaction in the date picker would be nice, so Up / Down / Left / Right works, would be nice. The current native implementation (Tab / Enter supported) works, but isn't necessarily intuitive.

Dropdown 😿

No outline in Chrome (😿). Good outline in Firefox (🎉):

The options in the dropdown have an outline shown, but they are cut off:

The dropdown has keyboard interaction implemented (🎉!!!), so Up, Down and Esc works - but the styling is different when using Tab.

Text input

No outline in Chrome or Firefox. There is a very weak focus indicator (blinking cursor), but that is insufficient:

Select 😿

For single selects:
The currently chosen text is targetable in both Chrome and Firefox. It is usually used to filter the list of options when the select is open, but does nothing when the select is closed. It also does not open the select when hitting Enter.

The arrow is focusable and opens the select (🎉). The options in the dropdown have an outline shown, but they are cut off:

The select has keyboard interaction implemented (🎉!!!), so Up, Down and Esc works - but the styling is different when using Tab.

For multi selects:
No outline in Chrome (😿):

Internal outlines work in both Chrome and Firefox.

The select has keyboard interaction implemented (🎉!!!), but there is an inconsistency: if you use native interaction (Tab), then Enter doesn't select the option, Space does. If you use the custom implementation (Up / Down) then it's the inverse.

Slightly nit-picky, but it would be nice if the search field was focused when the multi-select is opened, so users can immediately type to search.

Tabs 😿

No outline in Chrome (😿):

Toggle (nit-pick)

Slightly nit-picky, but keyboard interaction would be nice, so Left / Right works, would be nice. The current native implementation (Tab / Enter supported) works, but isn't necessarily intuitive.

Outlines are shown in both Chrome and Firefox (🎉)

[gokulkrishh]

@birjj Thanks for sharing your thoughts and inputs. Having a accessible inputs should also be goal a of library imo. Lets wait for Tremor team to reply and see what they have in mind to told this problem.

[christopherkindl]

Thank you for raising this concern! Also congrats to @gokulkrishh for the launch of expense.fyi ☺️

Accessibility is not covered yet as we are still in beta. We are currently incorporating it for the production-ready version that will be released soon.

Thank you for patience and using our library! 🙏

[gokulkrishh]

@christopherkindl thanks and glad to know that A11Y support is in roadmap. Looking forward for the production version. Tremor is awesome keep up the good work. 🫡

[mitrotasios]

Yep, a lot of the points noted by @birjj will be addressed in the v2 which is supposed to be released at the end of this month. Thanks for listing these!

[severinlandolt]

WIP:

Focus Styling Status: 🟢🟠🔴

• Accordion: Chrome🟠 Safari🔴 Firefox🔴
• Buttons: Chrome🔴 Safari🔴 Firefox🔴
• Date (Range) Picker Chrome🟢 Safari🟢 Firefox🟢 (improvements to date range selection)
• Text input: Chrome🟢 Safari🟢 Firefox🟢
• Select TODO
  • Select
  • SearchSelect
  • MultiSelect
• Tabs TODO
• Number Input: Chrome🟢 Safari🟢 Firefox🟢
• ~~Toggle (nit-pick)~~ deprecated

[adnjoo]

+1 for tab

I saw the base is headlessui tab so you can use e.g. ⬅️➡️ arrow keys to navigate through the tabs