[fix] add aria labels to result links - #350

Browse Source
This commit is contained in:
Adam Tauber 2020-06-28 20:40:48 +02:00
parent f9f5974968
commit b51d4ec041
7 changed files with 36 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
searx/templates/oscar/macros.html
View File

@ -8,34 +8,34 @@
<img width="32" height="32" class="favicon" src="{{ url_for('static', filename='themes/oscar/img/icons/' + favicon + '.png') }}" alt="{{ favicon }}" /> <img width="32" height="32" class="favicon" src="{{ url_for('static', filename='themes/oscar/img/icons/' + favicon + '.png') }}" alt="{{ favicon }}" />
{%- endmacro %} {%- endmacro %}
{%- macro result_link(url, title, classes='') -%} {%- macro result_link(url, title, classes='', id='') -%}
<a href="{{ url }}" {% if classes %}class="{{ classes }}" {% endif %}{% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}>{{ title }}</a> <a href="{{ url }}" {% if classes %}class="{{ classes }}" {% endif %}{% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}{% if id %} aria-labelledby="result-{{id}}"{%endif%}>{{ title }}</a>
{%- endmacro -%} {%- endmacro -%}
<!-- Draw result header --> <!-- Draw result header -->
{% macro result_header(result, favicons) -%} {% macro result_header(result, favicons, id) -%}
<h4 class="result_header">{% if result.engine~".png" in favicons %}{{ draw_favicon(result.engine) }} {% endif %}{% if result.url %}{{ result_link(result.url, result.title|safe) }}{% else %}{{ result.title|safe}}{% endif %}</h4> <h4 class="result_header" id="result-{{id}}">{% if result.engine~".png" in favicons %}{{ draw_favicon(result.engine) }} {% endif %}{% if result.url %}{{ result_link(result.url, result.title|safe, id=id) }}{% else %}{{ result.title|safe}}{% endif %}</h4>
{%- endmacro %} {%- endmacro %}
<!-- Draw result sub header --> <!-- Draw result sub header -->
{% macro result_sub_header(result) -%} {% macro result_sub_header(result, id) -%}
{% if result.publishedDate %}<time class="text-muted" datetime="{{ result.pubdate }}" >{{ result.publishedDate }}</time>{% endif %} {% if result.publishedDate %}<time class="text-muted" datetime="{{ result.pubdate }}" >{{ result.publishedDate }}</time>{% endif %}
{% if result.magnetlink %}<small> &bull; {{ result_link(result.magnetlink, icon('magnet') + _('magnet link'), "magnetlink") }}</small>{% endif %} {% if result.magnetlink %}<small> &bull; {{ result_link(result.magnetlink, icon('magnet') + _('magnet link'), "magnetlink", id) }}</small>{% endif %}
{% if result.torrentfile %}<small> &bull; {{ result_link(result.torrentfile, icon('download-alt') + _('torrent file'), "torrentfile") }}</small>{% endif %} {% if result.torrentfile %}<small> &bull; {{ result_link(result.torrentfile, icon('download-alt') + _('torrent file'), "torrentfile", id) }}</small>{% endif %}
{%- endmacro %} {%- endmacro %}
<!-- Draw result footer --> <!-- Draw result footer -->
{% macro result_footer(result) -%} {% macro result_footer(result, id) -%}
<div class="clearfix"></div>{{- "" -}} <div class="clearfix"></div>{{- "" -}}
<div class="pull-right"> <div class="pull-right">
{%- for engine in result.engines -%} {%- for engine in result.engines -%}
<span class="label label-default">{{ engine }}</span> <span class="label label-default">{{ engine }}</span>
{%- endfor -%} {%- endfor -%}
{%- if result.url -%} {%- if result.url -%}
<small>{{ result_link("https://web.archive.org/web/" + result.url, icon('link') + _('cached'), "text-info") }}</small> <small>{{ result_link("https://web.archive.org/web/" + result.url, icon('link') + _('cached'), "text-info", id) }}</small>
{%- endif -%} {%- endif -%}
{%- if proxify -%} {%- if proxify -%}
<small>{{ result_link(proxify(result.url), icon('sort') + _('proxied'), "text-info") }}</small> <small>{{ result_link(proxify(result.url), icon('sort') + _('proxied'), "text-info", id) }}</small>
{%- endif -%} {%- endif -%}
</div> </div>
{%- if result.pretty_url -%} {%- if result.pretty_url -%}
@ -44,16 +44,16 @@
{%- endmacro %} {%- endmacro %}
<!-- Draw result footer --> <!-- Draw result footer -->
{% macro result_footer_rtl(result) -%} {% macro result_footer_rtl(result, id) -%}
<div class="clearfix"></div>{{- "" -}} <div class="clearfix"></div>{{- "" -}}
{% for engine in result.engines -%} {% for engine in result.engines -%}
<span class="label label-default">{{ engine }}</span> <span class="label label-default">{{ engine }}</span>
{%- endfor %} {%- endfor %}
{%- if result.url -%} {%- if result.url -%}
<small>{{ result_link("https://web.archive.org/web/" + result.url, icon('link') + _('cached'), "text-info") }}</small> <small>{{ result_link("https://web.archive.org/web/" + result.url, icon('link') + _('cached'), "text-info", id) }}</small>
{%- endif -%} {%- endif -%}
{% if proxify -%} {% if proxify -%}
<small>{{ result_link(proxify(result.url), icon('sort') + _('proxied'), "text-info") }}</small> <small>{{ result_link(proxify(result.url), icon('sort') + _('proxied'), "text-info", id) }}</small>
{%- endif %} {%- endif %}
{%- if result.pretty_url -%} {%- if result.pretty_url -%}
<div class="external-link">{{ result.pretty_url }}</div> <div class="external-link">{{ result.pretty_url }}</div>

