Lack of Screen Options toggle on mobile prevents accessing features

[johnbillion]

I recently needed to disable comments on a particular post while away from my laptop. I opened the post editing screen on my mobile device but the Discussion meta box was hidden and there is no way to access Screen Options on mobile to show/hide meta boxes. This meant I was unable to disable comments on the post from my mobile device.

I'd like to propose that when the Screen Options toggle is hidden to to a narrow viewport width, that all meta boxes are shown but the "hidden" ones are simply collapsed, thus making them accessible on mobile devices.

[afercia]

Adding the accessibility focus because this was sometimes reported by assistive technologies users. As an edge case, screen reader users might have their browser window not-maximed and they could simply be not aware that under a certain viewport width some controls are not available.
Under 782px, Help and Screen options are hidden with display: none thus they're completely hidden to screen readers. For more general UI/UX/accessibility considerations about the Help and Screen Options tabs, see #21583.

[afercia]

While meta boxes in the post edit screen will very likely see big news with Gutenberg, the access to the Screen Options and Help tabs across all the admin is a concern that should be addressed. Moving to future release as per today's accessibility bug scrub.

[chetan200891]

Creted patch to enable Screen Options on mobile.

[chetan200891]

I have added patch 40985.diff which enables Screen Options on mobile.

[johnbillion]

Thanks for the patch, @chetan200891. Can you provide a screenshot of the change on a mobile device?

[chetan200891]

Screenshot: Screen options off

[chetan200891]

Screenshot: Screen options on

[chetan200891]

@johnbillion I have attached screenshot from my iPhone 6S Plus. Please have a look!

[afercia]

Discussed during today's accessibility bug-scrub, agreed the Help content would need some adjustments for a better responsive layout.

[melchoyce]

Just tested, looks pretty okay. If the heading is long, it wraps nicely. Some of the longer Screen Options panels look a little wonky (see posts.png​, where "Pagination" looks closer to the checkboxes above it than it does to the setting below it). That said, we could always commit what we have and iterate towards better mobile styles.

@afercia Were you also looking for design input on how to include the Help menu? If so, can you break that out into a new ticket?

[afercia]

Created #43221 for the Help toggle.

[afercia]

In 42644:

Administration: Make the Screen Options available on small screens.

Previously, the Screen Options toggle and the related panel content
were hidden on small screens, preventing access to important settings,
including the ability to toggle the meta boxes visibility.

Props chetan200891.
Fixes #40985.

[SergeyBiryukov]

#36123 was marked as a duplicate.