DRAFT use images from spec package for SAS verification

[andybalaam]

DEPENDS ON A TEST VERSION OF THE SPEC PACKAGE.

This PR is intended to demonstrate how MSC4347 could work in Element Web and hopefully qualify as an implementation of that MSC.

It depends on a temporary version of the @matrix-org/spec package modified as proposed in MSC3447 and uses images from that package to render emoji for SAS verification, instead of using an emoji font to draw the characters.

[t3chguy]

I think this would need a solution to the dark-on-dark problem, as in a dark theme certain icons (e.g. spanner) may fail contrast accessibility. Our custom build of Twemoji deals with this already.

[andybalaam]

I think this would need a solution to the dark-on-dark problem, as in a dark theme certain icons (e.g. spanner) may fail contrast accessibility. Our custom build of Twemoji deals with this already.

Very good point. What solution would you propose?

[t3chguy]

iirc M did some discovery in the area and a light outline was a common solution across other apps. That should really be done on the source side rather than trying to special-case them here given the icons could change within the spec and the outlines become mismatched from the appropriate icons otherwise

[andybalaam]

iirc M did some discovery in the area and a light outline was a common solution across other apps. That should really be done on the source side rather than trying to special-case them here given the icons could change within the spec and the outlines become mismatched from the appropriate icons otherwise

So modify the images themselves to include a light outline?

So very approximately something like this?

[t3chguy]

I think so, but perhaps Design would know best

[andybalaam]

Current Element Web doesn't appear to do anything special to make emoji like the hat below more visible:

but I definitely think we should address this in MSC4347

[t3chguy]

I guess Hat didn't make it into Matthew's firing line yet, though he did not go for the solution of a white outline instead defaulted to using monochrome emoji for glyphs which were hard to see on dark

[andybalaam]

@ara4n (context: I am prototyping MSC4347, hard-coding the same exact emoji images for verification) I am thinking the best solution to support dark themes would be to modify the actual SVGs to add a white circle behind each image, making the images usable on all themes, and identical on all themes. I've asked for input from design in case I'm missing something, but do you have comments about whether that is a sensible approach?

[andybalaam]

Mocked up example of what I am thinking of:

[andybalaam]

OK, after chatting with @aaronraimist I decided to prototype white circles incorporated into the images. I've updated the description of this item with a preview. The images are processed via a script in matrix-org/matrix-spec#2273 and pulled from the package as before.