From b756dfe77aa8ae52dacf52c2fea465a50745acb6 Mon Sep 17 00:00:00 2001
From: Anna Larch <anna@nextcloud.com>
Date: Wed, 11 Mar 2026 23:58:44 +0100
Subject: [PATCH] fix(semantic): improve HTML semantics across templates

- Replace navbar-default class on <footer> with site-footer
- Extract filter form out of <ul class="nav-tabs"> into its own sibling element
- Convert .app-meta <div> to <aside aria-label="App information"> on detail page
- Merge duplicate {% if request.user.is_authenticated %} blocks in nav.html

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Signed-off-by: Anna Larch <anna@nextcloud.com>
---
 .../core/static/assets/css/style.css          | 19 +++++-
 .../core/templates/app/detail.html            |  4 +-
 .../core/templates/app/list.html              | 60 +++++++++----------
 nextcloudappstore/core/templates/base.html    |  2 +-
 nextcloudappstore/core/templates/nav.html     |  2 -
 5 files changed, 51 insertions(+), 36 deletions(-)

diff --git a/nextcloudappstore/core/static/assets/css/style.css b/nextcloudappstore/core/static/assets/css/style.css
index df83cb41e9f..31b5ce8a8d8 100644
--- a/nextcloudappstore/core/static/assets/css/style.css
+++ b/nextcloudappstore/core/static/assets/css/style.css
@@ -593,10 +593,27 @@ form .text-danger {
     box-shadow: none;
 }
 
