[GeoMoose-users] How to add keyboard focus/highlight on focus to results

[Christopher Hughes]

This is partly an FYI and partly a question.

I'm trying to take the highlight on hover functionality in the tab and grid results and adapt it to keyboard navigation to better meet accessibility guidelines.

I was able to pretty easily add it to the tab results (by adding tabindex="0" to the parent element to make it focusable, and by copying the highlight/clearhighlight parameters, except using onfocusin/onfocusout instead of onmouseenter/onmouseleave).

The issue I'm having is when I'm trying to add it to the grid results, as it seems like the TableVirtuoso elements overwrite a lot of the row settings specified in the results templates. I was able to make the row elements focusable by adding tabindex={0} to the grid/index.js file before rebuilding the javascript, but onfocusin/onfocusout were still being overwritten.

As a bit of a hack, I was able to get it working by onfocusin/onfocusout to any elements within the grid rows that are focusable (like buttons and links), but that behaves slighly differently to the user and I'd like to avoid it.

I think what I have now is good enough, but I was curious if anyone had any thoughts on improvements.

Chris

--
Chris Hughes

GIS Analyst
Lincoln County GIS Department
880 NE 7th St. l Newport, OR 97365
Tel: (541) 574 1283

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/geomoose-users/attachments/20260414/c6730413/attachment-0001.htm>