Skip to content

fix(accessibility): fix multiple accessibility issues #1720

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

Open
miaulalala wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix(accessibility): fix multiple accessibility issues #1720

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
26 changes: 22 additions & 4 deletions nextcloudappstore/core/static/assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Comment on lines +18 to +20
Copy link
Collaborator

@edward-ly edward-ly Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text color still hasn't changed for me, but I figured out why: it should be specified here in .skip-to-content:focus rather than in .skip-to-content.


html,
body {
margin: 0;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}

Expand Down
11 changes: 8 additions & 3 deletions nextcloudappstore/core/templates/app/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,29 +9,34 @@
<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>
</li>

{% 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">
Expand Down
40 changes: 20 additions & 20 deletions nextcloudappstore/core/templates/app/detail.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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 }}
Expand All @@ -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 %}
Expand All @@ -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>
Expand All @@ -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 }}"
Expand All @@ -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 }}"
Expand All @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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"
Expand All @@ -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 %}
Expand Down
16 changes: 8 additions & 8 deletions nextcloudappstore/core/templates/app/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 3 additions & 2 deletions nextcloudappstore/core/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}>
Expand All @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions nextcloudappstore/core/templates/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' %}
Expand Down Expand Up @@ -81,14 +81,14 @@
<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 %}">
<div class="search-input-group">
<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">
Expand Down
Loading