Files
zulip/templates/zerver/navbar.html
Jeremy Bowman 1dae2af7b0 Fix ARIA markup for settings menu
The settings dropdown was marked as having the "menu" ARIA role,
but contained no items with the "menuitem" role.  I assigned this
role to the focusable link elements, and gave the intervening "li"
elements (and other "li" elements used as separators and such)
the "presentation" role to allow those to be gracefully ignored
when appropriate.  Some of the links previously had the "button"
role, which I think was a holdover from a previous UI layout.

Fixes #5000.
2017-05-30 23:08:12 -07:00

147 lines
7.6 KiB
HTML

<div class="header">
<nav class="header-main rightside-userlist" id="top_navbar">
<div class="column-left">
<a class="no-style brand" href="#">
<div class="nav-logo"></div>
<div class="company-name">
zulip
</div>
</a>
</div>
<div class="column-middle" id="navbar-middle">
<div class="column-middle-inner">
<div id="streamlist-toggle" {%if embedded %} style="visibility: hidden"{% endif %}>
<a href="#" id="streamlist-toggle-button" role="button"><i class="icon-vector-reorder"></i>
<span id="streamlist-toggle-unreadcount">0</span>
</a>
</div>
<div id="searchbox" class="searchbox-rightmargin">
<div id="tab_bar" class="notdisplayed">
</div>
<form id="searchbox_form" class="form-search navbar-search">
<div id="search_arrows" class="input-append">
<a class="search_icon" href="#search-operators" data-overlay-trigger="search-operators"><i class="icon-vector-search"></i></a>
<input class="search-query input-block-level" id="search_query" type="text" placeholder="{{ _('Search') }}"
autocomplete="off" aria-label="{{ _('Search') }}"/>
{# Start the button off disabled since there is no active search #}
<button class="btn search_button" type="button" id="search_exit" disabled="disabled"><i class="icon-vector-remove"></i></button>
</div>
</form>
</div>{# /searchbox #}
</div>
</div>
<div class="column-right">
<div id="userlist-toggle">
<a href="#" id="userlist-toggle-button" role="button"><i class="icon-vector-group"></i>
<span id="userlist-toggle-unreadcount">0</span>
</a>
</div>
<div id="navbar-buttons" {%if embedded %} style="visibility: hidden"{% endif %}>
<ul class="nav" role="navigation">
<li class="dropdown actual-dropdown-menu" id="gear-menu">
<a id="settings-dropdown" href="#" role="button" class="dropdown-toggle" data-target="nada" data-toggle="dropdown">
<i class="icon-vector-cog"></i><i class="icon-vector-caret-down settings-dropdown-caret"></i>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="settings-dropdown">
{#
It is quite ingrained in our frontend code that your Home
view is a Bootstrap Nav tab, even though we don't show the tab
anymore
#}
<li class="invisible" style="display:none;" role="presentation"><a href="#home" data-toggle="tab"></a></li>
<li title="{{ _('Manage streams') }}" role="presentation">
<a href="#streams" role="menuitem">
<i class="icon-vector-exchange"></i> {{ _('Manage streams') }}
</a>
</li>
<li title="{{ _('Settings') }}" role="presentation">
<a href="#settings" role="menuitem">
<i class="icon-vector-wrench"></i> {{ _('Settings') }}
</a>
</li>
<li title="{{ _('Manage organization') }}" class="admin-menu-item" role="presentation">
<a href="#organization" role="menuitem">
<i class="icon-vector-bolt"></i>
<span>{{ _('Manage organization') }}</span>
</a>
</li>
<li class="divider"></li>
<li title="{{ _('User documentation') }}" role="presentation">
<a href="/help" target="_blank" role="menuitem">
<i class="icon-vector-question-sign"></i> {{ _('User documentation') }}
</a>
</li>
<li title="{{ _('Keyboard shortcuts') }}" role="presentation">
<a tabindex="0" role="menuitem" data-overlay-trigger="keyboard-shortcuts">
<i class="icon-vector-keyboard"></i> {{ _('Keyboard shortcuts') }}
</a>
</li>
<li title="{{ _('Message formatting') }}" role="presentation">
<a tabindex="0" role="menuitem" data-overlay-trigger="markdown-help">
<i class="icon-vector-pencil"></i> {{ _('Message formatting') }}
</a>
</li>
<li title="{{ _('Search operators') }}" role="presentation">
<a tabindex="0" role="menuitem" data-overlay-trigger="search-operators">
<i class="icon-vector-search"></i> {{ _('Search operators') }}
</a>
</li>
<li class="divider" role="presentation"></li>
<li title="{{ _('Desktop & mobile apps') }}" role="presentation">
<a href="/apps" target="_blank" role="menuitem">
<i class="icon-vector-desktop"></i> {{ _('Desktop & mobile apps') }}
</a>
</li>
<li title="{{ _('Integrations') }}" role="presentation">
<a href="/integrations" target="_blank" role="menuitem">
<i class="icon-vector-github"></i> {{ _('Integrations') }}
</a>
</li>
<li title="{{ _('API documentation') }}" role="presentation">
<a href="/api" target="_blank" role="menuitem">
<i class="icon-vector-sitemap"></i> {{ _('API documentation') }}
</a>
</li>
<li class="divider" role="presentation"></li>
{% if enable_feedback %}
<li title="{{ _('Feedback') }}" role="presentation">
<a href="#feedback" class="feedback" role="menuitem">
<i class="icon-vector-comment"></i> {{ _('Feedback') }}
</a>
</li>
{% endif %}
{% if show_invites %}
<li title="{% trans %}Invite more users to Zulip.{% endtrans %}" role="presentation">
<a href="#invite" role="menuitem">
<i class="icon-vector-plus-sign"></i> {{ _('Invite users') }}
</a>
</li>
<li class="divider" role="presentation"></li>
{% endif %}
{% if show_webathena %}
<li title="{% trans %}Grant Zulip the Kerberos tickets needed to run your Zephyr mirror via Webathena{% endtrans %}" id="webathena_login_menu" role="presentation">
<a href="#webathena" class="webathena_login" role="menuitem">
<i class="icon-vector-bolt"></i>{{ _('Link with Webathena') }}
</a>
</li>
{% endif %}
<li title="{{ _('Log out') }}" role="presentation">
<a href="#logout" class="logout_button" role="menuitem">
<i class="icon-vector-off"></i> {{ _('Log out') }}
</a>
</li>
{% if show_debug %}
<li title="{{ _('Debug') }}" role="presentation">
<a href="#debug" data-toggle="tab" role="menuitem">
<i class="icon-vector-barcode"></i> {{ _('Debug') }}
</a>
</li>
{% endif %}
</ul>
</li>
</ul>
</div>
</div>
</nav>
</div>