[touchscreen] Favourite button keeps active after unfav a status

[umonaca]

I am trying to fix the code so that it can keep up with changes from Mastodon upstream. However, there are some difficult problems that I don't know how to resolve. This is one of the weird bugs.

Steps to reproduce

Click the star button to favourite. Then click it again to deactive. It will remain as "active", until the user click anywhere in the column area.

Reproducible on Firefox and Chrome

[umonaca]

Solved by removing .icon-button:focus from 3-highlights.css and :focus from the favourite section of 6-actions.css.

[trwnh]

should this be reopened? are changes needed?

[umonaca]

I think it should be reopened. I get my own version working on my mobile phone (Chrome) with some of the :focus in actions.css removed and :hover refactored with some Stack Overflow copy-and-paste. Haven't tested with your recent changes yet.

[trwnh]

oh, i think i understand this now -- this is actually not a bug but a feature. the icon is still coloured because the element is in focus, so for example, pressing enter will re-favourite the status. it is only after clicking away that the icon will lose focus.

[umonaca]

Emmm...The problem is that on a touch device the button does not lose focus at all when user is ~~touching~~ dragging (I changed the wording here since "touch" will expand a status to the detailed status page, but "drag" will not) anywhere except in the area of the status. For example, if user unfavourited toot A, they have to ~~touch~~ drag within the area of the toot A, otherwise it will not lose focus.

The touch experience on Chrome DevTools Device Mode is exactly the same as on a real touch device with Chrome installed. But not Firefox. Hope that this message will be helpful.

My Stack Overflow copy-and-paste which worked for me looks like the following: Yeah I know it looks ugly because I don't write CSS very often.

/* favourites */
/*.status__action-bar-button.icon-button.star-icon:hover,*/
.status__action-bar-button.icon-button.star-icon:active,
.status__action-bar-button.icon-button.star-icon.active,
/*.status__action-bar-button.icon-button.star-icon:focus,*/
.detailed-status__action-bar .detailed-status__button .star-icon.icon-button:active,
.detailed-status__action-bar .detailed-status__button .star-icon.icon-button.active,
/*.detailed-status__action-bar .detailed-status__button .star-icon.icon-button:focus,*/
.notification__favourite-icon-wrapper .star-icon
{color: #f90;}

@media (hover: hover) {
    .status__action-bar-button.icon-button.star-icon:hover { color: #f90; }
    .detailed-status__action-bar .detailed-status__button .star-icon.icon-button:hover { color: #f90; }
}

/* bookmark */
.status__action-bar-button.icon-button.bookmark-icon.active,
/*.status__action-bar-button.icon-button.bookmark-icon:focus,*/
.detailed-status__action-bar .detailed-status__button .bookmark-icon.icon-button.active,
/*.detailed-status__action-bar .detailed-status__button .bookmark-icon.icon-button:focus,*/
.notification__favourite-icon-wrapper .bookmark-icon
{color: #0bf;}

@media (hover: hover) {
    .status__action-bar-button.icon-button.bookmark-icon:hover { color: #0bf; }
    .detailed-status__action-bar .detailed-status__button .bookmark-icon.icon-button:hover { color: #0bf; }
}

/* menu */
.status__action-bar-dropdown .icon-button:hover,
.status__action-bar-dropdown .icon-button:active,
.status__action-bar-dropdown .icon-button.active,
.status__action-bar-dropdown .icon-button.focus,
.detailed-status__action-bar-dropdown .icon-button:hover,
.detailed-status__action-bar-dropdown .icon-button:active,
.detailed-status__action-bar-dropdown .icon-button.active,
.detailed-status__action-bar-dropdown .icon-button:focus
{color: #90f;}

/* share */
.icon-button:hover .fa-share-alt
{color: #f09;}

/* boosts */
.notification__message .fa.fa-retweet,
.icon-button:hover .fa-retweet
{color: #0d9;}

/* recolor boosts (preserve animation, unthemeable default state */
/*
button.icon-button:hover i.fa-retweet,
.no-reduce-motion button.icon-button.active i.fa-retweet
{
    filter: sepia(100%)
        hue-rotate(120deg)
        saturate(700%)
        brightness(120%)
        drop-shadow(0px 1px 0px rgba(0,0,0,0.6))
}
*/

/* fully recolor boosts (while breaking animation)  */ 
/*button.icon-button:hover i.fa-retweet,*/
button.icon-button.active i.fa-retweet
{background: #0d9 !important;}

.no-reduce-motion button.icon-button i.fa-retweet,
    button.icon-button i.fa-retweet,
        button.icon-button:hover i.fa-retweet,
        button.icon-button.active i.fa-retweet
{
background: var(--textMuted);
mask: THE SVG IN YOUR CODE (too long not posted here)
}

@media (hover: hover) {
    button.icon-button:hover i.fa-retweet{background: #0d9 !important;}
}