Commit 874a2b09 authored by catch's avatar catch
Browse files

Issue #3452724 by finnsky, m4olivei, plopesc, Gauravmahlawat, ckrina, catch,... 

Issue #3452724 by finnsky, m4olivei, plopesc, Gauravmahlawat, ckrina, catch, katannshaw, VladimirAus, rkoller, mherchel, kentr, florenttorregrosa, joelpittet, andrewfarq: Navigation side bar and top bar should have appropriate aria labels
parent 03798f64

core/modules/navigation/css/components/admin-toolbar.css

+0 −3
Original line number Diff line number Diff line
@@ -212,9 +212,6 @@ body { 
    padding-block-end: 0;

  }

}

.admin-toolbar__item {

  flex: 1 0 100%;

}

.admin-toolbar__logo {

  display: inline-flex;

  overflow: hidden;

core/modules/navigation/css/components/admin-toolbar.pcss.css

+0 −4
Original line number Diff line number Diff line
@@ -219,10 +219,6 @@ body { 
  }

}



.admin-toolbar__item {

  flex: 1 0 100%;

}



.admin-toolbar__logo {

  display: inline-flex;

  overflow: hidden;

core/modules/navigation/layouts/navigation.html.twig

+22 −12
Original line number Diff line number Diff line
@@ -19,7 +19,10 @@ 
#}

{% set control_bar_attributes = create_attribute() %}



<div {{ control_bar_attributes.addClass('admin-toolbar-control-bar').setAttribute('data-drupal-admin-styles', '') }}>

<div{{ control_bar_attributes

  .addClass('admin-toolbar-control-bar')

  .setAttribute('data-drupal-admin-styles', '')

}}>

  <div class="admin-toolbar-control-bar__content">

    {% include 'navigation:toolbar-button' with {

      attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': 'admin-toolbar', 'type': 'button'}),
@@ -33,17 +36,22 @@ 
  </div>

</div>



<aside

  {{ attributes.addClass('admin-toolbar').setAttribute('id', 'admin-toolbar').setAttribute('data-drupal-admin-styles', true) }}

>

<aside{{ attributes

  .addClass('admin-toolbar')

  .setAttribute('id', 'admin-toolbar')

  .setAttribute('data-drupal-admin-styles', true)

  .setAttribute('role', 'presentation')

}}>

  {# This lil' div will get the Drupal.displace() attributes added to it via JS. #}

  <div class="admin-toolbar__displace-placeholder"></div>



  <div class="admin-toolbar__scroll-wrapper">

  <nav class="admin-toolbar__scroll-wrapper" aria-label="{{ 'Administrative sidebar'|t }}">

    {% set title_menu = 'admin-toolbar-title'|clean_unique_id %}

    {# @todo - We should get rid of this ID below. #}

    <nav {{ region_attributes.content.setAttribute('id', 'menu-builder').addClass('admin-toolbar__content').setAttribute('aria-labelledby', title_menu) }}>

      <h3 id="{{ title_menu }}" class="visually-hidden">{{ 'Administrative toolbar content'|t }}</h3>

    <div{{ region_attributes.content

      .setAttribute('id', 'menu-builder')

      .addClass('admin-toolbar__content')

    }}>

      {# @todo - Needs to be placed here so we can have the header footer on mobile. #}

      <div class="admin-toolbar__header">

        {% if not settings.hide_logo %}
@@ -73,18 +81,20 @@ 


      {{ content.content_top }}

      {{ content.content }}

    </nav>

    </div>



    {% set title_menu_footer = 'admin-toolbar-footer'|clean_unique_id %}

    <nav {{ region_attributes.footer.setAttribute('id', 'menu-footer').addClass('admin-toolbar__footer').setAttribute('aria-labelledby', title_menu_footer) }}>

      <h3 id="{{ title_menu_footer }}" class="visually-hidden">{{ 'Administrative toolbar footer'|t }}</h3>

    <div{{ region_attributes.footer

      .setAttribute('id', 'menu-footer')

      .addClass('admin-toolbar__footer')

    }}>

      {{ content.footer }}

      <button aria-controls="admin-toolbar" class="admin-toolbar__expand-button" type="button">

        {{ icon('navigation', 'chevron', { class: 'admin-toolbar__expand-button-chevron', size: 16 }) }}

        <span class="visually-hidden" data-toolbar-text>{{ 'Collapse sidebar'|t }}</span>

      </button>

    </nav>

    </div>

  </nav>

</aside>

<div class="admin-toolbar-overlay" aria-controls="admin-toolbar" data-drupal-admin-styles></div>

<script>

core/modules/navigation/templates/block--navigation.html.twig

+10 −2
Original line number Diff line number Diff line
@@ -30,8 +30,16 @@ 
#}

<div{{ attributes.addClass('toolbar-block') }}>

  {{ title_prefix }}

  {% if label %}

    <h2{{ title_attributes.addClass('toolbar-block__title').setAttribute('data-drupal-tooltip', label).setAttribute('data-drupal-tooltip-class', 'toolbar-block__title-tooltip') }}>{{ label }}</h2>

  {% if configuration.label_display %}

    <h2{{ title_attributes

      .addClass('toolbar-block__title')

      .setAttribute('data-drupal-tooltip', configuration.label)

      .setAttribute('data-drupal-tooltip-class', 'toolbar-block__title-tooltip')

    }}>{{ configuration.label }}</h2>

  {% else %}

    <h2{{ title_attributes

      .addClass('visually-hidden', 'focusable')

    }}>{{ configuration.label }}</h2>

  {% endif %}

  {{ title_suffix }}

  {% block content %}

core/modules/navigation/templates/navigation-menu.html.twig

+3 −6
Original line number Diff line number Diff line 
{% import _self as menus %}

<div class="admin-toolbar__item">

  <h4 class="visually-hidden focusable">{{ title }}</h4>

<ul class="toolbar-block__list">

  {{ menus.menu_items(items, attributes, 0) }}

</ul>

</div>



{% macro menu_items(items, attributes, menu_level) %}

  {% for item in items %}