Variant find doesn't work correctly in Chrome

[nichgray]

If you search for this variant (ctrl-f) in Firefox, it can be found:

But not in Chrome. Maybe something to do with the width of the spacing between text and variant text, where the highlighting appears?

[jduss4]

This appears to be the same behavior for all variants in chrome

[jduss4]

My first suggestion would be that we do not use a button there, but try using a span styled in the same way (could add hover CSS to use pointer finger mouse, etc) and see if chrome will search the text across a span instead of the button

[jduss4]

Good / bad news, it's definitely the button. Neither Firefox nor Chrome search across paragraphs, but Firefox goes across spans and buttons, while Chrome is only searching across the span.

[jduss4]

OKAY!!!!

So turning it into a span wasn't enough. It turns out there's also a CSS issue causing it not to find in page in chrome appropriately.

.inline_tei_rdg_drift has display: inline-block;. Removing that inline-block will make it searchable.

I am going to temporarily remove that from this particular span and go ahead and make the span more aria friendly, but we may want to consider if that class is important to apply to the button

[jduss4]

Okay just kidding, the span really needs that class, so instead I removed inline-block temporarily from the CSS:

.inline_tei_rdg_binding,
.inline_tei_rdg,
.inline_tei_rdg_drift,
.inline_tei_rdg_binding_display,
.inline_tei_rdg_display,
.inline_tei_rdg_drift_display {
  // TODO commenting out inline-block because it's preventing chrome from
  // searching across spans with one of these styles
  // display: inline-block;
  min-width: 1em;
  text-align: left;
}

[jduss4]

On @nichgray 's recommendation, changed to display: inline and it appears to be working!

“The display: inline-block Value Compared to display: inline , the major difference is that display: inline-block allows to set a width and height on the element. Also, with display: inline-block , the top and bottom margins/paddings are respected, but with display: inline they are not.”

[jduss4]

I had to add an extra class to the examples in the key in order to get them displaying correctly, but I think things look good. Adding role=button and aria-hidden values.