125106f9c0
While Foundations's off-canvas menu allows us to forget about writing CSS, it also leads to complicated HTML. Ideally Foundation would provide an easy way to simplify what we're doing, but I haven't found anything in the documentation. We could simplify the HTML a bit more if we used a CSS grid layout instead of a flex one, but old browsers have better support for the latter. Note we're using `breakpoint(medium)` so we can group the CSS for small screens and follow SCSS-Lint rules at the same time. Also note behavior of the main area when the menu appears on small screens is slightly different: it doesn't move the main content to the right. I've done it this way so we don't have any overflow issues, unlike the previous version. There's a small issue using a label and a checkbox to enable/disable the menu: sighted keyboard users with a small screen might not be able to enable the menu. So we're adding the `:focus-within` pseudoclass so the menu can be normally navigated using the keyboard. Even if old browsers don't support this pseudoclass, we believe the probability of a sighted user using a small screen, navigating with the keyboard and using an old browser is really low, particularly in the admin area. We're also adding the `aria-hidden` attribute on the label, since the menu is never hidden for screen readers and so having a control to show it could be confusing. Since the label is not focusable, we're complying with the fourth ARIA rule: > Do not use role="presentation" or aria-hidden="true" on a focusable > element . > > Using either of these on a focusable element will result in some users > focusing on 'nothing'.
54 lines
1.7 KiB
Plaintext
54 lines
1.7 KiB
Plaintext
<ul id="moderation_menu">
|
|
<li>
|
|
<%= link_to t("moderation.dashboard.index.title"), moderation_root_path %>
|
|
</li>
|
|
|
|
<% if feature?(:proposals) %>
|
|
<li <%= "class=is-active" if controller_name == "proposals" %>>
|
|
<%= link_to moderation_proposals_path do %>
|
|
<span class="icon-proposals"></span>
|
|
<%= t("moderation.menu.proposals") %>
|
|
<% end %>
|
|
</li>
|
|
|
|
<li <%= "class=is-active" if controller_name == "proposal_notifications" %>>
|
|
<%= link_to moderation_proposal_notifications_path do %>
|
|
<span class="icon-proposals"></span>
|
|
<%= t("moderation.menu.proposal_notifications") %>
|
|
<% end %>
|
|
</li>
|
|
<% end %>
|
|
|
|
<% if feature?(:debates) %>
|
|
<li <%= "class=is-active" if controller_name == "debates" %>>
|
|
<%= link_to moderation_debates_path do %>
|
|
<span class="icon-debates"></span>
|
|
<%= t("moderation.menu.flagged_debates") %>
|
|
<% end %>
|
|
</li>
|
|
<% end %>
|
|
|
|
<% if feature?(:budgets) %>
|
|
<li <%= "class=is-active" if controller_name == "investments" %>>
|
|
<%= link_to moderation_budget_investments_path do %>
|
|
<span class="icon-budget"></span>
|
|
<%= t("moderation.menu.flagged_investments") %>
|
|
<% end %>
|
|
</li>
|
|
<% end %>
|
|
|
|
<li <%= "class=is-active" if controller_name == "comments" %>>
|
|
<%= link_to moderation_comments_path do %>
|
|
<span class="icon-comments"></span>
|
|
<%= t("moderation.menu.flagged_comments") %>
|
|
<% end %>
|
|
</li>
|
|
|
|
<li <%= "class=is-active" if controller_name == "users" %>>
|
|
<%= link_to moderation_users_path do %>
|
|
<span class="icon-user"></span>
|
|
<%= t("moderation.menu.users") %>
|
|
<% end %>
|
|
</li>
|
|
</ul>
|