Skip to content

Fix #1177: Usability problem with sidebar on mobile devices #1182

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.

Sign up for GitHub

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

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+24 −6
Open

Fix #1177: Usability problem with sidebar on mobile devices #1182

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
56fe085
Mobile Menu - Added close btn & made 100% width
nienn Aug 3, 2021
6296159
Add compiled css files
nienn Aug 3, 2021
282d970
Adds aria-label and extra btn padding
nienn Aug 3, 2021
268a893
Fix build
nienn Aug 3, 2021
16f6569
Adds aria-label to the hamburger btn too
nienn Aug 3, 2021
7dc4522
Update sphinx_rtd_theme/layout.html
nienn Aug 4, 2021
e344c58
Added translations to aria labels
nienn Aug 4, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions sphinx_rtd_theme/layout.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,6 +170,12 @@

{%- block navigation %}
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="{{ _('Main') }}">

{#- MOBILE NAV, TRIGGLES SIDE NAV ON TOGGLE #}
<div class="wy-close-top">
<i data-toggle="wy-nav-top" class="fa fa-close"></i>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a way to make this more accessible? I wasn't really sure what hitting the X would do when I tried to use it -- perhaps even some text along with the X like Close Sidebar X? I'm guessing there's also an aria-label we should be using here for screen readers?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like a close button is the example in these docs, so I think we should definitely include one: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute#examples

Copy link
Collaborator

@agjohnson agjohnson Aug 3, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

aria-label is the best solution here, yeah. Verbose text would fill out too much space and would need to be translated, which introduces other horizontal spacing concerns.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do wonder about something a bit more explicit that it's closing the menu, but I agree that translation point is a good one. Do the aria labels also need to be translated?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, aria elements should also be translated. The theme actually has pretty active translations, so localization is definitely a bit more effective here.

</div>

{%- block menu %}
{%- set toctree = toctree(maxdepth=theme_navigation_depth|int,
collapse=theme_collapse_navigation|tobool,
Expand Down
2 changes: 1 addition & 1 deletion sphinx_rtd_theme/static/css/badge_only.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion sphinx_rtd_theme/static/css/theme.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/sass/_theme_badge.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@

+media($tablet)
.rst-versions
width: 85%
width: 100%
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

100% width on the menu and content is way better 👍

display: none
&.shift
display: block
16 changes: 14 additions & 2 deletions src/sass/_theme_layout.sass
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,18 @@ html
cursor: pointer
padding-top: inherit

.wy-close-top
display: none
margin: 0 0 0 -($base-line-height / 2)
text-align: right
i
font-size: 25px
line-height: 1
padding: 0 20px
cursor: pointer
&:hover
color: #fff

.wy-nav-content-wrap
margin-left: $nav-desktop-width
background: $section-background-color
Expand Down Expand Up @@ -384,15 +396,15 @@ footer
+media($tablet)
.wy-body-for-nav
background: $section-background-color
.wy-nav-top
.wy-nav-top, .wy-close-top
display: block
.wy-nav-side
@if $nav-desktop-position == left
left: -$nav-desktop-width
@else
right: -$nav-desktop-width
&.shift
width: 85%
width: 100%
left: 0
.wy-side-scroll
width: auto
Expand Down