Kibana: [Accessibility] Visualize negated filters other than with color

[timroes]

We currently have an a11y issue with the filter bar, since we highlight negated filters only via their background color. This is bad for people with several forms of color blindness. So I made three suggestions how to express the negation not only by color.:

We could either prefix a "NOT" (1st and 3rd filter), prefix a minus "-" (2nd and 4th) or strike through the text (last filter). I put the ones that prefix something to the label one time with the pin icon and one time without it for context. I didn't want to add a second icon to the filter pile, since it looked terrible with the pin icon together.

I would like you to vote for which one you prefer most, by +1 the appropriate comment below or add to the discussion with other opinions :-)

This violates WCAG rule 1.4.1.

[timroes]

Prefix with "NOT"

[timroes]

Prefix with minus "-"

[timroes]

Strike through the filter value

[timroes]

My personal opinions on all (do not read this if you are easily influenceable ;D):

Prefix with minus: not easy to see, and if you see it maybe not clear what it means; but in alignment with Query String Query syntax

Strike through: Text is readable very hard with a strike-through; we need another textual representation for screen readers (since this is also again just visual styling)

Prefix with NOT: Adds the most width to each filter pile, but very clear what it means and works also for screen readers

[cjcenizal]

@elastic/kibana-discovery What's the Kuery syntax for this? (I think it's "NOT" but I'm not sure). I think it makes sense to try to adopt a similar syntax as part of this change so that users don't see the UI changing too much as we move to Kuery.

[lukasolson]

What's the Kuery syntax for this?

There are two ways you can do this. The first (functional syntax) is NOT(), and the second (operator syntax) is to prefix with an exclamation point !.

not(response:200)
!response:200

See https://www.elastic.co/guide/en/kibana/master/kuery-query.html.