nimble.ni.dev - Missing focus visible visuals when moving arround elements

[msmithNI]

URL: https://nimble.ni.dev/storybook/?path=/story/components-table--table

Browser / Version: Safari 17.5 Operating System: macOS 14 Sonoma Tested Another Browser: Yes Chrome

Problem type: Design is broken Description: Items not fully visible Steps to Reproduce: Steps to reproduce:

1. Click text in the 2nd table row (e.g. the "Milhouse" text in the 2nd row)
2. Press UpArrow on the keyboard Expected result: The 1st row becomes focused, and shows a green border (styled with :focus-visible). See included screenshot (taken from Chrome).
3. Press Tab on the keyboard Expected result: The 1st [...] button in the 1st row becomes focused, and shows a green border (styled with :focus-visible).

In Chrome and Firefox, the green border (:focus-visible visuals) do appear. In Safari, the focus visuals do not appear.

A simpler test case is also available at https://jsfiddle.net/10a26Ljp/2/ - it shows the same behavior (Chrome and Firefox showing :focus-visible visuals, but not Safari).

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-raul-bucata]

Thanks for the report @msmithNI . I was able to reproduce the issue following the simpler test case. Safari shows thin dotted lines around the borders when moving the focus with the arrows

@karlcow Making you aware

Tested with:

Browser / Version: Firefox Release 128.0 (64-bit)/ Firefox Nightly 130.0a1 (2024-07-08) (64-bit)/Safari 16.2 Operating System: Mac Ventura 13.1

[qa_28/2024]

[karlcow]

Thanks @msmithNI @softvision-raul-bucata

Checking

[karlcow]

in Firefox

keydown { target: nimble-table , key: "ArrowUp", charCode: 0, keyCode: 38 } [4447.8fd0eeb2.iframe.bundle.js:1:173205](https://nimble.ni.dev/storybook/4447.8fd0eeb2.iframe.bundle.js)
blur { target: nimble-table-row.row, isTrusted: true, relatedTarget: nimble-table-row.row, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: div.control , rangeOffset: 13, … } [3023.5b238cd0.iframe.bundle.js:2:36032](https://nimble.ni.dev/storybook/3023.5b238cd0.iframe.bundle.js)
focusin { target: nimble-table-row.row, isTrusted: true, relatedTarget: nimble-table-row.row, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: div.control, rangeOffset: 13, … } [3023.5b238cd0.iframe.bundle.js:2:36032](https://nimble.ni.dev/storybook/3023.5b238cd0.iframe.bundle.js)
keydown { target: nimble-table-row.row, key: "ArrowUp", charCode: 0, keyCode: 38 } [4447.8fd0eeb2.iframe.bundle.js:1:173983](https://nimble.ni.dev/storybook/4447.8fd0eeb2.iframe.bundle.js)
keydown { target: nimble-table, key: "ArrowUp", charCode: 0, keyCode: 38 } [4447.8fd0eeb2.iframe.bundle.js:1:173798](https://nimble.ni.dev/storybook/4447.8fd0eeb2.iframe.bundle.js)
keydown { target: nimble-table, key: "ArrowUp", charCode: 0, keyCode: 38 } [runtime.js:147:7012](https://nimble.ni.dev/storybook/sb-preview/runtime.js)
keydown { target: nimble-table, key: "ArrowUp", charCode: 0, keyCode: 38 } [4447.8fd0eeb2.iframe.bundle.js:1:200518](https://nimble.ni.dev/storybook/4447.8fd0eeb2.iframe.bundle.js)
keyup { target: nimble-table, key: "ArrowUp", charCode: 0, keyCode: 38 } [4447.8fd0eeb2.iframe.bundle.js:1:200573](https://nimble.ni.dev/storybook/4447.8fd0eeb2.iframe.bundle.js)

in Safari

[Log] event: pointermove, target: [object HTMLElement]
[Log] event: keydown, target: [object HTMLElement]
[Log] event: keydown, target: [object HTMLElement]
[Error] TypeError: undefined is not an object (evaluating 'event.type')
    Eval Code (Anonymous Script 1 (line 1))
    (anonymous function) (4447.8fd0eeb2.iframe.bundle.js:1:173979)
[Log] event: keydown, target: [object HTMLElement]
[Log] event: keydown, target: [object HTMLElement]
[Log] event: keydown, target: [object HTMLElement]
[Error] ReferenceError: Cannot access uninitialized variable.
    Eval Code (Anonymous Script 2 (line 1))
    handleEvent (chunk-2IOEGHGR.js:16:12235)
[Error] ReferenceError: Cannot access uninitialized variable.
    Eval Code (Anonymous Script 3 (line 1))
    handleEvent (runtime.js:7:12234)
[Log] event: message, target: [object Window]
[Log] event: keyup, target: [object HTMLElement]