A11y: Labels and Contrast on Search and Message fields

[daniellekirkwood]

Your use case

What would you like to do?

A11y guidelines say that you need to have a label on all fields. Our designs do not have labels on some input fields (mostly Search and Send Message areas).

• Having discussed this with the designers, they do not want to change the designs to introduce fields (good).
• Having discussed this with an external 3rd party a11y company, it's generally accepted to not have field labels on these sorts of input fields so long as the contrast passes muster

Why would you like to do it?

For better accessibility of our web products

How would you like to achieve it?

Update each field in the web app that does not have a label

Tasks

Beta Give feedback

1. Global search in the room list (will be updated as part of the Room List epic) https://github.com/element-hq/wat-internal/issues/204
2. Message search in the right panel (will be updated as part of the Room Header and Right panel epic) https://github.com/element-hq/wat-internal/issues/224
3. Search field in spotlight search (will be updated as part of the room header and right panel epic) https://github.com/element-hq/wat-internal/issues/224
4. The current composer
5. The RTE composer
6. Search in the Forward dialog
7. Search in Space hierachy (will be updated as part of the Spaces & Home epic) https://github.com/element-hq/wat-internal/issues/205
8. Search in the Emoji picker

[daniellekirkwood]

• Global search in the room list (will be updated as part of the Room List epic)

Nothing to do right now - @gaelledel please note that this is a requirement on the room list designs :)

• Message search in the right panel (will be updated as part of the Room Header and Right panel epic)

@americanrefugee please update this in Figma so that the Compound tokens are correct (as discussed in the room) :)

• Search field in spotlight search (will be updated as part of the room header and right panel epic)

@americanrefugee please update this in Figma so that the Compound tokens are correct (as discussed in the room) :)

• The current composer

@t3chguy reports this is already secondary so this should be covered, can we confirm?

• The RTE composer

Needs action

• Search in the Forward dialog

Needs action

• Search in Space hierachy (will be updated as part of the Spaces & Home epic)

Needs action

• Search in the Emoji picker

Needs action

[t3chguy]

The RTE composer

This explicitly currently uses tertiary content, will update to--cpd-color-text-placeholder so it'll pick up the Figma fix once that is done

Search in the Forward dialog

This uses --cpd-color-text-placeholder already so will be fixed when Figma/CPD is updated

Search in Space hierachy (will be updated as part of the Spaces & Home epic)

Ditto

Search in the Emoji picker

This currently specifies no colour so the browser chooses rgb(117,117,117) - will update to --cpd-color-text-placeholder so that it'll pick up the Figma fix

[americanrefugee]

@daniellekirkwood @t3chguy

In general: We should not use --cpd-color-text-placeholder anymore. Instead, we should always use --cpd-color-text-secondary

Message search in the right panel (will be updated as part of the Room Header and Right panel epic)

• This was updated a while ago. Use text-secondary color.

Search field in spotlight search (will be updated as part of the room header and right panel epic)

• Spotlight search is still from the old/legacy design, and we won't have a new design until we tackle Search globally. However, I have a temporary solution...
  • V1 uses the current window styling as-is. But I added a search icon and the placeholder text has been updated to color-text-secondary.
  • V2 is the same as above, but the overlay frame has been updated with the new styling and a close button.

Lemme know if you have any questions or concerns.

[t3chguy]

In general: We should not use --cpd-color-text-placeholder anymore. Instead, we should always use --cpd-color-text-secondary

Why is that? Where does it say that? That goes against tokens being semantic. The token should be removed outright if it is not to be used, or at least be explicitly marked as deprecated otherwise it'll continue to be used. Even Compound is still using it for its placeholders.

[americanrefugee]

Why is that? Where does it say that? That goes against tokens being semantic. The token should be removed outright if it is not to be used, or at least be explicitly marked as deprecated otherwise it'll continue to be used. Even Compound is still using it for its placeholders.

Because that color token fails all the accessibility tests. I've replaced all the instances of text-color-placeholder in the Compound files with text-color-secondary (I think).

But perhaps we should discuss further before I actually remove text-color-placeholder from the Compound Styles doc? I don't wanna mess anything up...

[t3chguy]

Great, if we can remove it and remove the confusion and just use secondary then that's fine too.