4
searx/templates/oscar/result_templates/code.html
View File

@ -1,11 +1,11 @@
{% from 'oscar/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon %} {% from 'oscar/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon with context%}
{{ result_header(result, favicons) }} {{ result_header(result, favicons) }}
{{ result_sub_header(result) }} {{ result_sub_header(result) }}
{% if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif %} {% if result.content %}<p class="result-content">{{ result.content|safe }}</p>{% endif %}
{% if result.repository %}<p class="result-content">{{ icon('file') }} <a href="{{ result.repository }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}>{{ result.repository }}</a></p>{% endif %} {% if result.repository %}<p class="result-content">{{ icon('file') }} <a href="{{ result.repository }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} aria-labelledby="result-{{loop.index}}">{{ result.repository }}</a></p>{% endif %}
<div dir="ltr"> <div dir="ltr">
{{ result.codelines|code_highlighter(result.code_language)|safe }} {{ result.codelines|code_highlighter(result.code_language)|safe }}

10
searx/templates/oscar/result_templates/default.html
View File

@ -1,10 +1,10 @@
{% from 'oscar/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon with context %} {% from 'oscar/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon with context %}
{{- result_header(result, favicons) -}} {{- result_header(result, favicons, loop.index) -}}
{{- result_sub_header(result) -}} {{- result_sub_header(result, loop.index) -}}
{%- if result.embedded -%} {%- if result.embedded -%}
<small> &bull; <a class="text-info btn-collapse collapsed cursor-pointer media-loader disabled_if_nojs" data-toggle="collapse" data-target="#result-media-{{ index }}" data-btn-text-collapsed="{{ _('show media') }}" data-btn-text-not-collapsed="{{ _('hide media') }}">{{ icon('music') }} {{ _('show media') }}</a></small> <small> &bull; <a class="text-info btn-collapse collapsed cursor-pointer media-loader disabled_if_nojs" data-toggle="collapse" data-target="#result-media-{{ index }}" data-btn-text-collapsed="{{ _('show media') }}" data-btn-text-not-collapsed="{{ _('hide media') }}" aria-labelledby="result-{{loop.index}}">{{ icon('music') }} {{ _('show media') }}</a></small>
{%- endif -%} {%- endif -%}
{%- if result.embedded -%} {%- if result.embedded -%}
@ -25,7 +25,7 @@
{%- endif -%} {%- endif -%}
{%- if rtl -%} {%- if rtl -%}
{{ result_footer_rtl(result) }} {{ result_footer_rtl(result, loop.index) }}
{%- else -%} {%- else -%}
{{ result_footer(result) }} {{ result_footer(result, loop.index) }}
{%- endif -%} {%- endif -%}

