From a2a6f6dcab431d4d7675df6816fb6315694539ba Mon Sep 17 00:00:00 2001
From: orangemug <info@orangemug.co.uk>
Date: Sat, 19 May 2018 08:23:41 +0100
Subject: [PATCH] Added aria-label to public styles, also fixed button to
 reserve space in DOM (fixes #245)

---
 src/components/Button.jsx           |  2 ++
 src/components/modals/OpenModal.jsx | 10 ++++++----
 src/styles/_modal.scss              |  4 ++++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Button.jsx b/src/components/Button.jsx
index 0815368..e769007 100644
--- a/src/components/Button.jsx
+++ b/src/components/Button.jsx
@@ -5,6 +5,7 @@ import classnames from 'classnames'
 class Button extends React.Component {
   static propTypes = {
     "data-wd-key": PropTypes.string,
+    "aria-label": PropTypes.string,
     onClick: PropTypes.func,
     style: PropTypes.object,
     className: PropTypes.string,
@@ -14,6 +15,7 @@ class Button extends React.Component {
   render() {
     return <button
       onClick={this.props.onClick}
+      aria-label={this.props["aria-label"]}
       className={classnames("maputnik-button", this.props.className)}
       data-wd-key={this.props["data-wd-key"]}
       style={this.props.style}>
diff --git a/src/components/modals/OpenModal.jsx b/src/components/modals/OpenModal.jsx
index 4ce76f5..64df02f 100644
--- a/src/components/modals/OpenModal.jsx
+++ b/src/components/modals/OpenModal.jsx
@@ -23,6 +23,7 @@ class PublicStyle extends React.Component {
     return <div className="maputnik-public-style">
       <Button
         className="maputnik-public-style-button"
+        aria-label={this.props.title}
         onClick={() => this.props.onSelect(this.props.url)}
       >
         <header className="maputnik-public-style-header">
@@ -30,11 +31,12 @@ class PublicStyle extends React.Component {
           <span className="maputnik-space" />
           <AddIcon />
         </header>
-        <img
+        <div
           className="maputnik-public-style-thumbnail"
-          src={this.props.thumbnailUrl}
-          alt={this.props.title}
-        />
+          style={{
+            backgroundImage: `url(${this.props.thumbnailUrl})`
+          }}
+        ></div>
       </Button>
     </div>
   }
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 883b151..4fe3acf 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -85,6 +85,7 @@
   background-color: $color-gray;
   padding: $margin-3;
   display: block;
+  width: 100%;
 
   &:hover {
     background-color: $color-midgray;
@@ -99,6 +100,9 @@
   display: block;
   margin-top: $margin-2;
   width: 100%;
+  padding-top: calc(400 / 600 * 100%);
+  background-size: cover;
+  background-color: $color-midgray;
 }
 
 .maputnik-add-layer {