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 ...@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
{{ category.name | capitalize | trans }} {{ category.name | capitalize | trans }}
</a> </a>
{% if category.icon is not null %} {% 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 %} {% if lazy %}
loading="lazy" loading="lazy"
{% endif %} {% endif %}
...@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later ...@@ -30,7 +30,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
{% for application in category.applications %} {% 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="app text-center col-12 col-sm-6 col-md-4 col-lg-3 p-2">
<div class="p-3 h-100"> <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 }) }}"> <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) }}" <img width="48" height="48" src="{{ asset('icons/' ~ application.icon) }}"
loading="lazy" loading="lazy"
...@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later ...@@ -52,7 +52,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
{% for application in category.addons %} {% 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="app text-center col-12 col-sm-6 col-md-4 col-lg-3 p-2">
<div class="p-3 h-100"> <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 }) }}"> <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) }}" <img width="48" height="48" src="{{ asset('icons/' ~ application.icon) }}"
alt="{{ application.name | l10n(locale) }}" title="{{ application.name | l10n(locale) }}"/> alt="{{ application.name | l10n(locale) }}" title="{{ application.name | l10n(locale) }}"/>
......
...@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later ...@@ -23,7 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div class="application-header pt-2 pb-2"> <div class="application-header pt-2 pb-2">
<div class="container d-flex"> <div class="container d-flex">
<img src="{{ asset('icons/' ~ application.icon) }}" alt="{% trans %}%name% Icon{% endtrans %}" <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> <div>
<h1 style="font-size: 1.5rem"> <h1 style="font-size: 1.5rem">
<a href="{{ path('app_main_index', {'_locale': locale}) }}">{% trans %}KDE's Applications{% endtrans %}</a> <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 ...@@ -71,9 +71,9 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div class="container" style="overflow: hidden;"> <div class="container" style="overflow: hidden;">
{% if application.screenshots | length > 1 %} {% 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 --> <!-- 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 %} {% for screenshot in application.screenshots %}
<div class="swiper-slide"> <div class="swiper-slide">
<img src="{{ screenshot.sourceImage }}" <img src="{{ screenshot.sourceImage }}"
...@@ -86,7 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later ...@@ -86,7 +86,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
<div class="swiper-pagination"></div> <div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div> <div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div> <div class="swiper-button-next"></div>
</div> </section>
{% elseif application.screenshots | length == 1 %} {% elseif application.screenshots | length == 1 %}
{% with { screenshot: application.screenshots[0] } %} {% with { screenshot: application.screenshots[0] } %}
<div class="text-center screenshot my-3"> <div class="text-center screenshot my-3">
...@@ -104,7 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later ...@@ -104,7 +104,7 @@ SPDX-License-Identifier: AGPL-3.0-or-later
</div> </div>
<div class="row"> <div class="row">
<div class="col-12 col-sm-4 d-flex flex-column mb-3"> <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"> <img src="{{ asset('assets/plasmadiscover.svg') }}" alt="logo discover" class="img-fluid" width="100">
</a> </a>
<h2 class="align-self-center">Linux</h2> <h2 class="align-self-center">Linux</h2>
...@@ -119,7 +119,7 @@ AppStream application stores. You can also use your distribution's package manag ...@@ -119,7 +119,7 @@ AppStream application stores. You can also use your distribution's package manag
</div> </div>
{% if application.windowsStoreLink %} {% if application.windowsStoreLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3"> <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 %}" <img src="{{ asset('assets/get-it-from-ms.png') }}" alt="{% trans %}Get it from Microsoft{% endtrans %}"
class="img-fluid align-self-center" width="150"> class="img-fluid align-self-center" width="150">
</a> </a>
...@@ -132,7 +132,7 @@ AppStream application stores. You can also use your distribution's package manag ...@@ -132,7 +132,7 @@ AppStream application stores. You can also use your distribution's package manag
{% endif %} {% endif %}
{% if application.fDroidLink %} {% if application.fDroidLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3"> <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" <img src="https://fdroid.gitlab.io/artwork/badge/get-it-on.png"
alt="{% trans %}Get it from F-Droid{% endtrans %}" alt="{% trans %}Get it from F-Droid{% endtrans %}"
class="img-fluid align-self-center" style="max-height: 80px"> 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 ...@@ -146,7 +146,7 @@ AppStream application stores. You can also use your distribution's package manag
{% endif %} {% endif %}
{% if application.googlePlayLink %} {% if application.googlePlayLink %}
<div class="col-12 col-sm-4 d-flex flex-column mb-3"> <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" <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"> class="img-fluid align-self-center" style="max-height: 80px">
</a> </a>
......
...@@ -14,22 +14,39 @@ SPDX-License-Identifier: AGPL-3.0-or-later ...@@ -14,22 +14,39 @@ SPDX-License-Identifier: AGPL-3.0-or-later
{% block body %} {% block body %}
<main class="container"> <main class="container">
<h1>{{ block('title') }}</h1> <h1>{{ block('title') }}</h1>
<p> <nav class="mb-2" aria-label="{% trans %}Language selector{% endtrans %}">
{% for translation in translations %} <ul class="list-inline">
<a href="{{ path('app_main_index', {'_locale': translation}) }}">{{ translation | language_name(translation) | capitalize}}</a> <li class="list-inline-item">
{% if not loop.last %} {% if locale == "en" %}
| <span aria-label="{% trans %}Selected language: English{% endtrans %}">English</span>
{% endif %} {% else %}
{% endfor %} <a href="{{ path('app_main_index', {'_locale': "en"}) }}">English</a>
</p> {% 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 %}
</ul>
</nav>
<p>{{ block('description') }}</p> <p>{{ block('description') }}</p>
<div class="form-group"> <div class="form-group">
<label for="search" class="sr-only">Search</label> <label for="search" class="sr-only">{% trans %}Search applications{% endtrans %}</label>
<input type="email" class="form-control" id="search" placeholder="{% trans %}Search...{% endtrans %}"> <input role="search" type="email" class="form-control" id="search" placeholder="{% trans %}Search...{% endtrans %}">
</div> </div>
{% for category in categories %} {% 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