"Responsive buttons" should have tooltips and use consistent CSS techniques

[afercia]

There are a few buttons that change depending on the viewport width. Let's call them "responsive buttons" for the sake of clarity.

In the desktop view, these buttons don't have tooltips. That's perfectly OK because there's already some visible text. However, in the responsive view the responsive buttons text gets hidden (using different CSS techniques) and they still have no tooltips.

Worth reminding any UI control whose meaning is communicated by only an icon should at least have a tooltip. Even on small screens.

Additionally, the "Upload" button text (see screenshot below) gets hidden setting font-size: 0;. I'd recommend to change this since there's no guarantee that assistive technologies and other software will consider such text "visible", they could completely ignore it.

The "Save Draft" button sets a smaller width to hide the text, it doesn't use font-size: 0;. For consistency, I'd suggest to improve consistency and use a unique pattern.

/cc @jasmussen

[karmatosed]

Can we just in smaller screens adapt with text? I'd rather some consistency here. Are tooltips useful on mobile? That's an honest question as unsure they are.

[afercia]

Just to mention one good reason, see in the WebAIM survey why we shouldn't assume mobile devices are only used with touch: https://webaim.org/projects/screenreadersurvey7/#mobilekeyboard

[jasmussen]

I can appreciate the desire for creating more general and overarching tickets, but I'm personally so swamped these days that unless a ticket is razor focused on a specific actionable task, I'm simply less likely to assign myself the task. This often means the ticket is left for other volunteers, which might not give the actual task the attention it might deserve.

In this case, the upload button is a non issue as it was fixed separately. The responsive behavior was, as far as I can tell, a bug:

This leaves the Save button as the — as far as I can tell — only "responsive button" we have.

I wouldn't object to adding a tooltip to the "Save Draft" button on mobile breakpoints, as I suppose you can either just want to write in a really small viewport on the desktop, or on mobile press and hold a button then drag out, to reveal the tooltip (I think that works? I know it does for native apps). But given that the long term hope for the save draft button is for it to not be necessary at all, and simply an autosave indicator, I would suggest this issue is somewhat lower in priority.

[afercia]

Glad to hear the font-size: 0; was changed. I guess this can be closed then. I'd just suggest to consider, as future improvement, something different for icon-only controls on mobile. Just as an example, many mobile UI use visible text labels to disambiguate most (not all) of the icons. Example: