Commit bc38636e authored by Carl Schwan's avatar Carl Schwan 🚴

Improve accessibility of kde.org/applications

parent bfd24651
Pipeline #26592 passed with stage
in 3 minutes and 9 seconds
......@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
{{ category.name | capitalize | trans }}
</a>
{% if category.icon is not null %}
<img width="36" height="36" src="{{ asset('icons/categories/' ~ category.icon) }}"
<img aria-hidden="true" width="36" height="36" src="{{ asset('icons/categories/' ~ category.icon) }}"
{% if lazy %}
loading="lazy"
{% endif %}
......@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
{% for application in category.applications %}
<div class="app text-center col-12 col-sm-6 col-md-4 col-lg-3 p-2">
<div class="p-3 h-100">
<div>
<div aria-hidden="true">
<a href="{{ path('app_main_application_intl', {'_locale': locale, 'category': category.name | lower, 'application' : application.id }) }}">
<img width="48" height="48" src="{{ asset('icons/' ~ application.icon) }}"
loading="lazy"
......@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
{% for application in category.addons %}
<div class="app text-center col-12 col-sm-6 col-md-4 col-lg-3 p-2">
<div class="p-3 h-100">
<div>
<div aria-hidden="true">
<a href="{{ path('app_main_application_intl', {'_locale': locale, 'category': category.name | lower, 'application' : application.id }) }}">
<img width="48" height="48" src="{{ asset('icons/' ~ application.icon) }}"
alt="{{ application.name | l10n(locale) }}" title="{{ application.name | l10n(locale) }}"/>
......
......@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div class="application-header pt-2 pb-2">
<div class="container d-flex">
<img src="{{ asset('icons/' ~ application.icon) }}" alt="{% trans %}%name% Icon{% endtrans %}"
width="64" height="64" class="mr-2"/>
width="64" height="64" class="mr-2" aria-hidden="true" />
<div>
<h1 style="font-size: 1.5rem">
<a href="{{ path('app_main_index', {'_locale': locale}) }}">{% trans %}KDE's Applications{% endtrans %}</a>
......@@ -71,9 +71,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div class="container" style="overflow: hidden;">
{% if application.screenshots | length > 1 %}
<div class="swiper-container" class="w-100">
<section class="swiper-container" class="w-100" aria-label="{% trans %}Screenshots{% endtrans %} role="list">
<!-- Additional required wrapper -->
<div class="swiper-wrapper d-flex my-3">
<div class="swiper-wrapper d-flex my-3" role="listitem">
{% for screenshot in application.screenshots %}
<div class="swiper-slide">
<img src="{{ screenshot.sourceImage }}"
......@@ -86,7 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</section>
{% elseif application.screenshots | length == 1 %}
{% with { screenshot: application.screenshots[0] } %}
<div class="text-center screenshot my-3">
......@@ -104,7 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</div>
<div class="row">
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="align-self-center" href="appstream://{{ application.appStreamId }}" style="height: 100px">
<a class="align-self-center" href="appstream://{{ application.appStreamId }}" style="height: 100px" aria-hidden="true">
<img src="{{ asset('assets/plasmadiscover.svg') }}" alt="logo discover" class="img-fluid" width="100">
</a>
<h2 class="align-self-center">Linux</h2>
......@@ -119,7 +119,7 @@ AppStream application stores. You can also use your distribution's package manag
</div>
{% if application.windowsStoreLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="d-flex align-self-center" href="{{ application.windowsStoreLink }}" style="height: 100px">
<a class="d-flex align-self-center" href="{{ application.windowsStoreLink }}" style="height: 100px" aria-hidden="true">
<img src="{{ asset('assets/get-it-from-ms.png') }}" alt="{% trans %}Get it from Microsoft{% endtrans %}"
class="img-fluid align-self-center" width="150">
</a>
......@@ -132,7 +132,7 @@ AppStream application stores. You can also use your distribution's package manag
{% endif %}
{% if application.fDroidLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="d-flex align-self-center" href="{{ application.fDroidLink }}" style="height: 100px">
<a class="d-flex align-self-center" href="{{ application.fDroidLink }}" style="height: 100px" aria-hidden="true">
<img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
alt="{% trans %}Get it from F-Droid{% endtrans %}"
class="img-fluid align-self-center" style="max-height: 80px">
......@@ -146,7 +146,7 @@ AppStream application stores. You can also use your distribution's package manag
{% endif %}
{% if application.googlePlayLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3">
<a class="d-flex align-self-center" href="{{ application.googlePlayLink }}" style="height: 100px">
<a class="d-flex align-self-center" href="{{ application.googlePlayLink }}" style="height: 100px" aria-hidden="true">
<img src="{{ asset('assets/get-it-from-google-play.png') }}" alt="Get it from Google Play"
class="img-fluid align-self-center" style="max-height: 80px">
</a>
......
......@@ -16,20 +16,37 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<main class="container">
<h1>{{ block('title') }}</h1>
<p>
<nav class="mb-2" aria-label="{% trans %}Language selector{% endtrans %}">
<ul class="list-inline">
<li class="list-inline-item">
{% if locale == "en" %}
<span aria-label="{% trans %}Selected language: English{% endtrans %}">English</span>
{% else %}
<a href="{{ path('app_main_index', {'_locale': "en"}) }}">English</a>
{% endif %}
<span aria-hidden="true">|</span>
</li>
{% for translation in translations %}
<li class="list-inline-item">
{% if locale == translation %}
{% set lang = translation | language_name(translation) | capitalize %}
<span aria-label="{% trans %}Selected language: %lang%{% endtrans %}">{{ lang }}</span>
{% else %}
<a href="{{ path('app_main_index', {'_locale': translation}) }}">{{ translation | language_name(translation) | capitalize}}</a>
{% endif %}
{% if not loop.last %}
|
<span aria-hidden="true">|</span>
{% endif %}
</li>
{% endfor %}
</p>
</ul>
</nav>
<p>{{ block('description') }}</p>
<div class="form-group">
<label for="search" class="sr-only">Search</label>
<input type="email" class="form-control" id="search" placeholder="{% trans %}Search...{% endtrans %}">
<label for="search" class="sr-only">{% trans %}Search applications{% endtrans %}</label>
<input role="search" type="email" class="form-control" id="search" placeholder="{% trans %}Search...{% endtrans %}">
</div>
{% for category in categories %}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment