Merge pull request #305 from orangemug/feature/public-style-aria-labels

Added aria-label to public styles

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}>

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>
   }

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 {