From 72b77da3aaf3761d3f53a33d319de7ad0f85c4e6 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Mon, 8 Jan 2018 16:33:35 +0000
Subject: [PATCH] adding aria-roles to buttons and adding modifier that will
center any svgs within buttons
---
opentech/static_src/src/sass/components/_button.scss | 5 +++++
opentech/templates/base.html | 10 +++++-----
2 files changed, 10 insertions(+), 5 deletions(-)
diff --git a/opentech/static_src/src/sass/components/_button.scss b/opentech/static_src/src/sass/components/_button.scss
index 8b753175c..e489246da 100644
--- a/opentech/static_src/src/sass/components/_button.scss
+++ b/opentech/static_src/src/sass/components/_button.scss
@@ -13,6 +13,11 @@
margin-left: 20px;
}
+ &--contains-icons {
+ display: flex;
+ align-items: center;
+ }
+
// cannot conform to BEM here in order to be able to override google button styles
&--google-translate {
display: none;
diff --git a/opentech/templates/base.html b/opentech/templates/base.html
index 7a83d3948..1a30ece69 100644
--- a/opentech/templates/base.html
+++ b/opentech/templates/base.html
@@ -82,11 +82,11 @@
</a>
<div class="header__inner header__inner--mobile-buttons">
- <button class="button button--left-space js-search-toggle">
+ <button class="button js-search-toggle" aria-haspopup="true">
<svg class="header__icon header__icon--open-search header__icon--open-search-menu-closed icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
<svg class="header__icon header__icon--close-search header__icon--close-search-menu-closed icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
</button>
- <button class="button js-mobile-menu-toggle" aria-haspopup="true" >
+ <button class="button button--left-space js-mobile-menu-toggle" aria-haspopup="true">
<svg class="icon icon--mobile-menu"><use xlink:href="#mobile-menu-toggle"></use></svg>
</button>
</div>
@@ -94,7 +94,7 @@
<section class="header__menus header__menus--desktop">
{% primarynav %}
- <button class="button button--left-space js-search-toggle">
+ <button class="button button--contains-icons button--left-space js-search-toggle" aria-haspopup="true">
<svg class="header__icon header__icon--open-search icon"><use xlink:href="#magnifying-glass"></use></svg>
<svg class="header__icon header__icon--close-search icon"><use xlink:href="#cross"></use></svg>
</button>
@@ -106,11 +106,11 @@
<svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
</a>
<div class="header__inner header__inner--mobile-buttons">
- <button class="button js-search-toggle">
+ <button class="button js-search-toggle" aria-haspopup="true">
<svg class="header__icon header__icon--open-search header__icon--open-search-menu-open icon icon--mobile-menu"><use xlink:href="#magnifying-glass"></use></svg>
<svg class="header__icon header__icon--close-search header__icon--close-search-menu-open icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
</button>
- <button class="button js-mobile-menu-close">
+ <button class="button button--left-space js-mobile-menu-close">
<svg class="header__icon header__icon--cross icon icon--mobile-menu"><use xlink:href="#cross"></use></svg>
</button>
</div>
--
GitLab