search

KittyCAD / modeling-app

The KittyCAD modeling app.
https://kittycad.io/modeling-app/download
MIT License
429 stars 37 forks source link

Improve toolbar UX #4469

Open nadr0 opened 2 weeks ago

nadr0 commented 2 weeks ago

When implementing the Center Rectangle tool I came across several UX issues within the toolbar. To prevent bloating center rectangle I've outlined these preexisting issues below.

  1. EscL or L, when active it shows Esc (keybinds), the copy is confusing.
  2. If action button is focused and you press keybinds the tooltip is kept focused (the old one is kept opened)
  3. Action array dropdown still shows focused tooltip when dropdown is open
  4. Select the dropdown actionbutton properly
  5. Select the tooltip actionbutton properly
  6. If you click to disable the tool you still see the tooltip due to focus
  7. If you have a tool selected then focus is applied the hover tooltip is under the focused tooltip
  8. Allow for multiple icon types within dropdown menus.

https://github.com/user-attachments/assets/f7b424bf-8e72-4996-aad2-d21884121142

I'd recommend removing the focus logic on tooltips and keep it to hover.

I think a lot of tools do not have tooltips stay open when focused, usually on hover. Excalidraw does have a little description but that is separate from the Tooltip. We both embed a description keybind, usage all into a single tooltip.

Image

franknoirot commented 2 days ago

The focus logic is in a probably naïve attempt at accessibility, but I support whatever we need to do to make these feel better including removing it and/or splitting out the description as you suggested. One thing to consider checking is if we've been using :focus where we should have been using :focus-visible, which should not appear on click interactions, etc.