| |
@@ -14,8 +14,8 @@
|
| |
<div class="container">
|
| |
<div class="row">
|
| |
<div class="col userdash-tabs">
|
| |
- <ul class="nav nav-tabs nav-sidetabs flex-column border-bottom-0">
|
| |
- <li class="pl-3 pb-3 font-weight-bold">
|
| |
+ <ul class="nav nav-tabs nav-sidetabs flex-column border-bottom-0" role="tablist">
|
| |
+ <li class="pl-3 pb-3 font-weight-bold" aria-hidden="true" >
|
| |
{{ g.fas_user.username | avatar(20) | safe }} {{g.fas_user.username}}
|
| |
</li>
|
| |
|
| |
@@ -26,14 +26,17 @@
|
| |
</form>
|
| |
</li>
|
| |
|
| |
- <li class="nav-item text-dark">
|
| |
+ <li class="nav-item text-dark" >
|
| |
<a class="nav-link d-flex align-items-center {{'active' if select=='projects'}}"
|
| |
- href="{{ url_for('ui_ns.index')}}">
|
| |
- <span>
|
| |
- <i class="fa {{projecticon()}} fa-fw text-muted"></i>
|
| |
+ href="{{ url_for('ui_ns.index')}}"
|
| |
+ aria-label="{{ userdash_counts['repos_length'] }} projects"
|
| |
+ role="tab"
|
| |
+ aria-selected="{{'true' if select=='projects' else 'false'}}">
|
| |
+ <span aria-hidden="true">
|
| |
+ <i class="fa {{projecticon()}} fa-fw text-muted" ></i>
|
| |
<span class="d-none d-md-inline">{{projectstring(plural=True)}} </span>
|
| |
</span>
|
| |
- <div class="ml-auto">
|
| |
+ <div class="ml-auto" aria-hidden="true">
|
| |
<span class="badge badge-secondary">
|
| |
{{ userdash_counts['repos_length'] }}
|
| |
</span>
|
| |
@@ -44,12 +47,15 @@
|
| |
{% if userdash_counts['forks_length'] > 0 %}
|
| |
<li class="nav-item text-dark">
|
| |
<a class="nav-link d-flex align-items-center {{'active' if select=='forks'}}"
|
| |
- href="{{ url_for('ui_ns.userdash_forks')}}">
|
| |
- <span>
|
| |
+ href="{{ url_for('ui_ns.userdash_forks')}}"
|
| |
+ aria-label="{{ userdash_counts['forks_length'] }} forks"
|
| |
+ role="tab"
|
| |
+ aria-selected="{{'true' if select=='forks' else 'false'}}">
|
| |
+ <span aria-hidden="true">
|
| |
<i class="fa fa-fw text-muted fa-code-fork"></i>
|
| |
<span class="d-none d-md-inline">Forks </span>
|
| |
</span>
|
| |
- <div class="ml-auto">
|
| |
+ <div class="ml-auto" aria-hidden="true">
|
| |
<span class="badge badge-secondary">
|
| |
{{ userdash_counts['forks_length'] }}
|
| |
</span>
|
| |
@@ -62,8 +68,11 @@
|
| |
|
| |
<li class="nav-item text-dark">
|
| |
<a class="nav-link d-flex align-items-center {{'active' if select=='activity'}}"
|
| |
- href="{{ url_for('ui_ns.userdash_activity')}}">
|
| |
- <span>
|
| |
+ href="{{ url_for('ui_ns.userdash_activity')}}"
|
| |
+ aria-label="Activity"
|
| |
+ role="tab"
|
| |
+ aria-selected="{{'true' if select=='activity' else 'false'}}">
|
| |
+ <span aria-hidden="true">
|
| |
<i class="fa fa-fw text-muted fa-users"></i>
|
| |
<span class="d-none d-md-inline">Activity </span>
|
| |
</span>
|
| |
@@ -73,12 +82,15 @@
|
| |
{% if userdash_counts['groups_length'] > 0 %}
|
| |
<li class="nav-item text-dark">
|
| |
<a class="nav-link d-flex align-items-center {{'active' if select=='groups'}}"
|
| |
- href="{{ url_for('ui_ns.userdash_groups')}}">
|
| |
- <span>
|
| |
+ href="{{ url_for('ui_ns.userdash_groups')}}"
|
| |
+ aria-label="{{ userdash_counts['groups_length'] }} groups"
|
| |
+ role="tab"
|
| |
+ aria-selected="{{'true' if select=='groups' else 'false'}}">
|
| |
+ <span aria-hidden="true">
|
| |
<i class="fa fa-fw text-muted fa-users"></i>
|
| |
<span class="d-none d-md-inline">Groups </span>
|
| |
</span>
|
| |
- <div class="ml-auto">
|
| |
+ <div class="ml-auto" aria-hidden="true">
|
| |
<span class="badge badge-secondary">
|
| |
{{ userdash_counts['groups_length'] }}
|
| |
</span>
|
| |
@@ -89,12 +101,15 @@
|
| |
|
| |
<li class="nav-item text-dark">
|
| |
<a class="nav-link d-flex align-items-center {{'active' if select=='watchlist'}}"
|
| |
- href="{{ url_for('ui_ns.userdash_watchlist')}}">
|
| |
- <span>
|
| |
+ href="{{ url_for('ui_ns.userdash_watchlist')}}"
|
| |
+ aria-label="watchlist: {{ userdash_counts['watchlist_length'] }} items"
|
| |
+ role="tab"
|
| |
+ aria-selected="{{'true' if select=='watchlist' else 'false'}}">
|
| |
+ <span aria-hidden="true">
|
| |
<i class="fa fa-fw text-muted fa-eye"></i>
|
| |
<span class="d-none d-md-inline">Watchlist </span>
|
| |
</span>
|
| |
- <div class="ml-auto">
|
| |
+ <div class="ml-auto" aria-hidden="true">
|
| |
<span class="badge badge-secondary">
|
| |
{{ userdash_counts['watchlist_length'] }}
|
| |
</span>
|
| |
Hm, I need some help understanding this:
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute says:
which applies to this line here, but how does the user access the menu (and its buttons) then?