Add alt field to collection background image

saleor/graphql/product/types.py

@@ -245,19 +245,12 @@ class Meta:
 class Image(graphene.ObjectType):
     url = graphene.String(
         required=True,
-        description='The URL of the image.',
-        size=graphene.Int(description='Size of the image'))
+        description='The URL of the image.')
+    alt = graphene.String(description='Alt text for an image.')
 
     class Meta:
         description = 'Represents an image.'
 
-    def resolve_url(self, info, size=None):
-        if size:
-            url = get_thumbnail(self, size, method='thumbnail')
-        else:
-            url = self.url
-        return info.context.build_absolute_uri(url)
-
 
 class Product(CountableDjangoObjectType):
     url = graphene.String(
@@ -413,16 +406,26 @@ class Collection(CountableDjangoObjectType):
         PrefetchingConnectionField(
             Product, description='List of products in this collection.'),
         prefetch_related=prefetch_products)
-    background_image = graphene.Field(Image)
+    background_image = graphene.Field(
+        Image, size=graphene.Int(description='Size of the image'))
 
     class Meta:
         description = "Represents a collection of products."
-        exclude_fields = ['voucher_set', 'sale_set', 'menuitem_set']
+        exclude_fields = [
+            'voucher_set', 'sale_set', 'menuitem_set', 'background_image_alt']
         interfaces = [relay.Node]
         model = models.Collection
 
-    def resolve_background_image(self, info, **kwargs):
-        return self.background_image or None
+    def resolve_background_image(self, info, size=None, **kwargs):
+        if self.background_image:
+            if size:
+                url = get_thumbnail(
+                    self.background_image, size, method='thumbnail')
+            else:
+                url = self.background_image.url
+            url = info.context.build_absolute_uri(url)
+            return Image(url, self.background_image_alt)
+        return None
 
     def resolve_products(self, info, **kwargs):
         if hasattr(self, 'prefetched_products'):

saleor/product/models.py

@@ -452,6 +452,7 @@ class Collection(SeoModel):
         Product, blank=True, related_name='collections')
     background_image = VersatileImageField(
         upload_to='collection-backgrounds', blank=True, null=True)
+    background_image_alt = models.CharField(max_length=128, blank=True)
     is_published = models.BooleanField(default=False)
     description = models.TextField(blank=True)
 

tests/api/test_collection.py

@@ -323,51 +323,36 @@ def test_remove_products_from_collection(
     query fetchCollection($id: ID!){
         collection(id: $id) {
             name
-            backgroundImage {
+            backgroundImage(size: 120) {
                url
+               alt
             }
         }
     }
 """
 
 
 def test_collection_image_query(user_api_client, collection):
-    query = """
-        query fetchCollection($id: ID!){
-            collection(id: $id) {
-                backgroundImage {
-                   url(size: 120)
-                }
-            }
-        }
-    """
+    alt_text = 'Alt text for an image.'
     image_file, image_name = create_image()
     collection.background_image = image_file
+    collection.background_image_alt = alt_text
     collection.save()
     collection_id = graphene.Node.to_global_id('Collection', collection.pk)
     variables = {'id': collection_id}
-    response = user_api_client.post_graphql(query, variables)
+    response = user_api_client.post_graphql(FETCH_COLLECTION_QUERY, variables)
     content = get_graphql_content(response)
     data = content['data']['collection']
     thumbnail_url = collection.background_image.thumbnail['120x120'].url
     assert thumbnail_url in data['backgroundImage']['url']
+    assert data['backgroundImage']['alt'] == alt_text
 
 
 def test_collection_image_query_without_associated_file(
         user_api_client, collection):
-    query = """
-        query fetchCollection($id: ID!){
-            collection(id: $id) {
-                name
-                backgroundImage {
-                   url
-                }
-            }
-        }
-    """
     collection_id = graphene.Node.to_global_id('Collection', collection.pk)
     variables = {'id': collection_id}
-    response = user_api_client.post_graphql(query, variables)
+    response = user_api_client.post_graphql(FETCH_COLLECTION_QUERY, variables)
     content = get_graphql_content(response)
     data = content['data']['collection']
     assert data['name'] == collection.name