Focus indicators consistent

[abdul99ahad]

Proposed Changes

Tab action buttons

Earlier: no focus
Now:

Checkbox

Earlier:

Now:

Buttons

Changes:

Bottom panel tab bar

Earlier: no focus
Changes:
(changes required)

Bottom panel icons

Earlier: no focus
Changes:

Bottom panel focus alignment issue

Earlier:
Changes:

Overlay buttons

Earlier:

Changes:

Footer icons

Earlier: grey background

Changes:

Variable outline tab

Earlier: no focus
Changes:

Checklist

To ensure you provided everything we need to look at your PR:

• Brief textual description of the changes present
• Visual demo attached
• Steps to try out present, i.e. using the @bpmn-io/sr tool
• Related issue linked via Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}

[github-actions]

This Pull Request targets develop branch, but contains fix commits.

Consider targeting main instead.

[nikku]

Is this about the specific variable outline or a general Carbon customization?

[abdul99ahad]

I don't think this is general carbon customization. Nevertheless, we have to see in variable-outline project.

[nikku]

Should this be a general properties panel fix?

[abdul99ahad]

The fix is implemented in bpmn-io/properties-panel#390

[nikku]

Good progress, some early comments:

• Cannot be focused yet:
  

• I see two versions of the outline (thin, and thick), do we plan to align this?
  
  

• I see two versions of outline styles now for buttons, do we plan to align this?
  
  

• Collapsed properties panel is still part of focusable (tabbable) application; we should detach it once collapsed:

  

Generally I'd suggest we fix the outlines in the relevant libraries, where they are broken, and don't monkey patch in modeler. Applies to properties panel and variable outline.

[abdul99ahad]

Improved the tab bar icon focus. The styles are consistent and I think the difference is very minor if you look closely. Do we invest more time to align this more perfectly or is it good to have?

cc: @nikku @lmbateman

[abdul99ahad]

Improved the tab bar icon focus. The styles are consistent and I think the difference is very minor if you look closely. Do we invest more time to align this more perfectly or is it good to have?

cc: @nikku @lmbateman

I think it's much better now.

[abdul99ahad]

Summary of the changes:

• Tabs and tab action buttons have focus
• Collapsed panel elements won't get focus
• Bottom bar have same consistent focus states
• Adjusted focus states offset for certain elements (buttons, containers, etc.,)
• Properties panel focus states are fixed here
• Variable outline focus states are fixed here

Figma designs can be found here

[lmbateman]

Collapsed properties panel is still part of focusable (tabbable) application; we should detach it once collapsed (Nico, above)
resolved collapsed panel to be not part of focus anymore (Abdul, in Slack)

I'm a little confused. Does this mean that

• when the Properties panel is collapsed, it completely drops out of the tab sequence, or
• when the Properties panel is collapsed, focus lands once on the panel as a whole, but not the items inside the panel?

ETA: The second one is great. I think the first one would make it impossible to open the Properties panel with the Tab and Return keys.

[nikku]

when the Properties panel is collapsed, focus lands once on the panel as a whole, but not the items inside the panel?

This, "the second one", is what I'd like to see:

• You can focus the "expand trigger", to expand the properties panel (using keyboard tabbing)
• But, if the panel is closed, then you're not able to focus items within it.