4
searx/templates/oscar/result_templates/images.html
View File

@ -1,6 +1,6 @@
{%- from 'oscar/macros.html' import draw_favicon -%} {%- from 'oscar/macros.html' import draw_favicon with context -%}
<a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} data-toggle="modal" data-target="#modal-{{ index }}-{{pageno}}">{{- "" -}} <a href="{{ result.img_src }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %} data-toggle="modal" data-target="#modal-{{ index }}-{{pageno}}" id="result-{{loop.index}}">{{- "" -}}
<img src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}" class="img-thumbnail">{{- "" -}} <img src="{% if result.thumbnail_src %}{{ image_proxify(result.thumbnail_src) }}{% else %}{{ image_proxify(result.img_src) }}{% endif %}" alt="{{ result.title|striptags }}" title="{{ result.title|striptags }}" class="img-thumbnail">{{- "" -}}
</a> </a>
<div class="modal fade" id="modal-{{ index }}-{{ pageno }}" tabindex="-1" role="dialog" aria-hidden="true">{{- "" -}} <div class="modal fade" id="modal-{{ index }}-{{ pageno }}" tabindex="-1" role="dialog" aria-hidden="true">{{- "" -}}

8
searx/templates/oscar/result_templates/map.html
View File

@ -1,7 +1,7 @@
{% from 'oscar/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon %} {% from 'oscar/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon %}
{{ result_header(result, favicons) }} {{ result_header(result, favicons, loop.index) }}
{{ result_sub_header(result) }} {{ result_sub_header(result, loop.index) }}
{% if (result.latitude and result.longitude) or result.boundingbox %} {% if (result.latitude and result.longitude) or result.boundingbox %}
<small> &bull; <a class="text-info btn-collapse collapsed searx_init_map cursor-pointer disabled_if_nojs" data-toggle="collapse" data-target="#result-map-{{ index }}" data-leaflet-target="osm-map-{{ index }}" data-map-lon="{{ result.longitude }}" data-map-lat="{{ result.latitude }}" {% if result.boundingbox %}data-map-boundingbox='{{ result.boundingbox|tojson|safe }}'{% endif %} {% if result.geojson %}data-map-geojson='{{ result.geojson|tojson|safe }}'{% endif %} data-btn-text-collapsed="{{ _('show map') }}" data-btn-text-not-collapsed="{{ _('hide map') }}">{{ icon('globe') }} {{ _('show map') }}</a></small> <small> &bull; <a class="text-info btn-collapse collapsed searx_init_map cursor-pointer disabled_if_nojs" data-toggle="collapse" data-target="#result-map-{{ index }}" data-leaflet-target="osm-map-{{ index }}" data-map-lon="{{ result.longitude }}" data-map-lat="{{ result.latitude }}" {% if result.boundingbox %}data-map-boundingbox='{{ result.boundingbox|tojson|safe }}'{% endif %} {% if result.geojson %}data-map-geojson='{{ result.geojson|tojson|safe }}'{% endif %} data-btn-text-collapsed="{{ _('show map') }}" data-btn-text-not-collapsed="{{ _('hide map') }}">{{ icon('globe') }} {{ _('show map') }}</a></small>
@ -66,7 +66,7 @@
{% endif %} {% endif %}
{% if rtl %} {% if rtl %}
{{ result_footer_rtl(result) }} {{ result_footer_rtl(result, loop.index) }}
{% else %} {% else %}
{{ result_footer(result) }} {{ result_footer(result, loop.index) }}
{% endif %} {% endif %}

8
searx/templates/oscar/result_templates/torrent.html
View File

