Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Post actions on articles list are difficult to trigger on touch screen devices #309

Closed
Crocmagnon opened this issue May 14, 2020 · 10 comments
Closed
Assignees
Milestone

Comments

@Crocmagnon
Copy link

@Crocmagnon Crocmagnon commented May 14, 2020

Describe the bug

Accessing post modification buttons on an touch screen is difficult because they only appear on hover.
image

Steps to reproduce (if necessary)

Steps to reproduce the behavior:

  1. Go to the articles list
  2. Try to click on a button on a device with a touch screen and no mouse pointer
  3. It's very hard, you need to think about where the button is going to be and try to tap it

Expected behavior

The buttons should always be visible (maybe dimmer) or in a menu that we can click on safely without triggering an action.

Application configuration

  • Single mode or Multi-user mode? Any
  • Database? [mysql/sqlite] Any
  • Open registration? [yes/no] Any
  • Federation enabled? [yes/no] Any

Version or last commit: v0.12.0

@thebaer
Copy link
Contributor

@thebaer thebaer commented May 14, 2020

Thanks for the report, @Crocmagnon! This has been brought up before in #94. But that report also mentions a few other accessibility issues, so I'll leave this open to address the mobile problem in particular. I'm currently working around other aspects of the menu design / UX right now, so I can address this.

@thebaer thebaer added this to the 0.13 milestone May 14, 2020
@thebaer thebaer self-assigned this May 14, 2020
@Crocmagnon
Copy link
Author

@Crocmagnon Crocmagnon commented May 14, 2020

Thanks for your response! I would love to see that coming to a future release 😊

@Crocmagnon
Copy link
Author

@Crocmagnon Crocmagnon commented May 15, 2020

I just realized that in fact the Drafts UI works fine, if it helps :)

@thebaer
Copy link
Contributor

@thebaer thebaer commented Aug 3, 2020

From #359 (comment) by @wiwie:

My proposal is that the links should always be shown on mobile browsers.

I think this is a good, simple way to fix this.

@Crocmagnon
Copy link
Author

@Crocmagnon Crocmagnon commented Aug 3, 2020

Why not every browser? So that users have the same UI everywhere?

And just out of curiosity, is it even possible to detect Safari on an iPad among other user agents ? I thought Apple modified it to send the same as safari on desktop so users would be served with desktop sites and not mobile ones.

@wiwie
Copy link

@wiwie wiwie commented Aug 3, 2020

@Crocmagnon I guess the original intention of hiding the action links when not used was to keep the UI as lightweight as possible. While I actually also do like that approach and the minimal resulting ui, I'm also inclined to agree with you to say that the current approach of hiding the action links is probably a bad idea in any browser from a usability/accessibility perspective. For example, are screen readers able to read those links? If not, it would basically exclude blind people from using writefreely.

An approach to keep the UI minimal while still being accessible could be to add a small collapsible menu (eg drop down). I would think that if implemented correctly these can be interpreted by screen readers also.

@DavePolaschek
Copy link

@DavePolaschek DavePolaschek commented Aug 12, 2020

Note that Safari on iPad masquerades as safari on Mac OS, so for at least that one mobile browser, "is this a mobile browser?" is likely to fail.

I tried using the classic editor for write.as, mostly to have easier "set a title" functionality, but there were a lot of things failing there when trying to use if from safari on an iPad, so I turned that off.

Probably should be a new issue, but there’s nothing in the tutorials about how to set a post title without using the "classic editor."

@cblte
Copy link

@cblte cblte commented Sep 25, 2020

As a quick fix: you could use some css styling to have the links always shown.
Just add

.hidden {
  opacity: 1;
}

anywhere to your custom css.

@DavePolaschek
Copy link

@DavePolaschek DavePolaschek commented Sep 26, 2020

That works, thanks!

Interesting thing from a "fixing the bug" POV is that the commands don’t seem to be there when looking at an individual post, but they are there when looking at the whole list on the blog. That’s almost the inverse of what I was expecting. When I want to interact with a single post, I go to that post, rather than going to its parent blog.

thebaer added a commit that referenced this issue Apr 6, 2021
This maintains previous show-on-hover effect for post actions on blog
index, but always shows the actions when on a mobile device.

Fixes #309
@thebaer thebaer closed this Apr 7, 2021
@thebaer
Copy link
Contributor

@thebaer thebaer commented Apr 7, 2021

Mistakenly closed this with a different commit. #449 will close this, once merged.

@thebaer thebaer reopened this Apr 7, 2021
@thebaer thebaer closed this in #449 Apr 19, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Linked pull requests

Successfully merging a pull request may close this issue.

5 participants