From 403217739b607ccd0ee42d9fe1c9db0c679344c0 Mon Sep 17 00:00:00 2001
From: Anna Larch <anna@nextcloud.com>
Date: Wed, 11 Mar 2026 23:51:31 +0100
Subject: [PATCH] fix(accessibility): fix multiple accessibility issues

Signed-off-by: Anna Larch <anna@nextcloud.com>
---
 .../core/static/assets/css/style.css          | 26 ++++++++++--
 .../core/templates/app/base.html              | 11 +++--
 .../core/templates/app/detail.html            | 40 +++++++++----------
 .../core/templates/app/list.html              | 16 ++++----
 nextcloudappstore/core/templates/base.html    |  5 ++-
 nextcloudappstore/core/templates/nav.html     |  6 +--
 6 files changed, 64 insertions(+), 40 deletions(-)

diff --git a/nextcloudappstore/core/static/assets/css/style.css b/nextcloudappstore/core/static/assets/css/style.css
index df83cb41e9f..125124cf3c1 100644
--- a/nextcloudappstore/core/static/assets/css/style.css
+++ b/nextcloudappstore/core/static/assets/css/style.css
@@ -3,6 +3,22 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
+.skip-to-content {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    padding: 8px 16px;
+    background-color: var(--color-primary);
+    color: #fff;
+    font-weight: bold;
+    border-radius: 0 0 var(--border-radius) 0;
+    z-index: 9999;
+}
+
+.skip-to-content:focus {
+    top: 0;
+}
+
 html,
 body {
     margin: 0;
@@ -730,10 +746,12 @@ form .text-danger {
     }
 }
 