@ -1,7 +1,7 @@
{% from 'oscar/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon %} {% from 'oscar/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon %}
{{ result_header(result, favicons) }} {{ result_header(result, favicons, loop.index) }}
{{ result_sub_header(result) }} {{ result_sub_header(result, loop.index) }}
{% if result.seed is defined %}<p class="result-content">{{ icon('transfer') }} {{ _('Seeder') }} <span class="badge">{{ result.seed }}</span> &bull; {{ _('Leecher') }} <span class="badge">{{ result.leech }}</span>{% endif %} {% if result.seed is defined %}<p class="result-content">{{ icon('transfer') }} {{ _('Seeder') }} <span class="badge">{{ result.seed }}</span> &bull; {{ _('Leecher') }} <span class="badge">{{ result.leech }}</span>{% endif %}
{% if result.filesize %}<br />{{ icon('floppy-disk') }} {{ _('Filesize') }} {% if result.filesize %}<br />{{ icon('floppy-disk') }} {{ _('Filesize') }}
@ -19,7 +19,7 @@
</p> </p>
{% if rtl %} {% if rtl %}
{{ result_footer_rtl(result) }} {{ result_footer_rtl(result, loop.index) }}
{% else %} {% else %}
{{ result_footer(result) }} {{ result_footer(result, loop.index) }}
{% endif %} {% endif %}

12
searx/templates/oscar/result_templates/videos.html
View File

@ -1,10 +1,10 @@
{% from 'oscar/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon %} {% from 'oscar/macros.html' import result_header, result_sub_header, result_footer, result_footer_rtl, icon %}
{{ result_header(result, favicons) }} {{ result_header(result, favicons, loop.index) }}
{{ result_sub_header(result) }} {{ result_sub_header(result, loop.index) }}
{% if result.embedded %} {% if result.embedded %}
<small> &bull; <a class="text-info btn-collapse collapsed cursor-pointer media-loader disabled_if_nojs" data-toggle="collapse" data-target="#result-video-{{ index }}" data-btn-text-collapsed="{{ _('show video') }}" data-btn-text-not-collapsed="{{ _('hide video') }}">{{ icon('film') }} {{ _('show video') }}</a></small> <small> &bull; <a class="text-info btn-collapse collapsed cursor-pointer media-loader disabled_if_nojs" data-toggle="collapse" data-target="#result-video-{{ index }}" data-btn-text-collapsed="{{ _('show video') }}" data-btn-text-not-collapsed="{{ _('hide video') }}" aria-labelledby="result-{{loop.index}}">{{ icon('film') }} {{ _('show video') }}</a></small>
{% endif %} {% endif %}
{% if result.embedded %} {% if result.embedded %}
@ -15,7 +15,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<a href="{{ result.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}><img class="thumbnail col-xs-6 col-sm-4 col-md-4 result-content" src="{{ image_proxify(result.thumbnail) }}" /></a> <a href="{{ result.url }}" {% if results_on_new_tab %}target="_blank" rel="noopener noreferrer"{% else %}rel="noreferrer"{% endif %}><img class="thumbnail col-xs-6 col-sm-4 col-md-4 result-content" src="{{ image_proxify(result.thumbnail) }}" aria-labelledby="result-{{loop.index}}" /></a>
{% if result.author %}<p class="col-xs-12 col-sm-8 col-md-8 result-content"><b>{{ _('Author') }}</b>: {{ result.author }}</p>{% endif %} {% if result.author %}<p class="col-xs-12 col-sm-8 col-md-8 result-content"><b>{{ _('Author') }}</b>: {{ result.author }}</p>{% endif %}
{% if result.length %}<p class="col-xs-12 col-sm-8 col-md-8 result-content"><b>{{ _('Length') }}</b>: {{ result.length }}</p>{% endif %} {% if result.length %}<p class="col-xs-12 col-sm-8 col-md-8 result-content"><b>{{ _('Length') }}</b>: {{ result.length }}</p>{% endif %}
{% if result.content %}<p class="col-xs-12 col-sm-8 col-md-8 result-content">{{ result.content|safe }}</p>{% endif %} {% if result.content %}<p class="col-xs-12 col-sm-8 col-md-8 result-content">{{ result.content|safe }}</p>{% endif %}
@ -23,7 +23,7 @@
</div> </div>
{% if rtl %} {% if rtl %}
{{ result_footer_rtl(result) }} {{ result_footer_rtl(result, loop.index) }}
{% else %} {% else %}
{{ result_footer(result) }} {{ result_footer(result, loop.index) }}
{% endif %} {% endif %}