Various browser and keyboard related issues.

[MrJoy]

Let me start by saying that I love what you've done with this project. Absolutely gorgeous, and very well thought out. Also, I'm not sure if you consider all of what I'm going to list as in-scope, so if not, my apologies. Similarly, if some of these are already on your radar, my apologies.

I was doing a quick review of the various widgets available to see if this project meets my needs and ran into a bunch of issues. Safari 15.3 (17612.4.9.1.8), and Chrome 99.0.4844.51 -- both on macOS 12.2.1 -- are the platforms I tested.

I've organized my notes into three sections: Browser-specific (broken down by widget), widget-specific, and cross-cutting issues:

Safari

Focus Rings

• Missing on:
  • Checkboxes
  • Toggles
  • Radio buttons
  • Buttons (until pressed via spacebar)
  • Ranges
  • Ratings
  • Drawer buttons
• Incorrect shape (square):
  • Input fields
  • Text areas
  • Input groups
  • Select
• Z-ordering issues:
  • Button group buttons that aren't the right-most button, except when the button is in the active/down state
• Incorrect color (browser default):
  • Buttons

Collapse Widget

Doesn't close properly when clicked.

Swap

In the "Swap icons with flip effect", there's z-fighting issues when flipping from devil to angel.

Chrome

Swap

In the "Swap icons with flip effect", the animation seems to get ahead of itself, cutting over to the end image before the animation has finished. Hard to be sure with the animation happening so quickly, though.

Widget-Specific

Ranges

It might be handy if ranges supported, say, a shift modifier to move in larger steps when navigated via keyboard.

Glass Buttons

Depending on the background color, the text can have contrast issues. Is outlining the text in a contrasting color a possibility?

Cross-Cutting Concerns

Keyboard Navigation

General

The following items don't appear to support keyboard navigation at all, which is surprising in a few cases:

• Links
• Menu items
• Dropdown items
• Drawer items
• Tabs

Given that for some widget types, keyboard navigation can't really be meaningfully integrated without major changes, perhaps it might be of value to categorize widgets according to whether or not keyboard-navigation is something supported, on the roadmap to be supported, or not on the agenda at all. Strictly to help set expectations, and help developers for whome keyboard navigations support is a priority get ahead of any issues by sticking to components where that's viable.

Carousels

Challenging in all browsers because the buttons are associated with each image. E.G. Hitting the next-image button leaves the focus on that very button, so you need to press tab twice to move forward to the next button for the now-displayed image.

[saadeghi]

Thanks for the detailed review. I really appreciate it.

Focus Rings

• Missing on:

  • Checkboxes
  • Toggles
  • Radio buttons
  • Buttons (until pressed via spacebar)
  • Ranges
  • Ratings
  • Drawer buttons

• [x] Safari by default needs Option+Tab to navigate on form elements. It shows the focus ring when using Option+Tab
  Except for Rating because Rating is using CSS mask. It has a lift-up effect instead
  Safari's default Option+Tab key can be changed to Tab on preferences:

• Incorrect shape (square):

  • Input fields
  • Text areas
  • Input groups
  • Select

• [x] I was using box-shadow to show a focus ring in earlier daisyUI version but that would remove the custom box shadow style user was using. So I used the standard outline instead. Currently, all browsers except Safari respect the border-radius for outline. I hope safari fixes this soon: https://twitter.com/CodyWebHouse/status/1442495944239435777

• Z-ordering issues:
  • Button group buttons that aren't the right-most button, except when the button is in the active/down state

• [x] There's a difference between 2 examples. First one is just <button> elements. Second one is radio button. when there 4 radio buttons with same name, browsers give it only 1 tabindex because it's just for selecting 1 value. When the active radio button is focused, we can change the option using arrow keys. This is the browser behavior and it's not something I defined (or can define)

• Incorrect color (browser default):

  • Buttons

• [ ] I can't reproduce the issue with buttons. Can you give me a code example?

Collapse Widget

Doesn't close properly when clicked.

• [ ] What do you mean "properly"? Can you explain the issue?

Swap

In the "Swap icons with flip effect", there's z-fighting issues when flipping from devil to angel.

• [ ] I will make open an issue for this

