Skip to content
Snippets Groups Projects
Commit 5ab7af7c authored by Ivica Puljic's avatar Ivica Puljic
Browse files

Issue #3392074 by pivica: Accessibility problems

parent 9af4863f
No related branches found
No related tags found
No related merge requests found
......@@ -104,7 +104,7 @@ function bs_base_preprocess_html(&$variables) {
*/
function bs_base_preprocess_page(&$variables) {
$variables['route_name'] = \Drupal::routeMatch()->getRouteName();
$variables['main_attributes'] = new Attribute(['role' => 'main', 'class' => ['page__main']]);
$variables['main_attributes'] = new Attribute(['class' => ['page__main']]);
$variables['page_content_attributes'] = new Attribute(['class' => ['page__content', 'content']]);
$variables['page_content_attributes']->addClass($variables['route_name'] === 'entity.node.edit_form' ? 'container-fluid' : 'container');
if (!empty($variables['page']['content_sidebar'])) {
......
......@@ -39,18 +39,21 @@
'menu--' ~ derivative_plugin_id|clean_class,
]
%}
{% set heading_id = attributes.id ~ '-menu'|clean_id %}
<nav role="navigation" aria-labelledby="{{ heading_id }}"{{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
{# Label. If not displayed, we still provide it for screen readers. #}
{% if not configuration.label_display %}
{% set title_attributes = title_attributes.addClass('visually-hidden') %}
{% endif %}
{% if label %}
{% set heading_id = attributes.id ~ '-menu'|clean_id %}
{% set attributes = attributes.setAttribute('aria-labelledby', heading_id) %}
{% set title_attributes = title_attributes.setAttribute('id', heading_id) %}
{% else %}
{% set attributes = attributes.setAttribute('aria-label', configuration.label) %}
{% endif %}
<nav {{ attributes.addClass(classes)|without('role', 'aria-labelledby') }}>
{{ title_prefix }}
<h2{{ title_attributes.setAttribute('id', heading_id).addClass('block__title') }}>{{ configuration.label }}</h2>
{% if label -%}
<h2{{ title_attributes.addClass('block__title') }}>{{ label }}</h2>
{%- endif %}
{{ title_suffix }}
{# Menu. #}
{% block content %}
{#- Menu. -#}
{% block content -%}
{{ content }}
{% endblock %}
{%- endblock %}
</nav>
......@@ -46,7 +46,7 @@
#}
{% block header %}
{% if page.top or page.brand or page.navbar %}
<header role="banner" class="page__header">
<header class="page__header">
<div class="container">
{{ page.top }}
{{ page.brand }}
......@@ -84,7 +84,7 @@
{% endblock %}
{% block footer %}
{% if page.footer or page.footer_second or page.footer_copyright %}
<footer role="contentinfo" class="page__footer">
<footer class="page__footer">
{% if page.footer or page.footer_second %}
<div class="page__footer__content container">
<div class="row">
......
......@@ -10,8 +10,7 @@
{% set item_class = 'breadcrumb__item' %}
{% block breadcrumb %}
{%- if breadcrumb -%}
<nav role="navigation" aria-labelledby="system-breadcrumb">
<h2 id="system-breadcrumb" class="visually-hidden">{{ 'Breadcrumb'|t }}</h2>
<nav aria-label="{{ 'Breadcrumb'|t }}">
<ol class="breadcrumb">
{%- for item in breadcrumb -%}
<li class="{{ item_class }} {{ not item.url ? 'active' }}">
......
......@@ -332,6 +332,7 @@
.dropdown-language .dropdown-header {
margin-top: 0;
line-height: 1.2;
color: #6c757d;
}
......
......@@ -12,6 +12,8 @@
.dropdown-header {
margin-top: 0;
// Set line height to previous h6 element so there is no change in height.
line-height: $headings-line-height;
// Make sure that when dropdown is in header or footer regions too specific
// color rules for heading will not override dropdown color of a header.
color: $dropdown-header-color;
......
......@@ -44,7 +44,7 @@
*/
#}
{% block header %}
<header role="banner" class="page__header">
<header class="page__header">
{% block header_top %}
{% if page.top %}
<div class="page__header__top">
......
......@@ -39,6 +39,7 @@
'data-toggle': 'dropdown',
'aria-haspopup': 'true',
'aria-expanded': 'false',
'aria-label': 'Change website language (current %language)'|t({'%language': active_language_name}, {}),
'title': 'Change website language'|t,
}) %}
{% set dropdown_menu_attributes = create_attribute({
......@@ -53,7 +54,7 @@
{%- block menu -%}
{%- if links -%}
<div {{ dropdown_menu_attributes }}>
<h6 class="dropdown-header">{{ 'Language'|t }}</h6>
<div class="dropdown-header">{{ 'Language'|t }}</div>
{%- for item in links -%}
{%- if item.link -%}
{{ item.link }}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment