Skip to content

Improve accessibility of account management #1313

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

Merged
flooguu merged 3 commits into from
Sep 8, 2026
Merged

Improve accessibility of account management #1313

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d6f8411
WIP on accessibility of account management
flooguu Aug 14, 2026
751a000
tiny fix in translations
flooguu Sep 2, 2026
47aff51
Revert "tiny fix in translations"
flooguu Sep 8, 2026
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
5 changes: 5 additions & 0 deletions froide/account/templates/account/includes/sidebar_menu_item.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<li class="nav-item">
<a {% if menu != item_key %}href="{% url item_url %}"{% endif %}
class="nav-link{% if menu == item_key %} active{% endif %}"
{% if menu == item_key %}aria-current="page"{% endif %}>{{ item_label }}</a>
</li>
44 changes: 23 additions & 21 deletions froide/account/templates/account/settings_base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,28 +7,30 @@
{% endblock breadcrumbs %}
{% block app_container %}
<div class="row">
<div class="col-md-4">
<div class="d-grid">
<a href="{% url 'account-show' %}" class="btn btn-secondary mb-3">{% trans "back to your account" %}</a>
<nav class="col-md-4" aria-label="{% trans "Account Settings" %}">
<div class="sticky-top sticky-top-offset">
<div class="d-grid">
<a href="{% url 'account-show' %}" class="btn btn-secondary mb-3">{% trans "back to your account" %}</a>
</div>
<div class="list-group mb-3">
<a href="#general" class="list-group-item list-group-item-action">{% trans "General settings" %}</a>
{% if not request.user.private %}
<a href="#profile" class="list-group-item list-group-item-action">{% trans "Public profile" %}</a>
{% endif %}
<a href="#change-password-now"
class="list-group-item list-group-item-action">{% trans "Change password" %}</a>
<a href="#mfa" class="list-group-item list-group-item-action">{% trans "Setup two-factor login" %}</a>
{% block post_password_menu %}
{% endblock post_password_menu %}
<a href="#proofs" class="list-group-item list-group-item-action">{% trans "Proofs" %}</a>
<a href="#apps" class="list-group-item list-group-item-action">{% trans "External Apps" %}</a>
<a href="#export" class="list-group-item list-group-item-action">{% trans "Data export" %}</a>
<a href="#delete-account-section"
class="list-group-item list-group-item-action">{% trans "Account deletion" %}</a>
<a href="#developer" class="list-group-item list-group-item-action">{% trans "Developer" %}</a>
</div>
</div>
<div class="list-group sticky-top mb-3">
<a href="#general" class="list-group-item list-group-item-action">{% trans "General settings" %}</a>
{% if not request.user.private %}
<a href="#profile" class="list-group-item list-group-item-action">{% trans "Public profile" %}</a>
{% endif %}
<a href="#change-password-now"
class="list-group-item list-group-item-action">{% trans "Change password" %}</a>
<a href="#mfa" class="list-group-item list-group-item-action">{% trans "Setup two-factor login" %}</a>
{% block post_password_menu %}
{% endblock post_password_menu %}
<a href="#proofs" class="list-group-item list-group-item-action">{% trans "Proofs" %}</a>
<a href="#apps" class="list-group-item list-group-item-action">{% trans "External Apps" %}</a>
<a href="#export" class="list-group-item list-group-item-action">{% trans "Data export" %}</a>
<a href="#delete-account-section"
class="list-group-item list-group-item-action">{% trans "Account deletion" %}</a>
<a href="#developer" class="list-group-item list-group-item-action">{% trans "Developer" %}</a>
</div>
</div>
</nav>
<div class="col-md-8">
{% block settings_body %}
{% endblock settings_body %}
Expand Down
43 changes: 12 additions & 31 deletions froide/account/templates/account/show.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,39 +4,20 @@
{% block app_body %}
<div class="container-fluid mt-2">
<div class="row">
<nav class="col-lg-3 col-xl-2">
<ul class="nav nav-pills mt-3 flex-column flex-md-row flex-lg-column"
role="tablist">
<li class="nav-item">
<a href="{% if menu != 'requests' %}{% url 'account-show' %}{% endif %}"
class="nav-link{% if menu == 'requests' %} active{% endif %}">
{% trans "Your requests" %}
</a>
</li>
<nav class="col-lg-3 col-xl-2" aria-label="{% trans "Your account" %}">
<ul class="nav nav-pills mt-3 flex-column flex-md-row flex-lg-column">
{% trans "Your requests" as label %}
{% include "account/includes/sidebar_menu_item.html" with item_key="requests" item_url="account-show" item_label=label %}
{% if request.user.trusted %}
<li class="nav-item">
<a href="{% if menu != 'projects' %}{% url 'account-projects' %}{% endif %}"
class="nav-link{% if menu == 'projects' %} active{% endif %}">
{% trans "Your projects" %}
</a>
</li>
{% trans "Your projects" as label %}
{% include "account/includes/sidebar_menu_item.html" with item_key="projects" item_url="account-projects" item_label=label %}
{% endif %}
<li class="nav-item">
<a href="{% if menu != 'drafts' %}{% url 'account-drafts' %}{% endif %}"
class="nav-link{% if menu == 'drafts' %} active{% endif %}">{% trans "Request drafts" %}</a>
</li>
<li class="nav-item">
<a href="{% if menu != 'following' %}{% url 'account-following' %}{% endif %}"
class="nav-link{% if menu == 'following' %} active{% endif %}">
{% trans "Followed requests" %}
</a>
</li>
<li class="nav-item">
<a href="{% if menu != 'subscriptions' %}{% url 'account-subscriptions' %}{% endif %}"
class="nav-link{% if menu == 'subscriptions' %} active{% endif %}">
{% trans "Subscriptions" %}
</a>
</li>
{% trans "Request drafts" as label %}
{% include "account/includes/sidebar_menu_item.html" with item_key="drafts" item_url="account-drafts" item_label=label %}
{% trans "Followed requests" as label %}
{% include "account/includes/sidebar_menu_item.html" with item_key="following" item_url="account-following" item_label=label %}
{% trans "Subscriptions" as label %}
{% include "account/includes/sidebar_menu_item.html" with item_key="subscriptions" item_url="account-subscriptions" item_label=label %}
</ul>
<a href="{% url 'account-settings' %}"
class="btn btn-outline-secondary mt-3 mb-lg-3 float-end">
Expand Down
4 changes: 4 additions & 0 deletions froide/locale/de/LC_MESSAGES/django.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11629,6 +11629,10 @@ msgstr[1] "„%(subject)s” an %(count)s Behörden"
msgid "👋 Goodbye!"
msgstr "👋 Viel Erfolg!"

#: froide/account/templates/account/show.html
msgid "Your account"
msgstr "Ihr Konto"

#, python-format
#~ msgid ""
#~ "\n"
Expand Down
9 changes: 9 additions & 0 deletions frontend/styles/components/misc.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,3 +174,12 @@ svg.img-text {
.skippy {
z-index: 1070;
}

.sticky-top-offset {
top: $spacer;
}

/* Keep a gap above elements jumped to via URL fragment */
[id] {
scroll-margin-top: $spacer;
}