Chrome

Swap

In the "Swap icons with flip effect", the animation seems to get ahead of itself, cutting over to the end image before the animation has finished. Hard to be sure with the animation happening so quickly, though.

• [ ] I will make open an issue for this

Widget-Specific

Ranges

It might be handy if ranges supported, say, a shift modifier to move in larger steps when navigated via keyboard.

• [x] As far as I know, It's not possible without an external JS library

Glass Buttons

Depending on the background color, the text can have contrast issues. Is outlining the text in a contrasting color a possibility?

• [x] It's possible to add stroke to the text but text stroke won't look good on all font and it doesn't fit the overall design either. However, if someone wants to use the glass button on a light background, they can customize the text color using Tailwind CSS text-{color-name} utility class. To make sure the contrast is readable.

Cross-Cutting Concerns

Keyboard Navigation

General

The following items don't appear to support keyboard navigation at all, which is surprising in a few cases:

• Links
• Menu items
• Dropdown items
• Drawer items
• Tabs

• [x] All these items will have keyboard navigation on a real product. The demo site is using <a> tags without href attribute. on a real website, developers should put href with the URL and that is what gives the <a> take a keyboard navigation. on daisyUI site examples they don't have keyboard navigation because they don't have actual link to a page.

Carousels

Challenging in all browsers because the buttons are associated with each image. E.G. Hitting the next-image button leaves the focus on that very button, so you need to press tab twice to move forward to the next button for the now-displayed image.

• [x] I'm aware of this issue, the examples with next/prev buttons can't compete with a normal JS image slider library because with a JS library there are only 1 next button and only 1 prev button. JS calculates and shows the next image when ever button is pressed. In a CSS-only slider (like daisyUI) however, one button can't calculate the next slide so I had to add next/prev buttons for every slide, linking to the next/prev image.

[MrJoy]

Safari's default Option+Tab key can be changed to Tab on preferences

I do, in fact, have that enabled already. Had completely forgotten about that setting and its impact on the behavior, but good to know going forward.

Currently, all browsers except Safari respect the border-radius for outline.

Safari has a bug? I am... not at all surprised. I recall having issues with this when implementing the design for my day job, but I never connected the dots to a possible bug. I did get the issue mostly resolved, but the context of that was abstracted from the details (TailwindCSS) so I don't really have a clear sense of what needed to happen to address it -- or even if it was an issue with the same widgets or something else. I wish I'd kept better notes on that so I could compare with you to see if it was the same issue that I worked around, or a separate issue that manifests in visually similar ways.

What do you mean "properly"? Can you explain the issue?

The "Collapse with focus" example seems to work. The "Collapse with checkbox" example I can sometimes close but usually not.

Also, I think I forgot to include this Safari focus ring issue but was just reminded of it while refreshing my memory on the collapse issues:

As far as I know, It's not possible without an external JS library

Ah, gotcha. Makes total sense. You're sticking to pure CSS with your project, I assume?

All these items will have keyboard navigation on a real product.

Ah! Didn't catch the lack of href's. Got it.

I'm aware of this issue, the examples with next/prev buttons can't compete with a normal JS image slider library because with a JS library there are only 1 next button and only 1 prev button.

Ahh! Another out-of-scope matter. Gotcha. Makes total sense.

[CRdeGraaf]

Focus Rings

Incorrect shape (square):

Input fields Text areas Input groups Select

Have you considered any solutions from DaisyUI's end, or will you wait for Apple to fix this? The tweet with the safari bug is almost 1yo and according to the latest statistics 1 in 5 web users will now see an inconsistent form UI with this package.

Safari might be the new IE, but the old IE actually died. Safari did not.

[saadeghi]

@CRdeGraaf I wish there was a solution, but until next Safari update, we can't do anything.
The only workaround is to simulate the outline using box shadow, but that will cause other problems and developers won't be able to use the box shadow for adding actual shadows.
Safari team is working on many features right now and it's not an abandoned software. It's just about priorities.

[sarvartojikulov]

HI there 👋 I fixed the issue with Inputs and Select using tailwindcss ring.

You can view solution in codepen

Some screenshots:

Let me know if I can contribute and fix the bug with borders.😄