-.app-meta h5 {
+.app-meta h2 {
     font-weight: 700;
     color: #000;
     font-size: 16px;
+    margin-top: 15px;
+    margin-bottom: 5px;
 }
 
 .app-score-image {
@@ -933,9 +951,9 @@ address {
     font-weight: 700;
 }
 
-.interact-section h5,
-.donate-section h5,
-.support-section h5 {
+.interact-section h2,
+.donate-section h2,
+.support-section h2 {
     margin-bottom: 20px;
 }
 
diff --git a/nextcloudappstore/core/templates/app/base.html b/nextcloudappstore/core/templates/app/base.html
index 5561391dc6f..3a6c2b5b546 100644
--- a/nextcloudappstore/core/templates/app/base.html
+++ b/nextcloudappstore/core/templates/app/base.html
@@ -9,15 +9,18 @@
 <div class="row">
     <div class="col-sm-4 col-md-3">
         {% if categories %}
+        <nav aria-label="{% trans 'App categories' %}">
         <ul id="sidebar" class="nav nav-pills nav-stacked">
             <li class="category-app-item {% if cat.id == current_category.id and not object and not is_featured_category %}active{% endif %}">
-                <a href="{% url 'home' %}{% if url_params.filters_ordering %}?{{ url_params.filters_ordering }}{% endif %}">
+                <a href="{% url 'home' %}{% if url_params.filters_ordering %}?{{ url_params.filters_ordering }}{% endif %}"
+                   {% if not current_category and not object and not is_featured_category %}aria-current="page"{% endif %}>
                     <span class="icon icon-category-all {% if cat.id == current_category.id and not object and not is_featured_category %}icon-white{% endif %}"></span>
                     {% trans 'All apps' %}
                 </a>
             </li>
             <li class="{% if cat.id == current_category.id and not object and is_featured_category %}active{% endif %}">
-                <a href="{% url 'featured' %}{% if url_params.filters_ordering %}?{{ url_params.filters_ordering }}{% endif %}">
+                <a href="{% url 'featured' %}{% if url_params.filters_ordering %}?{{ url_params.filters_ordering }}{% endif %}"
+                   {% if is_featured_category %}aria-current="page"{% endif %}>
                     <span class="icon icon-category-featured {% if cat.id == current_category.id and not object and is_featured_category %}icon-white{% endif %}"></span>
                     {% trans 'Featured apps' %}
                 </a>
@@ -25,13 +28,15 @@
 
             {% for cat in categories %}
                 <li class="category-app-item {% if cat.id == current_category.id %}active{% endif %}">
-                    <a href="{% url 'category-app-list' cat.id %}{% if url_params.filters_ordering %}?{{ url_params.filters_ordering }}{% endif %}">
+                    <a href="{% url 'category-app-list' cat.id %}{% if url_params.filters_ordering %}?{{ url_params.filters_ordering }}{% endif %}"
+                       {% if cat.id == current_category.id %}aria-current="page"{% endif %}>
                         <span class="icon icon-category-{{ cat.id }} {% if cat.id == current_category.id %}icon-white{% endif %}"></span>
                         {{ cat.name }}
                     </a>
                 </li>
             {% endfor %}
         </ul>
+        </nav>
         {% endif %}
     </div>
     <div class="col-sm-8 col-md-9">
diff --git a/nextcloudappstore/core/templates/app/detail.html b/nextcloudappstore/core/templates/app/detail.html
index 02e5fb6f56e..edb68e2d9d6 100644
--- a/nextcloudappstore/core/templates/app/detail.html
+++ b/nextcloudappstore/core/templates/app/detail.html
@@ -25,18 +25,18 @@
         <section id="app-gallery-container">
             <div id="app-gallery" class="carousel slide" data-ride="carousel" data-interval="false">
                 <div class="inner-container">
-                    <a class="left carousel-control {% if object.screenshots.all|length < 2 %}hidden{% endif %}" href="#app-gallery" role="button" data-slide="prev">
-                        <span class="icon icon-chevron-left" aria-hidden="true" aria-label="{% trans 'Previous' %}"></span>
+                    <a class="left carousel-control {% if object.screenshots.all|length < 2 %}hidden{% endif %}" href="#app-gallery" role="button" data-slide="prev" aria-label="{% trans 'Previous screenshot' %}">
+                        <span class="icon icon-chevron-left" aria-hidden="true"></span>
                     </a>
-                    <div class="carousel-inner" role="listbox">
+                    <div class="carousel-inner" role="region" aria-label="{% trans 'Screenshots' %}">
                         {% for screenshot in object.screenshots.all %}
                             <div class="item {% if forloop.first %}active{% endif %}">
                                 <img src="{{ screenshot.url }}" alt="{% trans 'Screenshot' %}">
                             </div>
                         {% endfor %}
                     </div>
-                    <a class="right carousel-control {% if object.screenshots.all|length < 2 %}hidden{% endif %}" href="#app-gallery" role="button" data-slide="next">
-                        <span class="icon icon-chevron-right" aria-hidden="true" aria-label="{% trans 'Next' %}"></span>
+                    <a class="right carousel-control {% if object.screenshots.all|length < 2 %}hidden{% endif %}" href="#app-gallery" role="button" data-slide="next" aria-label="{% trans 'Next screenshot' %}">
+                        <span class="icon icon-chevron-right" aria-hidden="true"></span>
                     </a>
                 </div>
             </div>
@@ -64,18 +64,18 @@ <h1>{{ object.name }}</h1>
     </div>
     <div class="app-meta col-md-4 col-sm-12">
         <section>
-            <h5>{% trans "Highest Nextcloud version" %}</h5>
+            <h2>{% trans "Highest Nextcloud version" %}</h2>
             {% with latest_releases_by_platform_v|sort_by_version:'asc'|last as latest_release %}
                 <p>
                     Nextcloud {{ latest_release.0 }} <br />
                     <a href="{% url 'app-releases' object.id %}?platform={{ latest_release.0 }}#{{ latest_release.0 }}">{% trans "Show all releases" %}</a>
                 </p>
             {% endwith %}
-            <h5>{% trans "Community rating" %}</h5>
-            <img class="app-score-image" src="/static/assets/img/rating/s{{ object.rating_overall|app_rating_img }}.svg" alt="">
+            <h2>{% trans "Community rating" %}</h2>
+            <img class="app-score-image" src="/static/assets/img/rating/s{{ object.rating_overall|app_rating_img }}.svg" alt="{{ object.rating_overall|app_rating }}">
 
             {% if object.authors.all %}
-            <h5>{% trans "Authors" %}</h5>
+            <h2>{% trans "Authors" %}</h2>
             <ul class="authors">
                 {% for a in object.authors.all %}
                 <li>
@@ -94,7 +94,7 @@ <h5>{% trans "Authors" %}</h5>
             </ul>
             {% endif %}
             {% if object.owner %}
-            <h5>{% trans "Owner" %}</h5>
+            <h2>{% trans "Owner" %}</h2>
             <p>
                 {% if object.owner.first_name or object.owner.last_name %}
                     {{ object.owner.first_name }} {{ object.owner.last_name }}
@@ -104,7 +104,7 @@ <h5>{% trans "Owner" %}</h5>
             </p>
             {% endif %}
             {% if object.co_maintainers.all %}
-            <h5>{% trans "Co-Maintainers" %}</h5>
+            <h2>{% trans "Co-Maintainers" %}</h2>
             <ul class="list-inline">
                 {% for a in object.co_maintainers.all %}
                 <li>{% if a.get_fullname %}
@@ -116,15 +116,15 @@ <h5>{% trans "Co-Maintainers" %}</h5>
             </ul>
             {% endif %}
             {% if object.last_release %}
-            <h5>{% trans "Last updated" %}</h5>
+            <h2>{% trans "Last updated" %}</h2>
             <p>{{ object.last_release|naturaltime }}</p>
             {% endif %}
-            <h5>{% trans "Categories" %}</h5>
+            <h2>{% trans "Categories" %}</h2>
             <p>{{ object.categories.all|join:", " }}</p>
         </section>
         {% if object.website or object.user_docs or object.admin_docs or object.developer_docs %}
         <section class="resources">
-            <h5>{% trans "Resources" %}</h5>
+            <h2>{% trans "Resources" %}</h2>
             <ul>
                 {% if object.website %}
                 <li><a href="{{ object.website }}" rel="noopener noreferrer">{% trans "Homepage" %}</a></li>
@@ -142,7 +142,7 @@ <h5>{% trans "Resources" %}</h5>
         </section>
         {% endif %}
         <section class="interact-section">
-            <h5>{% trans "Interact" %}</h5>
+            <h2>{% trans "Interact" %}</h2>
             {% if object.issue_tracker %}
                 <a rel="noreferrer noopener"
                        href="{{ object.issue_tracker }}"
@@ -166,7 +166,7 @@ <h5>{% trans "Interact" %}</h5>
         </section>
         {% if object.donations.all %}
         <section class="donate-section">
-            <h5>{% trans 'Donate' %}</h5>
+            <h2>{% trans 'Donate' %}</h2>
             {% for donation in object.donations.all %}
                 <a rel="noreferrer noopener"
                        href="{{ donation.url }}"
@@ -179,7 +179,7 @@ <h5>{% trans 'Donate' %}</h5>
         {% endif %}
         {% if object.is_enterprise_supported %}
         <section class="support-section">
-            <h5>{% trans 'Need Enterprise Support?' %}</h5>
+            <h2>{% trans 'Need Enterprise Support?' %}</h2>
             <a rel="noreferrer noopener"
                href="https://nextcloud.com/get-a-quote/?utm_source=apps.nextcloud.com&utm_campaign={{ object.id }}"
                class="btn btn-default btn-light">
@@ -197,7 +197,7 @@ <h5>{% trans 'Need Enterprise Support?' %}</h5>
     <div class="row app-download">
         <div class="col-md-12">
             <section>
-                <h3 id="downloads" class="section-heading">{% trans "Releases" %}</h3>
+                <h2 id="downloads" class="section-heading">{% trans "Releases" %}</h2>
                 <table class="table">
                     <thead>
                         <tr>
@@ -292,7 +292,7 @@ <h3 id="downloads" class="section-heading">{% trans "Releases" %}</h3>
 
     <div class="row">
         <div class="col-md-12">
-            <h3 class="section-heading" id="comments">{% trans 'Comments' %}</h3>
+            <h2 class="section-heading" id="comments">{% trans 'Comments' %}</h2>
 
             {% if request.user.is_authenticated and not user_has_rated_app and request.user != object.owner %}
                 <button id="toggle-comment-button" aria-expanded="true"
@@ -305,7 +305,7 @@ <h3 class="section-heading" id="comments">{% trans 'Comments' %}</h3>
             {% if request.user.is_authenticated and request.user != object.owner %}
                 <div class="row app-ratings {% if not user_has_rated_app %}collapse{% endif %}" id="app-ratings">
                     <div class="col-md-12">
-                        <h4 class="section-heading" id="comments">{% trans 'Your comment' %}</h4>
+                        <h3 class="section-heading" id="your-comment">{% trans 'Your comment' %}</h3>
                         <form action="{% url 'app-detail' object.id %}" method="post">
                             {% csrf_token %}
                             {% include 'form-fields.html' with form=rating_form %}
diff --git a/nextcloudappstore/core/templates/app/list.html b/nextcloudappstore/core/templates/app/list.html
index 4e0f4fb3c69..53bc6bf133c 100644
--- a/nextcloudappstore/core/templates/app/list.html
+++ b/nextcloudappstore/core/templates/app/list.html
@@ -17,53 +17,53 @@
 <div class="row row-no-gutters">
     <div class="col-md-12">
         <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">
+            <li 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">
diff --git a/nextcloudappstore/core/templates/base.html b/nextcloudappstore/core/templates/base.html
index 4a4367bc42b..92eb1fae2c9 100644
--- a/nextcloudappstore/core/templates/base.html
+++ b/nextcloudappstore/core/templates/base.html
@@ -28,9 +28,10 @@
 </head>
 
 <body>
+<a class="skip-to-content" href="#body">{% trans 'Skip to main content' %}</a>
 <div id="container">
     {% block navbar %}{% include 'nav.html' %}{% endblock %}
-    <div class="container" id="body">
+    <main class="container" id="body">
         <div class="messages">
             {% for message in messages %}
                 <div {% if message.tags %} class="alert alert-{{ message.tags }}"{% endif %}>
@@ -40,7 +41,7 @@
             {% block messages %}{% endblock %}
         </div>
         {% block content %}{% endblock %}
-    </div>
+    </main>
     <footer class="navbar-default" id="footer">
         <div class="container">
             <ul class="nav navbar-nav">
diff --git a/nextcloudappstore/core/templates/nav.html b/nextcloudappstore/core/templates/nav.html
index 679cdf812f3..4e7ac39e595 100644
--- a/nextcloudappstore/core/templates/nav.html
+++ b/nextcloudappstore/core/templates/nav.html
@@ -8,11 +8,11 @@
             <div class="col-md-12 col-lg-6">
                 <div class="left-navbar-wrapper">
                     <a class="brand" href="/">
-                        <img class="logo" alt="Logo" src="{% static 'assets/img/logo-icon.svg' %}" title="nextcloud.com">
+                        <img class="logo" alt="Nextcloud" src="{% static 'assets/img/logo-icon.svg' %}">
                         <span class="site-title">App store</span>
                     </a>
                     <ul class="nav navbar-nav developer-nav">
-                        <li role="presentation" class="dropdown">
+                        <li class="dropdown">
                             <a class="dropdown-toggle nav-heading" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                                 <span class="icon material-symbols-outlined">arrow_drop_down_circle</span>
                                 {% trans 'Resources for developers' %}
@@ -81,6 +81,7 @@
                 <div id="navbar-wrapper" class="navbar-wrapper">
                     <div class="search-form">
                         <form method="get"
+                              role="search"
                               action="{% if current_category %}{{ request.path }}
                               {% else %}{% url 'home' %}
                               {% endif %}">
@@ -88,7 +89,6 @@
                                 <span class="icon material-symbols-outlined" aria-hidden="true">search</span>
                                 <input type="search"
                                        name="search"
-                                       role="search"
                                        value="{{ search_query }}"
                                        placeholder="{% if current_category %}{% blocktrans with category=current_category.name %}Search in {{ category }}{% endblocktrans %}{% elif is_featured_category %}{% trans 'Search in featured apps' %}{% else %}{% trans 'Search in all apps' %}{% endif %}"
                                        class="form-control search-box">