Better accessibility on search result highlighting

My eyesight is fine, but on a large screen, it can be incredibly difficult to spot the flashing red dashed border around the current node matching a search. It doesn't flash for very long and can be a similar colour to the node, making it even harder to spot. I find I have to zoom in to restrict the number of nodes on the screen and to make the flashing border larger and more prominent.

For people with eye conditions that affect the peripheral vision (e.g., retinitis pigmentosa), it must be nigh on impossible to spot the flashing border.

Could we please have a setting to allow a more prominent highlight? I'm thinking maybe a border that expands outwards from the node like a wave, or contracts inwards towards it, leading the eye. Or making the node keep flashing until a click or keypress.

4 Likes

I think an improvement here would be good, it can be difficult to spot the node. The same applies when identifying a node after clicking in the debug pane.

1 Like

You are not alone. I have dont have any peripheral issues and I struggle to find the highlighted node too :joy:

I have looked at this not so long ago but it was not as straightforward as I'd hoped (due to the canvas being SVG).

However, I definitely (personally) support this request. hopefully others will pipe in and say similar to back this proposal.

If folks have ideas or can round this feature out, I am hopeful we can do something.

4 Likes

Would a longer and slower flash be perhaps better?

What I mean is that often I find myself searching for flashing nodes only to become aware of them just at the end of their flashing or not at all.

If a link-in node has to link-out nodes on the same flow tab, there is no flashing. This is also difficult to understand why there isn't any blinking.

Hence sometimes I wish that the flashing would be a little longer and less "aggressive", i.e., I find the blinking too fast (if that makes sense).

1 Like

What works best seems quite a personal thing, so that's definitely an argument for configurability. I personally don't mind the fast flashing; I just wish it would carry on until I can spot it! :smile:

I end up repeatedly pressing "F" followed by "f" to go backwards and forwards, looking at different areas of the screen each time until I spot it. Even then, it can take an embarrassingly long time!

1 Like

The flashing is too fast and too short lived to be useful to me.

If clicking on a search result switched to the relevant tab (as now) and selected the node we could open it's edit dialog simply by pressing return.

2 Likes

Exactly that - my fix too.

Of course the underlying issue (in this case) is that the node isn't moved to the center of the workspace. That works 90% of the time and it's only the edge nodes that cause the edge cases (pun intended!) in this case.

So perhaps an alternative is to improve the zoom-to-selection feature in this case?

Didn't think of that, also a good workaround.

Does someone have the time and skills to offer up a PR? It could then be tweaked to get something that would help more people if needed but at least would be a starting point if not a full solution.

I was going to try and do this but I put it aside till Node-red 4 was available.

Edit - Nope, not doing this.

Question is what is the agreed upon solution? I made a change to the crash test dummy which extended and slowed down the flashing. It was a single line change. To replicate that with a settings option would be trivial.

But I assume that's not the solution that would make most folks happy.

It could flash all day for me and i still dont see it.

I am holding out for something like the mouse finder

Cursor pointer mouse cursor GIF on GIFER - by Juran

or pulse effect

Nice but does it work with SVGs? I just gave it a whirl but didn't really do anything ...

high

... but works wonders with DIVs ...

2 Likes

:point_up: hence my earlier comment :point_down: :wink:

This one ↓ is SVG animations but adding those animation tags to all SVG elements is gonna add some weight to the SVG

unless they can be defined in a defs section and "applied" as required.

Ahhh ok! Time for SVG animations ... but should also work with CSS in a limited sort of way

I think it would become more clear if everything would be (momentarily) dimmed, except for the target node, not sure how 'costly' this would be in terms of render performance.

2 Likes

From an accessibility point of view, I think it needs to be something that draws the eye to the node. Dimming wouldn't help someone with something like retinitis pigmentosa as you'd still need to look all over the page to find the "highlighted" node -- it's a lack-of-peripheral-vision thing.

That's why something like @Steve-Mcl's growing circle might be good -- although possibly a shrinking circle might be more useful as you can follow it with the eye rather than having to infer where the growing circle originated.

When you click on a node in the search results, it switches to the relevant editor tab.

If it's a complicated flow, the actual node might be off screen, making any fancy visual effect less helpful.

If the node's x,y position is off screen, is it possible to change the view so the node is in the centre?

1 Like

I thought it does get pulled on screen.

You are right, it does.