From 226eb69f8b050c746a98db1684329c967bbad339 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sascha=20I=C3=9Fbr=C3=BCcker?= Date: Sun, 16 Mar 2025 10:25:01 +0100 Subject: [PATCH] Accessibility improvements in page structure (#1014) * Change app link to not use heading * Use main and h1 for main content * Update settings page structure * Fix responsive styles * Update bookmark form page structure * Update auth page structure * Add some basic page titles * Expose side panel section * Add page title for bookmark details * Expose more sections * Improve region names --- bookmarks/frontend/behaviors/filter-drawer.js | 6 +- bookmarks/styles/bookmark-form.css | 2 +- bookmarks/styles/bookmark-page.css | 6 +- bookmarks/styles/components.css | 37 +-- bookmarks/styles/layout.css | 16 +- bookmarks/styles/settings.css | 8 +- bookmarks/styles/theme/variables.css | 1 + bookmarks/templates/bookmarks/archive.html | 26 +- .../templates/bookmarks/bookmark_list.html | 274 +++++++++--------- bookmarks/templates/bookmarks/edit.html | 14 +- bookmarks/templates/bookmarks/head.html | 2 +- bookmarks/templates/bookmarks/index.html | 28 +- bookmarks/templates/bookmarks/layout.html | 24 +- bookmarks/templates/bookmarks/nav_menu.html | 34 ++- bookmarks/templates/bookmarks/new.html | 14 +- bookmarks/templates/bookmarks/shared.html | 42 +-- .../registration_complete.html | 15 +- .../registration_form.html | 14 +- bookmarks/templates/registration/login.html | 14 +- .../registration/password_change_done.html | 14 +- .../registration/password_change_form.html | 14 +- bookmarks/templates/settings/general.html | 33 ++- .../templates/settings/integrations.html | 25 +- bookmarks/templates/settings/nav.html | 24 -- bookmarks/tests/test_layout.py | 16 +- bookmarks/tests/test_settings_general_view.py | 4 +- bookmarks/tests_e2e/e2e_test_filter_drawer.py | 8 +- bookmarks/views/bookmarks.py | 6 + 28 files changed, 403 insertions(+), 318 deletions(-) delete mode 100644 bookmarks/templates/settings/nav.html diff --git a/bookmarks/frontend/behaviors/filter-drawer.js b/bookmarks/frontend/behaviors/filter-drawer.js index 8645b73..e5c340e 100644 --- a/bookmarks/frontend/behaviors/filter-drawer.js +++ b/bookmarks/frontend/behaviors/filter-drawer.js @@ -34,7 +34,7 @@ class FilterDrawerTriggerBehavior extends Behavior {
-
+
`; @@ -70,13 +70,13 @@ class FilterDrawerBehavior extends ModalBehavior { teleport() { const content = this.element.querySelector(".content"); - const sidePanel = document.querySelector("section.side-panel"); + const sidePanel = document.querySelector(".side-panel"); content.append(...sidePanel.children); this.mapHeading(content, "h2", "h3"); } teleportBack() { - const sidePanel = document.querySelector("section.side-panel"); + const sidePanel = document.querySelector(".side-panel"); const content = this.element.querySelector(".content"); sidePanel.append(...content.children); this.mapHeading(sidePanel, "h3", "h2"); diff --git a/bookmarks/styles/bookmark-form.css b/bookmarks/styles/bookmark-form.css index f84842e..820fab8 100644 --- a/bookmarks/styles/bookmark-form.css +++ b/bookmarks/styles/bookmark-form.css @@ -1,5 +1,5 @@ .bookmarks-form-page { - section { + main { max-width: 550px; margin: 0 auto; } diff --git a/bookmarks/styles/bookmark-page.css b/bookmarks/styles/bookmark-page.css index 223ec49..f3f5d7d 100644 --- a/bookmarks/styles/bookmark-page.css +++ b/bookmarks/styles/bookmark-page.css @@ -30,11 +30,11 @@ } &.collapse-side-panel { - section.main { + main { grid-column: span var(--grid-columns); } - section.side-panel { + .side-panel { display: none; } @@ -459,7 +459,7 @@ ul.bookmark-list { /* Hide section border when bulk edit bar is opened, otherwise borders overlap in dark mode due to using contrast colors */ - &.active section:first-of-type .content-area-header { + &.active .main .section-header { border-bottom-color: transparent; } diff --git a/bookmarks/styles/components.css b/bookmarks/styles/components.css index b3c6f87..9f4c021 100644 --- a/bookmarks/styles/components.css +++ b/bookmarks/styles/components.css @@ -1,36 +1,31 @@ /* Shared components */ -/* Content area component */ -section.content-area { +/* Section header component */ +.section-header { + border-bottom: solid 1px var(--secondary-border-color); + display: flex; + flex-wrap: wrap; + column-gap: var(--unit-5); + padding-bottom: var(--unit-2); + margin-bottom: var(--unit-4); + + h1, h2, h3 { font-size: var(--font-size-lg); + flex: 0 0 auto; + line-height: var(--unit-9); + margin: 0; } - .content-area-header { - border-bottom: solid 1px var(--secondary-border-color); + .header-controls { + flex: 1 1 0; display: flex; - flex-wrap: wrap; - column-gap: var(--unit-5); - padding-bottom: var(--unit-2); - margin-bottom: var(--unit-4); - - h2, - h3 { - flex: 0 0 auto; - line-height: var(--unit-9); - margin: 0; - } - - .header-controls { - flex: 1 1 0; - display: flex; - } } } @media (max-width: 600px) { - section.content-area .content-area-header { + .section-header { flex-direction: column; } } diff --git a/bookmarks/styles/layout.css b/bookmarks/styles/layout.css index 698a8dd..bc951d1 100644 --- a/bookmarks/styles/layout.css +++ b/bookmarks/styles/layout.css @@ -11,18 +11,20 @@ body { header { margin-bottom: var(--unit-9); - .logo { + a.app-link:hover { + text-decoration: none; + } + + .app-logo { width: 28px; height: 28px; } - a:hover { - text-decoration: none; - } - - h1 { - margin: 0 0 0 var(--unit-3); + .app-name { + margin-left: var(--unit-3); font-size: var(--font-size-lg); + font-weight: 500; + line-height: 1.2; } } diff --git a/bookmarks/styles/settings.css b/bookmarks/styles/settings.css index 0b24838..1398538 100644 --- a/bookmarks/styles/settings.css +++ b/bookmarks/styles/settings.css @@ -1,8 +1,14 @@ .settings-page { - section.content-area { + h1 { + font-size: var(--font-size-xl); + margin-bottom: var(--unit-6); + } + + section { margin-bottom: var(--unit-10); h2 { + font-size: var(--font-size-lg); margin-bottom: var(--unit-3); } } diff --git a/bookmarks/styles/theme/variables.css b/bookmarks/styles/theme/variables.css index 2fecf73..9eb3751 100644 --- a/bookmarks/styles/theme/variables.css +++ b/bookmarks/styles/theme/variables.css @@ -87,6 +87,7 @@ --font-size: 0.7rem; --font-size-sm: 0.65rem; --font-size-lg: 0.8rem; + --font-size-xl: 1rem; --line-height: 1rem; /* Sizes */ diff --git a/bookmarks/templates/bookmarks/archive.html b/bookmarks/templates/bookmarks/archive.html index d7a6a22..cdf7afd 100644 --- a/bookmarks/templates/bookmarks/archive.html +++ b/bookmarks/templates/bookmarks/archive.html @@ -8,9 +8,9 @@ class="bookmarks-page grid columns-md-1 {% if bookmark_list.collapse_side_panel %}collapse-side-panel{% endif %}"> {# Bookmark list #} -
-
-

Archived bookmarks

+
+
+

Archived bookmarks

{% bookmark_search bookmark_list.search mode='archived' %} {% include 'bookmarks/bulk_edit/toggle.html' %} @@ -28,17 +28,19 @@ {% include 'bookmarks/bookmark_list.html' %}
-
+ {# Tag cloud #} -
-
-

Tags

-
-
- {% include 'bookmarks/tag_cloud.html' %} -
-
+
+
+
+

Tags

+
+
+ {% include 'bookmarks/tag_cloud.html' %} +
+
+
{% endblock %} diff --git a/bookmarks/templates/bookmarks/bookmark_list.html b/bookmarks/templates/bookmarks/bookmark_list.html index e63fb72..39a2cbb 100644 --- a/bookmarks/templates/bookmarks/bookmark_list.html +++ b/bookmarks/templates/bookmarks/bookmark_list.html @@ -5,160 +5,162 @@ {% if bookmark_list.is_empty %} {% include 'bookmarks/empty_bookmarks.html' %} {% else %} - -
- {% pagination bookmark_list.bookmarks_page %} -
+
+ {% pagination bookmark_list.bookmarks_page %} +
+ {% endif %} diff --git a/bookmarks/templates/bookmarks/edit.html b/bookmarks/templates/bookmarks/edit.html index 4e1b766..cbf0ddc 100644 --- a/bookmarks/templates/bookmarks/edit.html +++ b/bookmarks/templates/bookmarks/edit.html @@ -1,15 +1,21 @@ {% extends 'bookmarks/layout.html' %} +{% block head %} + {% with page_title="Edit bookmark - Linkding" %} + {{ block.super }} + {% endwith %} +{% endblock %} + {% block content %}
-
-
-

Edit bookmark

+
+
+

Edit bookmark

{% include 'bookmarks/form.html' %}
-
+
{% endblock %} diff --git a/bookmarks/templates/bookmarks/head.html b/bookmarks/templates/bookmarks/head.html index 81b9c17..1f64e9d 100644 --- a/bookmarks/templates/bookmarks/head.html +++ b/bookmarks/templates/bookmarks/head.html @@ -12,7 +12,7 @@ - linkding + {{ page_title|default:'Linkding' }} {# Include specific theme variant based on user profile setting #} {% if request.user_profile.theme == 'light' %} diff --git a/bookmarks/templates/bookmarks/index.html b/bookmarks/templates/bookmarks/index.html index e17f5e6..93c4f7d 100644 --- a/bookmarks/templates/bookmarks/index.html +++ b/bookmarks/templates/bookmarks/index.html @@ -3,14 +3,16 @@ {% load shared %} {% load bookmarks %} +{% block title %}Bookmarks - Linkding{% endblock %} + {% block content %}
{# Bookmark list #} -
-
-

Bookmarks

+
+
+

Bookmarks

{% bookmark_search bookmark_list.search %} {% include 'bookmarks/bulk_edit/toggle.html' %} @@ -28,17 +30,19 @@ {% include 'bookmarks/bookmark_list.html' %}
-
+ {# Tag cloud #} -
-
-

Tags

-
-
- {% include 'bookmarks/tag_cloud.html' %} -
-
+
+
+
+

Tags

+
+
+ {% include 'bookmarks/tag_cloud.html' %} +
+
+
{% endblock %} diff --git a/bookmarks/templates/bookmarks/layout.html b/bookmarks/templates/bookmarks/layout.html index fd42b81..9508cf6 100644 --- a/bookmarks/templates/bookmarks/layout.html +++ b/bookmarks/templates/bookmarks/layout.html @@ -3,7 +3,7 @@ {# Use data attributes as storage for access in static scripts #} -{% include 'bookmarks/head.html' %} +{% block head %}{% include 'bookmarks/head.html' %}{% endblock %}
@@ -80,17 +80,19 @@
{% endif %}
- - -

LINKDING

+ + + LINKDING - {% if request.user.is_authenticated %} - {# Only show nav items menu when logged in #} - {% include 'bookmarks/nav_menu.html' %} - {% else %} - {# Otherwise show login link #} - Login - {% endif %} +
diff --git a/bookmarks/templates/bookmarks/nav_menu.html b/bookmarks/templates/bookmarks/nav_menu.html index c9a9d9b..f50edf7 100644 --- a/bookmarks/templates/bookmarks/nav_menu.html +++ b/bookmarks/templates/bookmarks/nav_menu.html @@ -27,7 +27,24 @@
- Settings +
+ + +
{% csrf_token %} @@ -54,11 +71,11 @@ Bookmarks
  • - Archived + Archived bookmarks
    • {% if request.user_profile.enable_sharing %}
  • - Shared + Shared bookmarks
    • {% endif %}
  • @@ -69,8 +86,17 @@
  • - Settings + Settings
    • +
  • + Integrations +
    • + {% if request.user.is_superuser %} +
  • + Admin +
    • + {% endif %} +
  • {% csrf_token %} diff --git a/bookmarks/templates/bookmarks/new.html b/bookmarks/templates/bookmarks/new.html index 6fa27a8..43fa7df 100644 --- a/bookmarks/templates/bookmarks/new.html +++ b/bookmarks/templates/bookmarks/new.html @@ -1,14 +1,20 @@ {% extends 'bookmarks/layout.html' %} +{% block head %} + {% with page_title="New bookmark - Linkding" %} + {{ block.super }} + {% endwith %} +{% endblock %} + {% block content %}
    -
    -
    -

    New bookmark

    +
    +
    +

    New bookmark

    {% include 'bookmarks/form.html' %} -
    +
    {% endblock %} diff --git a/bookmarks/templates/bookmarks/shared.html b/bookmarks/templates/bookmarks/shared.html index bc40d06..b60e159 100644 --- a/bookmarks/templates/bookmarks/shared.html +++ b/bookmarks/templates/bookmarks/shared.html @@ -8,9 +8,9 @@ class="bookmarks-page grid columns-md-1 {% if bookmark_list.collapse_side_panel %}collapse-side-panel{% endif %}"> {# Bookmark list #} -
    -
    -

    Shared bookmarks

    +
    +
    +

    Shared bookmarks

    {% bookmark_search bookmark_list.search mode='shared' %} @@ -25,24 +25,28 @@ {% include 'bookmarks/bookmark_list.html' %}
    -
    + {# Filters #} -
    -
    -

    User

    -
    -
    - {% user_select bookmark_list.search users %} -
    -
    -
    -

    Tags

    -
    -
    - {% include 'bookmarks/tag_cloud.html' %} -
    -
    +
    +
    +
    +

    User

    +
    +
    + {% user_select bookmark_list.search users %} +
    +
    +
    +
    +
    +

    Tags

    +
    +
    + {% include 'bookmarks/tag_cloud.html' %} +
    +
    +
    {% endblock %} diff --git a/bookmarks/templates/django_registration/registration_complete.html b/bookmarks/templates/django_registration/registration_complete.html index fd727ed..041566d 100644 --- a/bookmarks/templates/django_registration/registration_complete.html +++ b/bookmarks/templates/django_registration/registration_complete.html @@ -1,8 +1,19 @@ {% extends 'bookmarks/layout.html' %} {% load widget_tweaks %} -{% block title %}Registration complete{% endblock %} +{% block head %} + {% with page_title="Registration complete - Linkding" %} + {{ block.super }} + {% endwith %} +{% endblock %} {% block content %} -

    Registration complete. You can now use the application.

    +
    +
    +

    Registration complete

    +
    +

    + You can now use the application. +

    +
    {% endblock %} diff --git a/bookmarks/templates/django_registration/registration_form.html b/bookmarks/templates/django_registration/registration_form.html index dba0f54..b02f25e 100644 --- a/bookmarks/templates/django_registration/registration_form.html +++ b/bookmarks/templates/django_registration/registration_form.html @@ -1,12 +1,16 @@ {% extends 'bookmarks/layout.html' %} {% load widget_tweaks %} -{% block title %}Registration{% endblock %} +{% block head %} + {% with page_title="Registration - Linkding" %} + {{ block.super }} + {% endwith %} +{% endblock %} {% block content %} -
    -
    -

    Register

    +
    +
    +

    Register

    {% csrf_token %} @@ -34,5 +38,5 @@
    -
    + {% endblock %} diff --git a/bookmarks/templates/registration/login.html b/bookmarks/templates/registration/login.html index 9b69a60..a94e63f 100644 --- a/bookmarks/templates/registration/login.html +++ b/bookmarks/templates/registration/login.html @@ -1,12 +1,16 @@ {% extends 'bookmarks/layout.html' %} {% load widget_tweaks %} -{% block title %}Login{% endblock %} +{% block head %} + {% with page_title="Login - Linkding" %} + {{ block.super }} + {% endwith %} +{% endblock %} {% block content %} -
    -
    -

    Login

    +
    +
    +

    Login

    {% csrf_token %} @@ -36,5 +40,5 @@ {% endif %}
    -
    + {% endblock %} diff --git a/bookmarks/templates/registration/password_change_done.html b/bookmarks/templates/registration/password_change_done.html index 15c1bd8..4b47e4f 100644 --- a/bookmarks/templates/registration/password_change_done.html +++ b/bookmarks/templates/registration/password_change_done.html @@ -1,15 +1,19 @@ {% extends 'bookmarks/layout.html' %} {% load widget_tweaks %} -{% block title %}Password changed{% endblock %} +{% block head %} + {% with page_title="Password changed - Linkding" %} + {{ block.super }} + {% endwith %} +{% endblock %} {% block content %} -
    -
    -

    Password Changed

    +
    +
    +

    Password Changed

    Your password was changed successfully.

    -
    + {% endblock %} diff --git a/bookmarks/templates/registration/password_change_form.html b/bookmarks/templates/registration/password_change_form.html index b4aedcd..ebf42a9 100644 --- a/bookmarks/templates/registration/password_change_form.html +++ b/bookmarks/templates/registration/password_change_form.html @@ -1,12 +1,16 @@ {% extends 'bookmarks/layout.html' %} {% load widget_tweaks %} -{% block title %}Change Password{% endblock %} +{% block head %} + {% with page_title="Change password - Linkding" %} + {{ block.super }} + {% endwith %} +{% endblock %} {% block content %} -
    -
    -

    Change Password

    +
    +
    +

    Change Password

    {% csrf_token %} @@ -41,5 +45,5 @@
    -
    + {% endblock %} diff --git a/bookmarks/templates/settings/general.html b/bookmarks/templates/settings/general.html index 7a1cde8..c8cfc6d 100644 --- a/bookmarks/templates/settings/general.html +++ b/bookmarks/templates/settings/general.html @@ -1,10 +1,15 @@ {% extends "bookmarks/layout.html" %} {% load widget_tweaks %} -{% block content %} -
    +{% block head %} + {% with page_title="Settings - Linkding" %} + {{ block.super }} + {% endwith %} +{% endblock %} - {% include 'settings/nav.html' %} +{% block content %} +
    +

    Settings

    {# Profile section #} {% if success_message %} @@ -14,8 +19,8 @@
    {{ error_message }}
    {% endif %} -
    -

    Profile

    +
    +

    Profile

    Change password

    @@ -278,8 +283,8 @@ reddit.com/r/Music music reddit {# Global settings section #} {% if global_settings_form %} -
    -

    Global settings

    +
    +

    Global settings

    {% csrf_token %}
    @@ -318,8 +323,8 @@ reddit.com/r/Music music reddit {% endif %} {# Import section #} -
    -

    Import

    +
    +

    Import

    Import bookmarks and tags in the Netscape HTML format. This will execute a sync where new bookmarks are added and existing ones are updated.

    @@ -346,8 +351,8 @@ reddit.com/r/Music music reddit
    {# Export section #} -
    -

    Export

    +
    +

    Export

    Export all bookmarks in Netscape HTML format.

    Download (.html) {% if export_error %} @@ -360,8 +365,8 @@ reddit.com/r/Music music reddit
    {# About section #} -
    -

    About

    +
    +

    About

    @@ -384,7 +389,7 @@ reddit.com/r/Music music reddit
    -
    +