Commit 75e00375 authored by Agami4's avatar Agami4 Committed by Kingdutch
Browse files

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

parent df70f3b9
......@@ -53,6 +53,7 @@
{{ date }}
{% if visibility_icon and visibility_label %}
<svg class="margin-left-s icon-visibility">
<title>{% trans %} Visibility {% endtrans %}</title>
<use xlink:href="#icon-{{ visibility_icon }}"></use>
</svg>
<strong>{{ visibility_label }}</strong>
......
......@@ -49,7 +49,7 @@
{% if content.links.search_block is defined %}
<div class="navbar__open-search-control">
<a href="{{ '/search/all' }}" class="navbar__open-search-block" rel="search" title="{{ 'Click to open search box'|t }}">
<svg class="navbar-nav__icon navbar-nav__icon--search">
<svg class="navbar-nav__icon navbar-nav__icon--search" aria-hidden="true">
<title>{{ 'Search'|t }}</title>
<use xlink:href="#icon-search"></use>
</svg>
......
......@@ -49,8 +49,9 @@
<div{{ attributes }} data-class="exposed-filter-block">
<div class="btn--offcanvas-trigger">
<a href="#block-filter" class="btn btn-default btn-raised ">
<svg class="btn-icon">
<a href="#block-filter" class="btn btn-default btn-raised" title="{{ 'Click to open filter'|t }}">
<svg class="btn-icon" aria-hidden="true">
<title>{% trans %} Open filter {% endtrans %}</title>
<use xlink:href="#icon-filter_list"></use>
</svg>
{{ label }}
......@@ -66,9 +67,9 @@
{{ title_suffix }}
<div class="offcanvas-tools">
<a href="#" class="btn btn-icon-toggle pull-right">
<svg class="pull-left btn-icon icon-black">
<title>Close</title>
<a href="#" class="btn btn-icon-toggle pull-right" title="{{ 'Click to close search box'|t }}">
<svg class="pull-left btn-icon icon-black" aria-hidden="true">
<title>{% trans %} Close filter {% endtrans %}</title>
<use xlink:href="#icon-close"></use>
</svg>
</a>
......
......@@ -18,9 +18,8 @@
{% if comment_attachments_count %}
<div class="attachments">
<svg class="icon-gray">
<title>{% trans %}Attachments{% endtrans %}</title>
<title>{% trans %}Total amount of attachments{% endtrans %}</title>
<use xlink:href="#icon-attachment"></use>
</svg>
{% trans %}
......@@ -36,9 +35,10 @@
{{ content.like_and_dislike }}
{% if comment_count > 0 %}
<a href="{{ comment_url }}" class="badge badge--pill badge--post">
<a href="{{ comment_url }}" class="badge badge--pill badge--post" 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">
......
......@@ -17,14 +17,19 @@
*/
#}
<details{{ attributes }}>
{%- if title -%}
<summary{{ summary_attributes.addClass('btn btn-link btn-flat--gray') }}>{{ title }}
<svg class="details__open-icon" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg class="details__close-icon" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
{%- if title -%}
<summary{{ summary_attributes.addClass('btn btn-link btn-flat--gray') }}>
{{ title }}
<svg aria-hidden="true" class="details__open-icon" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<title>{% trans %}Collapse in{% endtrans %}</title>
<path d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
<svg aria-hidden="true" class="details__close-icon" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
<title>{% trans %}Collapse out{% endtrans %}</title>
<path d="M12 8l-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
</summary>
{%- endif -%}
{{ errors }}
{{ description }}
{{ children }}
{{ value }}
{%- endif -%}
{{ errors }}
{{ description }}
{{ children }}
{{ value }}
</details>
......@@ -6,7 +6,8 @@
{% block input %}
<button{{ attributes.addClass(classes) }}>
<span class="label">{{ label }}</span>
<svg class="btn-icon">
<svg class="btn-icon" aria-hidden="true">
<title>{% trans %} Send comment {% endtrans %}</title>
<use xlink:href="#icon-send"></use>
</svg>
......
......@@ -44,8 +44,9 @@
{% if links['comment-edit'] or links['comment-delete'] or links.report %}
<div class="comment__actions pull-right">
<button type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" class="btn btn-icon-toggle dropdown-toggle" aria-label="{{ 'More options'|t }}">
<svg class="btn-icon icon-gray">
<button type="button" data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" class="btn btn-icon-toggle dropdown-toggle" title="{{ 'More options'|t }}">
<svg class="btn-icon icon-gray" aria-hidden="true">
<title>{{ 'More options'|t }}</title>
<use xlink:href="#icon-expand_more"></use>
</svg>
</button>
......
......@@ -38,8 +38,8 @@
{% if in_post %}
{# Render a "fake" remove button that triggers the actual (hidden) remove button. #}
<div class="hidden">{{ data.remove_button }}</div>
<button type="button" id="post-photo-remove" class="btn--post-remove-image">
<svg class="btn-icon">
<button type="button" id="post-photo-remove" class="btn--post-remove-image" title="{% trans %}Remove image{% endtrans %}">
<svg class="btn-icon" aria-hidden="true">
<title>{% trans %}Remove image{% endtrans %}</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use>
</svg>
......@@ -61,6 +61,7 @@
</div>
<button type="button" id="post-photo-add" class="btn btn-default">
<svg class="btn-icon" aria-hidden="true">
<title>{% trans %}Add image{% endtrans %}</title>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-plus"></use>
</svg>
<span>
......
......@@ -13,7 +13,7 @@
<div{{ attributes.addClass('dropdown field--name-field-post-visibility') }}>
{# See PostForm.php we set edit_mode to true so people can't actually change the dropdown button for edit mode. #}
<button id="post-visibility" type="button" {% if edit_mode %}disabled{% endif %} data-toggle="dropdown" aria-expanded="false" aria-haspopup="true" class="btn btn-default dropdown-toggle">
<svg class="icon-small">
<svg class="icon-small" aria-hidden="true">
<use class="btnicon" xlink:href="#icon-{{ selected_icon }}"></use>
</svg>
<span class="text">{{ selected }} </span>
......
......@@ -17,7 +17,7 @@
*/
#}
<label{{ attributes.removeAttribute('data-original-title', 'data-toggle')}} class="block">
<svg class="icon-small">
<svg class="icon-small" aria-hidden="true">
<use xlink:href="#icon-{{ icon }}"></use>
</svg>
<span>{{ title }}</span>
......
......@@ -32,7 +32,7 @@
{%- if title is not empty -%}
<label{{ attributes.addClass(classes) }}>
{%- if icon is not empty -%}
<svg class="icon-small">
<svg class="icon-small" aria-hidden="true">
<use xlink:href="#icon-{{ icon }}"></use>
</svg>
<span>{{ title }}</span>
......
......@@ -42,9 +42,9 @@
<form{{ attributes.addClass('search-take-over') }}>
<div class="form-group">
<button class="btn--close-search-take-over" type="button">
<svg class="icon-search-form-close">
<title>{% trans %}Close{% endtrans %}</title>
<button class="btn--close-search-take-over" type="button" title="{% trans %}Close search window{% endtrans %}">
<svg class="icon-search-form-close" aria-hidden="true">
<title>{% trans %}Close search window{% endtrans %}</title>
<use xlink:href="#icon-close"></use>
</svg>
</button>
......
......@@ -39,6 +39,7 @@
{% if addsearchicon %}
<span class="search-icon">
<svg>
<title>{% trans %} Search {% endtrans %}</title>
<use xlink:href="#icon-search"></use>
</svg>
</span>
......
......@@ -36,8 +36,8 @@
<div class="hero__bgimage-overlay"></div>
{% if group_edit_url %}
<div class="hero-action-button">
<a href="{{ group_edit_url }}" title="{% trans %}Edit group{% endtrans %}" class="btn btn-default btn-floating">
<svg class="icon-gray icon-medium">
<a href="{{ group_edit_url }}" title="{% trans %}Edit group{% endtrans %}" class="btn btn-default btn-floating">
<svg class="icon-gray icon-medium" aria-hidden="true">
<title>{% trans %}Edit group{% endtrans %}</title>
<use xlink:href="#icon-edit"></use>
</svg>
......@@ -48,11 +48,13 @@
<header class="page-title">
<h1>
{% if closed_group_lock %}
<svg class="icon-white icon-medium">
<svg class="icon-white icon-medium" aria-hidden="true">
<title>{% trans %} Closed group {% endtrans %}</title>
<use xlink:href="#icon-lock"></use>
</svg>
{% elseif secret_group_shield %}
<svg class="icon-white icon-medium">
<svg class="icon-white icon-medium" aria-hidden="true">
<title>{% trans %} Secret group {% endtrans %}</title>
<use xlink:href="#icon-shield"></use>
</svg>
{% endif %}
......@@ -74,6 +76,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 %}
......
{% extends "node--small-teaser.html.twig" %}
{% block teaser_image %}
<div class="teaser--small__media" aria-hidden="true">
<div class="teaser--small__media">
{% if content['field_group_image'] | render | striptags('<img>') is not empty %}
{{ content['field_group_image'] }}
{% else %}
<svg class="teaser--small__type-icon">
<title>{{- group.bundle|clean_class|capitalize -}}</title>
<title>{% trans %}Group{% endtrans %}</title>
<use xlink:href="#icon-group"></use>
</svg>
{% endif %}
......@@ -16,11 +16,13 @@
{% block extra_text %}
<div class="teaser--small__meta">
{% 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 %}
......
......@@ -52,15 +52,16 @@
<div{{ attributes.addClass(classes) }}>
<div class='teaser__image' aria-hidden="true">
<div class='teaser__image'>
{% block card_image %}
{{ content.field_group_image }}
{% endblock %}
{% block card_teaser_type %}
<a href="{{ url }}">
<a href="{{ url }}" title="{% trans %}Group: &nbsp; {{- label|render|striptags|trim -}}{% endtrans %}" aria-hidden="true">
<div class="teaser__teaser-type">
<svg class="teaser__teaser-type-icon">
<title id="group-{{ group.id.value }}">{% trans %}Group: &nbsp; {{- label|render|striptags|trim -}}{% 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 %}
......@@ -94,21 +97,23 @@
{% block card_body %}
<div class="teaser__content-line">
<svg class="teaser__content-type-icon" aria-hidden="true" title="{% trans %}Group type{% endtrans %}">
<svg class="teaser__content-type-icon" aria-hidden="true">
<title>{% trans %}Type of group{% endtrans %}</title>
<use xlink:href="#icon-label"></use>
</svg>
<span class="teaser__content-text">
<span class="sr-only">{% trans %}The group type is{% endtrans %} </span>
<span class="sr-only">{% trans %}The group type is{% endtrans %}</span>
{{ group_type }}
</span>
</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 %}">
<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>
<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>
......@@ -127,7 +132,8 @@
{% if group_members is not empty %}
<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" aria-hidden="true">
<title>{% trans %}Number of group members{% endtrans %}</title>
<use xlink:href="#icon-group"></use>
</svg>
<span class="badge__label">
......
......@@ -20,15 +20,16 @@
{% for type, icon in icons %}
{% if type == 'dislike' %}
<div class="vote-dislike type-{{ entity_type }}" id="dislike-container-{{ entity_type }}-{{ entity_id }}">
<a {{ icon.attributes }}>{{ icon.label }}</a>
<a {{ icon.attributes }} title="{% trans %} Number of likes {% endtrans %}">{{ icon.label }}</a>
<span class="count">{{ icon.count }}</span>
</div>
{% endif %}
{% if type == 'like' %}
<div class="vote-like type-{{ entity_type }}" id="like-container-{{ entity_type }}-{{ entity_id }}">
<a {{ icon.attributes }} >
<svg class="icon-vote">
<a {{ icon.attributes }} title="{% trans %} Number of likes {% endtrans %}">
<svg class="icon-vote" aria-hidden="true">
<title>{% trans %} Total amount of likes {% endtrans %}</title>
<use xlink:href="#icon-like"></use>
</svg>
</a>
......@@ -36,7 +37,7 @@
<div class="vote__count">
{% if logged_in %}
<a class="use-ajax" data-dialog-options='{"title":"{{ modal_title }}","width":"auto"}' data-dialog-type="modal" href="/wholiked/{{ entity_type }}/{{ entity_id }}">
<a class="use-ajax" data-dialog-options='{"title":"{{ modal_title }}","width":"auto"}' data-dialog-type="modal" href="/wholiked/{{ entity_type }}/{{ entity_id }}" title="{% trans %} Number of likes {% endtrans %}">
{% trans %}{{ icon.count }} like {% plural icon.count %} {{ icon.count }} likes{% endtrans %}
</a>
{% else %}
......
......@@ -19,7 +19,7 @@
<li {{ item.attributes }}>
{% if item.url %}
<a href="{{ item.url }}">{{ item.text }}</a>
<svg class="icon-gray icon-small">
<svg class="icon-gray icon-small" aria-hidden="true">
<use xlink:href="#icon-navigate_next"></use>
</svg>
{% else %}
......
......@@ -36,7 +36,8 @@
<li class="dropdown profile not-logged-in">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true" aria-haspopup="true" role="button" title="{% trans %} User menu {% endtrans %}">
<svg class="icon-medium">
<svg class="icon-medium" aria-hidden="true">
<title>{% trans %} User menu {% endtrans %}</title>
<use xlink:href="#icon-account_circle"></use>
</svg>
<span class="sr-only">{% trans %} User menu {% endtrans %}</span>
......
......@@ -43,6 +43,7 @@
{% if prev_url %}
<a class="pager__item pager__item--previous btn btn-flat btn-iconized" href="{{ prev_url }}" rel="prev" title="{{ 'Go to previous page'|t }}" role="button">
<svg class="icon-inline icon-navigate_before" aria-hidden="true">
<title>{% trans %} Previous page {% endtrans %}</title>
<use xlink:href="#icon-navigate_before"></use>
</svg>
<span>{{ prev_title }}</span>
......@@ -51,6 +52,7 @@
{% if next_url %}
<a class="pager__item pager__item--next btn btn-flat btn-iconized" href="{{ next_url }}" rel="next" title="{{ 'Go to next page'|t }}" role="button">
<svg class="icon-inline icon-navigate_next" aria-hidden="true">
<title>{% trans %} Next page {% endtrans %}</title>
<use xlink:href="#icon-navigate_next"></use>
</svg>
<span>{{ next_title }}</span>
......
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