fix: focus indicators table elements

[abdul99ahad]

Related to camunda/camunda-modeler#4632

Proposed Changes

Previously, table elements lacked focus states. Since they are interactive elements, focus states have been added.

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}

[philippfromme]

Changing it to

td:has(.bio-vo-text-button:focus-visible) {
  outline: 2px solid var(--cds-focus, #0f62fe);
  outline-offset: -2px;
}

ensures that the outline will match the table cell

What do you think?

[abdul99ahad]

Changing it to

td:has(.bio-vo-text-button:focus-visible) {
  outline: 2px solid var(--cds-focus, #0f62fe);
  outline-offset: -2px;
}

ensures that the outline will match the table cell

What do you think?

That's much better. Thanks. didn't know there's a way to do this

[philippfromme]

@abdul99ahad It's a fairly new pseudo-class but supported by all major browsers.

[nikku]

@philippfromme I think it won't properly represent multiple selectable elements within the same cell. We already have that use case where a variable can have multiple origins.

So I'd not go down that route.

[philippfromme]

Is multiple selectable elements in a single table cell a pattern we want to support?

[barmac]

I'd like us to make it clear what elements we want to be focusable. @philippfromme's proposal makes it so only table cells can be focussed from the appearance point of view. However, as displayed in the top-comment example, it is not the cells but only certain elements in the cells which can have focus:

So there can be a cell with multiple focusable elements inside, but also a cell with no focusable contents.

As a side note, we could rename the Origin column to properly represent the aspect of supporting multiple places where the variable is written to. Origins sound awkward to me because I'd rather expect a single origin.

[barmac]

As a side note, we could rename the Origin column to properly represent the aspect of supporting multiple places where the variable is written to. Origins sound awkward to me because I'd rather expect a single origin.

This is scope creep, unrelated to PR ;)

[nikku]

Is multiple selectable elements in a single table cell a pattern we want to support?

Yes, because approved could be set automatically or via human intervention:

[abdul99ahad]

@philippfromme I think it won't properly represent multiple selectable elements within the same cell. We already have that use case where a variable can have multiple origins.

Reverted to individual focusable table cells with improved focus alignment.

[nikku]

I reworked the changes in this PR based of our previous discussions:

• The buttons should not be buttons, but link like elements
• So a link outline applies to them
• That works properly in all cases, also where multiple origins are provided

CC @abdul99ahad @lmbateman

---

[nikku]

@abdul99ahad this is ready to be released and incorporated.