diff --git a/packages/venia-concept/src/components/CategoryList/categoryTile.css b/packages/venia-concept/src/components/CategoryList/categoryTile.css
index 4bc507911c..6b6e8aab83 100644
--- a/packages/venia-concept/src/components/CategoryList/categoryTile.css
+++ b/packages/venia-concept/src/components/CategoryList/categoryTile.css
@@ -6,22 +6,21 @@
}
.imageWrapper {
+ background-image: var(--venia-image);
+ background-position: 50% 50%;
+ background-size: cover;
border-radius: 50%;
- border: 1px solid rgb(var(--venia-border));
+ box-shadow: 0 0 0 1px rgb(var(--venia-border));
display: block;
height: 5rem;
margin: 0 auto 1rem auto;
- overflow: hidden;
- padding: 0.1rem;
width: 5rem;
}
.image {
- border-radius: 50%;
- height: auto;
- max-height: 100%;
- max-width: 100%;
- width: auto;
+ height: 100%;
+ opacity: 0;
+ width: 100%;
}
.name {
diff --git a/packages/venia-concept/src/components/CategoryList/categoryTile.js b/packages/venia-concept/src/components/CategoryList/categoryTile.js
index 6c50370698..543198f5a5 100644
--- a/packages/venia-concept/src/components/CategoryList/categoryTile.js
+++ b/packages/venia-concept/src/components/CategoryList/categoryTile.js
@@ -1,12 +1,13 @@
import React, { Component } from 'react';
import { arrayOf, string, shape } from 'prop-types';
import { Link } from 'react-router-dom';
+
import classify from 'src/classify';
-import defaultClasses from './categoryTile.css';
import {
makeCategoryMediaPath,
makeProductMediaPath
} from 'src/util/makeMediaPath';
+import defaultClasses from './categoryTile.css';
// TODO: get categoryUrlSuffix from graphql storeOptions when it is ready
const categoryUrlSuffix = '.html';
@@ -32,7 +33,8 @@ class CategoryTile extends Component {
name: string
}).isRequired
};
- get previewImage() {
+
+ get imagePath() {
const { image, productImagePreview } = this.props.item;
const previewProduct = productImagePreview.items[0];
if (image) {
@@ -41,22 +43,28 @@ class CategoryTile extends Component {
return makeProductMediaPath(previewProduct.small_image);
}
}
+
render() {
- const { classes, item } = this.props;
- const imagePath = this.previewImage;
+ const { imagePath, props } = this;
+ const { classes, item } = props;
+
+ // interpolation doesn't work inside `url()` for legacy reasons
+ // so a custom property should wrap its value in `url()`
+ const imageUrl = imagePath ? `url(${imagePath})` : 'none';
+ const style = { '--venia-image': imageUrl };
+
+ // render an actual image element for accessibility
+ const imagePreview = imagePath ? (
+
+ ) : null;
+
return (
-
- {imagePath && (
-
- )}
+
+ {imagePreview}
{item.name}