Commit 7f0ee396 authored by Agami4's avatar Agami4 Committed by Kingdutch
Browse files

Issue #3179167 by agami4, Kingdutch: Add title to the svg icons

parent 35ece4c0
......@@ -35,6 +35,7 @@
<div class="hero-footer__text">
{% if content.field_group_location|render is not empty and content.field_group_address|render is not empty %}
<svg class="hero-footer-icon">
<title>{% trans %}Located at: {% endtrans %}</title>
<use xlink:href="#icon-location"></use>
</svg>
{% endif %}
......
......@@ -61,6 +61,7 @@
<a href="{{ url }}">
<div class="teaser__teaser-type">
<svg class="teaser__teaser-type-icon">
<title>{% trans %}Group{% endtrans %}</title>
{% if group_type_icon %}
<use xlink:href="#{{- group_type_icon -}}"></use>
{% else %}
......@@ -79,11 +80,13 @@
{{ title_prefix }}
<h4{{ title_attributes }} class="teaser__title">
{% if closed_group_lock %}
<svg class="icon-gray icon-small">
<svg class="icon-gray icon-small" aria-hidden="true">
<title>{% trans %}Closed group{% endtrans %}</title>
<use xlink:href="#icon-lock"></use>
</svg>
{% elseif secret_group_shield %}
<svg class="icon-gray icon-small">
<svg class="icon-gray icon-small" aria-hidden="true">
<title>{% trans %}Secret group{% endtrans %}</title>
<use xlink:href="#icon-shield"></use>
</svg>
{% endif %}
......@@ -95,9 +98,10 @@
{% block card_body %}
<div class="teaser__content-line">
{% if group_members is not empty %}
<div class="badge teaser__badge">
<div class="badge teaser__badge">
<span class="badge__container">
<svg class="badge__icon" aria-hidden="true" title="{% trans %}Number of group members{% endtrans %}">
<svg class="badge__icon">
<title>{% trans %}Number of group members{% endtrans %}</title>
<use xlink:href="#icon-group"></use>
</svg>
<span class="badge__label">
......@@ -109,12 +113,13 @@
</div>
{% if content.field_group_location|render or content.field_group_address|render %}
<div class="teaser__content-line">
<svg class="teaser__content-type-icon" aria-hidden="true" title="{% trans %}Event location{% endtrans %}">
<use xlink:href="#icon-location"></use>
</svg>
<svg class="teaser__content-type-icon" aria-hidden="true">
<title>{% trans %}Located at: {% endtrans %}</title>
<use xlink:href="#icon-location"></use>
</svg>
<span class="teaser__content-text">
<span class="sr-only">{% trans %}located at: {% endtrans %} </span>
{{ content.field_group_location }}
<span class="sr-only">{% trans %}located at: {% endtrans %} </span>
{{ content.field_group_location }}
{% if content.field_group_location|render is not empty and content.field_group_address|render is not empty %}
<span class="sr-only">, </span>
<span aria-hidden="true"> &bullet; </span>
......
......@@ -76,8 +76,9 @@
{% extends "node--hero--sky.html.twig" %}
{% block card_prefix %}
<a href="{{ albums }}" class="back-link">
<svg>
<a href="{{ albums }}" class="back-link" title="{% trans %} Back to {{ owner }}'s Albums {% endtrans %}">
<svg aria-hidden="true">
<title>{% trans %}Back to owner's albums{% endtrans %}</title>
<use xlink:href="#icon-navigate_before"></use>
</svg>
{% trans %}{{ owner }}'s Albums{% endtrans %}
......
......@@ -5,9 +5,10 @@
{% block card_actionbar %}
{% if images_count %}
<div class="badge teaser__badge" title="{{ 'Total amount of images'| t }}">
<div class="badge teaser__badge">
<span class="badge__container">
<svg class="badge__icon">
<title>{{ 'Total amount of images'| t }}</title>
<use xlink:href="#icon-image"></use>
</svg>
<span class="badge__label">
......
......@@ -7,10 +7,10 @@
{{ title_prefix.teaser_tag }}
{% if visibility_icon and visibility_label %}
<div class="badge teaser__badge no-padding"
title="{% trans %}The visibility of this content is set to {{ visibility_label }}{% endtrans %} ">
<div class="badge teaser__badge no-padding">
<span class="badge__container">
<svg class="badge__icon">
<title>{% trans %}Visibility: {% endtrans %}</title>
<use xlink:href="#icon-{{ visibility_icon }}"></use>
</svg>
<span class="badge__label text-gray">{{ visibility_label|capitalize }}</span>
......@@ -32,6 +32,7 @@
{% embed "node--teaser__field.html.twig" %}
{%- block field_icon -%} schedule {%- endblock -%}
{%- block svg_title -%} <title> {% trans %}Event schedule{% endtrans %} </title> {%- endblock -%}
{%- block field_value %}
<span class="sr-only">{% trans %}Event date{% endtrans %} </span>
{{ event_date }}
......@@ -41,6 +42,7 @@
{% if content.field_event_location|render %}
{% embed "node--teaser__field.html.twig" %}
{%- block field_icon -%} location {%- endblock -%}
{%- block svg_title -%} <title> {% trans %}Event location{% endtrans %} </title> {%- endblock -%}
{%- block field_value -%}
<span class="sr-only">{% trans %}The event will take place at the{% endtrans %} </span>
{{ content.field_event_location }}
......@@ -65,10 +67,10 @@
{% block card_actionbar %}
{% if comment_count %}
<a href="{{ url }}#section-comments" class="badge teaser__badge"
title="{% trans %}Total amount of comments{% endtrans %}">
<a href="{{ url }}#section-comments" class="badge teaser__badge" title="{% trans %}Total amount of comments{% endtrans %}">
<span class="badge__container">
<svg class="badge__icon" aria-hidden="true">
<title>{% trans %}Total amount of comments{% endtrans %}</title>
<use xlink:href="#icon-comment"></use>
</svg>
<span class="badge__label">{{ comment_count }}</span>
......@@ -77,9 +79,10 @@
{% endif %}
{% if content.enrollments_count is not empty %}
<div class="badge teaser__badge" title="{% trans %}Total amount of enrollments{% endtrans %}">
<div class="badge teaser__badge">
<span class="badge__container">
<svg class="badge__icon" aria-hidden="true">
<svg class="badge__icon">
<title>{% trans %}Total amount of enrollments{% endtrans %}</title>
<use xlink:href="#icon-person"></use>
</svg>
<span class="badge__label">
......
......@@ -12,10 +12,10 @@
{% if visibility_icon and visibility_label %}
&bullet;
<div class="badge badge--large"
title="{% trans %}The visibility of this content is set to {{ visibility_label }}{% endtrans %} ">
<div class="badge badge--large">
<span class="badge__container">
<svg class="badge__icon">
<title>{% trans %}Visibility: {% endtrans %}</title>
<use xlink:href="#icon-{{ visibility_icon }}"></use>
</svg>
<span class="badge__label">&nbsp;</span>
......@@ -52,7 +52,8 @@
<div class="article__special-fields">
<div class="article__special-field">
<svg class="article__special-fields-icon">
<svg class="article__special-fields-icon" aria-hidden="true">
<title>{% trans %}Event date{% endtrans %}</title>
<use xlink:href="#icon-schedule"></use>
</svg>
<span class="sr-only">{% trans %}Event date{% endtrans %}</span>
......@@ -62,6 +63,7 @@
{% if content.field_event_address|render or content.field_event_location|render %}
<div class="article__special-field">
<svg class="article__special-fields-icon">
<title>{% trans %}Event location{% endtrans %}</title>
<use xlink:href="#icon-location"></use>
</svg>
<span class="sr-only">{% trans %}Event location{% endtrans %}</span>
......
......@@ -4,6 +4,7 @@
{% embed "node--teaser__field.html.twig" %}
{%- block field_icon -%} event {%- endblock -%}
{%- block svg_title -%} {% trans %}Event date{% endtrans %} {%- endblock -%}
{%- block field_value %}
<span class="sr-only">{% trans %}Event date{% endtrans %} </span>
{{ event_date }}
......@@ -13,6 +14,7 @@
{% if content.field_event_location|render is not empty %}
{% embed "node--teaser__field.html.twig" %}
{%- block field_icon -%} location {%- endblock -%}
{%- block svg_title -%} {% trans %}The event will take place at the{% endtrans %} {%- endblock -%}
{%- block field_value -%}
<span class="sr-only">{% trans %}The event will take place at the{% endtrans %} </span>
{{ content.field_event_location }}
......@@ -23,6 +25,7 @@
{% if content.group_name %}
{% embed "node--teaser__field.html.twig" %}
{%- block field_icon -%} group {%- endblock -%}
{%- block svg_title -%} {% trans %}This event is posted in{% endtrans %} {%- endblock -%}
{%- block field_value -%}
<span class="sr-only">{% trans %}This event is posted in{% endtrans %} </span>
{{ content.group_name }}
......@@ -30,4 +33,4 @@
{% endembed %}
{% endif %}
{% endblock %}
{% endblock %}
\ No newline at end of file
......@@ -7,10 +7,10 @@
{{ title_prefix.teaser_tag }}
{% if visibility_icon and visibility_label %}
<div class="badge teaser__badge no-padding"
title="{% trans %}The visibility of this content is set to {{ visibility_label }}{% endtrans %}">
<div class="badge teaser__badge no-padding">
<span class="badge__container">
<svg class="badge__icon" aria-hidden="true">
<svg class="badge__icon">
<title>{% trans %} Type of content {% endtrans %}</title>
<use xlink:href="#icon-{{ visibility_icon }}"></use>
</svg>
<span class="sr-only">{% trans %}The visibility of this content is set to {{ visibility_label }}{% endtrans %} </span>
......@@ -34,9 +34,12 @@
{% if display_submitted %}
{% embed "node--teaser__field.html.twig" %}
{%- block field_icon -%} account_circle {%- endblock -%}
{%- block svg_title -%}
<title>{% trans %}Created on{% endtrans %}</title>
{%- endblock -%}
{%- block field_value %}
<div class="teaser__published">
<span class="sr-only">{% trans %}Created on{% endtrans %} </span>
<span class="sr-only">{% trans %}Created on{% endtrans %}</span>
<div class="teaser__published-date">{{ date }} <span aria-hidden="true">&bullet;</span></div>
<span class="sr-only"> {% trans %}by{% endtrans %} </span>
<div class="teaser__published-author">{{ author_name }}</div>
......@@ -55,6 +58,7 @@
title="{% trans %}Total amount of comments{% endtrans %}">
<span class="badge__container">
<svg class="badge__icon" aria-hidden="true">
<title>{% trans %}Total amount of comments{% endtrans %}</title>
<use xlink:href="#icon-comment"></use>
</svg>
<span class="badge__label">{{ comment_count }}</span>
......@@ -63,9 +67,10 @@
{% endif %}
{% if likes_count is not empty %}
<div class="badge teaser__badge" title="{% trans %}Total amount of likes{% endtrans %}">
<div class="badge teaser__badge">
<span class="badge__container">
<svg class="badge__icon" aria-hidden="true">
<svg class="badge__icon">
<title>{% trans %}Total amount of likes{% endtrans %}</title>
<use xlink:href="#icon-like"></use>
</svg>
<span class="badge__label">
......
......@@ -90,7 +90,7 @@
<div class="hero-action-button">
<a href="{{ node_edit_url }}" title="{% trans %}Edit content{% endtrans %}"
class="btn btn-raised btn-default btn-floating">
<svg class="icon-gray icon-medium">
<svg class="icon-gray icon-medium" aria-hidden="true">
<title>{% trans %}Edit content{% endtrans %}</title>
<use xlink:href="#icon-edit"></use>
</svg>
......@@ -129,15 +129,15 @@
{% if visibility_icon and visibility_label %}
&bullet;
<div class="badge badge--large"
title="{% trans %}The visibility of this content is set to {{ visibility_label }}{% endtrans %} ">
<span class="badge__container">
<svg class="badge__icon">
<use xlink:href="#icon-{{ visibility_icon }}"></use>
</svg>
<span class="badge__label">&nbsp;</span>
<span class="badge__label badge__label--description">{{ visibility_label|capitalize }}</span>
</span>
<div class="badge badge--large">
<span class="badge__container">
<svg class="badge__icon">
<title>{% trans %}The visibility of this content is set to {{ visibility_label }}{% endtrans %} </title>
<use xlink:href="#icon-{{ visibility_icon }}"></use>
</svg>
<span class="badge__label">&nbsp;</span>
<span class="badge__label badge__label--description">{{ visibility_label|capitalize }}</span>
</span>
</div>
{% endif %}
......@@ -174,7 +174,8 @@
<a href="{{ url }}#section-comments" class="badge badge--large"
title="{% trans %}Total amount of comments{% endtrans %}">
<span class="badge__container">
<svg class="badge__icon">
<svg class="badge__icon" aria-hidden="true">
<title>{% trans %}Total amount of comments{% endtrans %}</title>
<use xlink:href="#icon-comment"></use>
</svg>
<span class="badge__label">
......@@ -194,17 +195,19 @@
{{ content.like_and_dislike }}
{% if views_count is not empty and views_label %}
<div class="badge badge--large"
title="{% trans %}Total amount of views{% endtrans %}">
<span class="badge__container">
<svg class="badge__icon">
<use xlink:href="#icon-views"></use>
</svg>
<span class="badge__label">
{{ views_count }}
<div class="badge badge--large">
<span class="badge__container">
<svg class="badge__icon">
<title>{% trans %}Total amount of views{% endtrans %}</title>
<use xlink:href="#icon-views"></use>
</svg>
<span class="badge__label">
{{ views_count }}
</span>
<span class="badge__label badge__label--description">
{{ views_label }}
</span>
</span>
<span class="badge__label badge__label--description">{{ views_label }}</span>
</span>
</div>
{% endif %}
</div>
......
......@@ -6,6 +6,7 @@
<div class="teaser__not-icon">
{% embed "node--teaser__field.html.twig" %}
{%- block field_icon -%} account_circle {%- endblock -%}
{%- block svg_title -%} <title>{% trans %}Author name{% endtrans %}</title> {%- endblock -%}
{%- block field_value %}
<div class="teaser__published">
<span class="sr-only">{% trans %}Created on{% endtrans %} </span>
......@@ -21,6 +22,7 @@
{% if content.group_name %}
{% embed "node--teaser__field.html.twig" %}
{%- block field_icon -%} group {%- endblock -%}
{% block svg_title %} <title>{% trans %}This content is posted in{% endtrans %}</title> {%- endblock -%}
{%- block field_value -%}
<span class="sr-only">{% trans %}This content is posted in{% endtrans %} </span>
{{ content.group_name }}
......
......@@ -10,7 +10,7 @@
<div class="hero-action-button">
<a href="{{ profile_edit_url }}" title="{% trans %}Edit profile information{% endtrans %}"
class="btn btn-raised btn-default btn-floating">
<svg class="icon-medium">
<svg class="icon-medium" aria-hidden="true">
<title>{% trans %}Edit profile information{% endtrans %}</title>
<use xlink:href="#icon-edit"></use>
</svg>
......
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