Make status interaction buttons accessible

changed the description

Looks good, there are some issues though:

If you open up reply and close it, the + remains there until you click elsewhere, same with emoji react
three-dot menu doesn't need + icon definitely, and neither does emoji react IMO.

added 2 commits

1d7f2759 - Optimize Reply badge position
55755a2b - Use :focus-visible instead of :focus for focus markers

resolved all threads

It does not really work on Safari (Dev builds work, but minified prod builds do not.) cause cssnano 3.10.0 has a bug that merges the :focus-visible selector with others, which causes Safari to drop the whole style. This bug is fixed in cssnano >= 4 .

cssnano 3.10.0 is introduced as a dep of css-loader@^0.28.0 . css-loader < 1 requires cssnano to be ^3.10.0 .

css-loader >= 1 removes the minimizer option, and no longer depends on cssnano.

Basically this means there is no fix besides updating css-loader and introducing other methods of minifying css.

tl;dr: we have got a dependency hell because the dependencies has not been updated for a long time.

Especially a lot of packages have dropped support for webpack 4. Maybe we should upgrade to 5.

I think I did try to migrate to it sometime ago I don't remember what was the result of it, but yeah it's something we need to do, along with vue3

added 1 commit

33a762cc - Fix styling on Safari

Compare with previous version

changed milestone to %Mentions/posts/notifications improvements

marked this merge request as draft

Marked as draft as it should not be merged unless we

remove the focus-visible commits
or, upgrade to a css minifier that does not merge focus-visible attributes

cause otherwise the display is horrible on safari.

personally i wouldn't care about safari too much but sure. it's been working more or less ok on sgsgb in chrome. a little annoying that icon is incorrect right after clicking/tapping icon but it's a minor thing.