-.sorting {
+.sorting-row {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
     margin: 0 15px 15px 15px;
 }
 
+.sorting {
+    margin: 0;
+    flex-shrink: 0;
+}
+
+form.filters {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-left: auto;
+}
+
 .sorting .glyphicon {
     margin-left: -2px;
     margin-right: 3px;
diff --git a/nextcloudappstore/core/templates/app/detail.html b/nextcloudappstore/core/templates/app/detail.html
index 02e5fb6f56e..a0e3542bd4f 100644
--- a/nextcloudappstore/core/templates/app/detail.html
+++ b/nextcloudappstore/core/templates/app/detail.html
@@ -62,7 +62,7 @@ <h1>{{ object.name }}</h1>
         {% if object.is_featured %}<span class="tag featured">{% trans "Featured" %}</span>{% endif %}
         {% if object.is_orphan %}<span class="tag tag-danger">{% trans "Orphan / Looking for Maintainer" %}</span>{% endif %}
     </div>
-    <div class="app-meta col-md-4 col-sm-12">
+    <aside class="app-meta col-md-4 col-sm-12" aria-label="{% trans 'App information' %}">
         <section>
             <h5>{% trans "Highest Nextcloud version" %}</h5>
             {% with latest_releases_by_platform_v|sort_by_version:'asc'|last as latest_release %}
@@ -189,7 +189,7 @@ <h5>{% trans 'Need Enterprise Support?' %}</h5>
             {% trans 'Recommended for large Nextcloud installations only.' %}
         </section>
         {% endif %}
-    </div>
+    </aside>
 
     <section class="app-description markdown loading"></section>
 
diff --git a/nextcloudappstore/core/templates/app/list.html b/nextcloudappstore/core/templates/app/list.html
index 4e0f4fb3c69..aeb633aa2a0 100644
--- a/nextcloudappstore/core/templates/app/list.html
+++ b/nextcloudappstore/core/templates/app/list.html
@@ -16,77 +16,77 @@
 
 <div class="row row-no-gutters">
     <div class="col-md-12">
+        <div class="sorting-row">
         <ul class="nav-tabs nav sorting">
-            <li role="presentation" class="{% if not request.GET.order_by or request.GET.order_by == 'relevance' %}active{% endif %}">
+            <li class="{% if not request.GET.order_by or request.GET.order_by == 'relevance' %}active{% endif %}">
                 <a href="{{ request.url }}?order_by=relevance&amp;ordering=desc{% if url_params.search_filters %}&amp;{{ url_params.search_filters }}{% endif %}">
                     <span class="icon icon-relevance{% if not request.GET.order_by or request.GET.order_by == 'relevance' %} icon-white{% else %}-outline{% endif %}"></span>
                     {% trans 'Relevance' %}
                 </a>
             </li>
-            <li role="presentation" class="{% if request.GET.order_by == 'rating_overall' %}active{% endif %}">
+            <li class="{% if request.GET.order_by == 'rating_overall' %}active{% endif %}">
                 <a href="{{ request.url }}?order_by=rating_overall&amp;ordering=desc{% if url_params.search_filters %}&amp;{{ url_params.search_filters }}{% endif %}">
                     <span class="icon icon-star-plus{% if request.GET.order_by == 'rating_overall' %} icon-white{% else %}-outline{% endif %}"></span>
                     {% trans 'Rating' %}
                 </a>
             </li>
             {% if request.GET.order_by == 'name' and request.GET.ordering == 'asc' %}
-                <li role="presentation" class="{% if request.GET.order_by == 'name' %}active{% endif %}">
+                <li class="{% if request.GET.order_by == 'name' %}active{% endif %}">
                     <a href="{{ request.url }}?order_by=name&amp;ordering=desc{% if url_params.search_filters %}&amp;{{ url_params.search_filters }}{% endif %}">
                         <span class="icon icon-sort-alphabetical-variant {% if request.GET.order_by == 'name' %}icon-white{% endif %}"></span>
                         {% trans 'Alphabetically' %}
                     </a>
                 </li>
             {% elif request.GET.order_by == 'name' and request.GET.ordering == 'desc' %}
-                <li role="presentation" class="{% if request.GET.order_by == 'name' %}active{% endif %}">
+                <li class="{% if request.GET.order_by == 'name' %}active{% endif %}">
                     <a href="{{ request.url }}?order_by=name&amp;ordering=asc{% if url_params.search_filters %}&amp;{{ url_params.search_filters }}{% endif %}">
                         <span class="icon icon-sort-alphabetical-variant {% if request.GET.order_by == 'name' %}icon-white{% endif %}" style="transform: rotateZ(180deg)"></span>
                         {% trans 'Alphabetically' %}
                     </a>
                 </li>
             {% else %}
-                <li role="presentation" class="{% if request.GET.order_by == 'name' %}active{% endif %}">
+                <li class="{% if request.GET.order_by == 'name' %}active{% endif %}">
                     <a href="{{ request.url }}?order_by=name&amp;ordering=asc{% if url_params.search_filters %}&amp;{{ url_params.search_filters }}{% endif %}">
                         <span class="icon icon-sort-alphabetical-variant {% if request.GET.order_by == 'name' %}icon-white{% endif %}"></span>
                         {% trans 'Alphabetically' %}
                     </a>
                 </li>
             {% endif %}
-            <li role="presentation" class="{% if request.GET.order_by == 'last_release' %}active{% endif %}">
+            <li class="{% if request.GET.order_by == 'last_release' %}active{% endif %}">
                 <a href="{{ request.url }}?order_by=last_release&amp;ordering=desc{% if url_params.search_filters %}&amp;{{ url_params.search_filters }}{% endif %}">
                     <span class="icon icon-rocket-launch{% if request.GET.order_by == 'last_release' %} icon-white{% else %}-outline{% endif %}"></span>
                     {% trans 'Latest release' %}
                 </a>
             </li>
-            <li role="presentation" class="{% if request.GET.order_by == 'rating_recent' %}active{% endif %}">
+            <li class="{% if request.GET.order_by == 'rating_recent' %}active{% endif %}">
                 <a href="{{ request.url }}?order_by=rating_recent&amp;ordering=desc{% if url_params.search_filters %}&amp;{{ url_params.search_filters }}{% endif %}">
                     <span class="icon icon-timer-star{% if request.GET.order_by == 'rating_recent' %} icon-white{% else %}-outline{% endif %}"></span>
                     {% trans 'Rating (recent)' %}
                 </a>
             </li>
-            <li role="presentation" class="filters">
-                <form method="get" action="{{ request.path }}" name="filter-form" id="filter-form">
-                    {% if not is_featured_category %}
-                        <label class="checkbox-group" for="featured-checkbox">
-                            {% trans 'Featured' %}
-                            <input type="checkbox" class="auto-submit" id="featured-checkbox" name="is_featured" value="true" {% if request.GET.is_featured == 'true' %}checked{% endif %}>
-                            <span class="checkmark"></span>
-                        </label>
-                    {% endif %}
-                    {% if request.user.is_authenticated %}
-                        <label class="checkbox-group" for="myapps-checkbox">
-                            {% trans 'My apps' %}
-                            <input type="checkbox" class="auto-submit" id="myapps-checkbox" name="maintainer" value="{{ request.user.username }}" {% if request.GET.maintainer == request.user.username %}checked{% endif %}>
-                            <span class="checkmark"></span>
-                        </label>
-                    {% endif %}
-
-                    {# Include all GET arguments that should be preserved when applying a filter. #}
-                    {% if request.GET.search %}<input type="hidden" name="search" value="{{ request.GET.search }}">{% endif %}
-                    {% if request.GET.order_by %}<input type="hidden" name="order_by" value="{{ request.GET.order_by }}">{% endif %}
-                    {% if request.GET.ordering %}<input type="hidden" name="ordering" value="{{ request.GET.ordering }}">{% endif %}
-                </form>
-            </li>
         </ul>
+        <form method="get" action="{{ request.path }}" name="filter-form" id="filter-form" class="filters">
+            {% if not is_featured_category %}
+                <label class="checkbox-group" for="featured-checkbox">
+                    {% trans 'Featured' %}
+                    <input type="checkbox" class="auto-submit" id="featured-checkbox" name="is_featured" value="true" {% if request.GET.is_featured == 'true' %}checked{% endif %}>
+                    <span class="checkmark"></span>
+                </label>
+            {% endif %}
+            {% if request.user.is_authenticated %}
+                <label class="checkbox-group" for="myapps-checkbox">
+                    {% trans 'My apps' %}
+                    <input type="checkbox" class="auto-submit" id="myapps-checkbox" name="maintainer" value="{{ request.user.username }}" {% if request.GET.maintainer == request.user.username %}checked{% endif %}>
+                    <span class="checkmark"></span>
+                </label>
+            {% endif %}
+
+            {# Include all GET arguments that should be preserved when applying a filter. #}
+            {% if request.GET.search %}<input type="hidden" name="search" value="{{ request.GET.search }}">{% endif %}
+            {% if request.GET.order_by %}<input type="hidden" name="order_by" value="{{ request.GET.order_by }}">{% endif %}
+            {% if request.GET.ordering %}<input type="hidden" name="ordering" value="{{ request.GET.ordering }}">{% endif %}
+        </form>
+        </div>
     </div>
 </div>
 
diff --git a/nextcloudappstore/core/templates/base.html b/nextcloudappstore/core/templates/base.html
index 4a4367bc42b..d457a55587e 100644
--- a/nextcloudappstore/core/templates/base.html
+++ b/nextcloudappstore/core/templates/base.html
@@ -41,7 +41,7 @@
         </div>
         {% block content %}{% endblock %}
     </div>
-    <footer class="navbar-default" id="footer">
+    <footer class="site-footer" id="footer">
         <div class="container">
             <ul class="nav navbar-nav">
                 <li class="nav-link">
diff --git a/nextcloudappstore/core/templates/nav.html b/nextcloudappstore/core/templates/nav.html
index 679cdf812f3..8b64d794972 100644
--- a/nextcloudappstore/core/templates/nav.html
+++ b/nextcloudappstore/core/templates/nav.html
@@ -63,8 +63,6 @@
                                             {% trans 'Upload app release' %}
                                         </a>
                                     </li>
-                                {% endif %}
-                                {% if request.user.is_authenticated %}
                                     <li class="nav-link">
                                         <a href="{% url 'integration-scaffold' %}">
                                             <span class="icon material-symbols-outlined">integration_instructions</span>