Add alt_text field to image content type

news/700.feature

@@ -0,0 +1,2 @@
+Add alt_text field to image content type. This allows users to manually set the value of alt tag, for usage in automated listings.
+[@cekk, @jackahl]

plone/app/contenttypes/browser/templates/image.pt

@@ -27,7 +27,8 @@
           <figure class="figure">
             <a tal:define="
                  scale context/@@images;
-                 img_tag python:scale.tag('image', scale='large', css_class='figure-img img-fluid');
+                 alt_text context/alt_text|nothing;
+                 img_tag python:scale.tag('image', scale='large', css_class='figure-img img-fluid', alt=alt_text);
                "
                tal:attributes="
                  href string:${context/@@plone_context_state/object_url}/image_view_fullscreen;

plone/app/contenttypes/schema/image.xml

@@ -19,6 +19,19 @@
       <required>False</required>
       <title i18n:translate="">Description</title>
     </field>
+    <field name="alt_text"
+           type="zope.schema.TextLine">
+      <description i18n:translate="label_alt_text_help">
+        Briefly describe the meaning of the image for people using assistive technology like screen readers.
+        This will be used when the image is viewed by itself or in automated contexts like listings.
+        Do not duplicate the Title or Description fields, since those might also be read by screen readers.
+        Alt text should describe what a sighted user sees when looking at the image.
+        This might include text the image contains, or even a description of an abstract pattern.
+        In case your description already sufficiently describes your image leave this field blank.
+      </description>
+      <required>False</required>
+      <title i18n:translate="label_alt_text">Alt Text</title>
+    </field>
     <field marshal:primary="true"
            name="image"
            type="plone.namedfile.field.NamedBlobImage"
@@ -28,3 +41,4 @@
     </field>
   </schema>
 </model>
+

plone/app/contenttypes/tests/test_image.py

@@ -72,7 +72,16 @@ def setUp(self):
         image.title = "My Image"
         image.description = "This is my image."
         image.image = dummy_image()
+
+        self.portal.invokeFactory('Image', 'image-with-alt')
+        image_alt = self.portal['image-with-alt']
+        image_alt.title = 'My Image 2'
+        image_alt.description = 'This is my second image.'
+        image_alt.alt_text = 'An alt text'
+        image.image = dummy_image()
+
         self.image = image
+        self.image_alt = image_alt
         self.request.set("URL", image.absolute_url())
         self.request.set("ACTUAL_URL", image.absolute_url())
         alsoProvides(self.request, IPloneFormLayer)
@@ -85,6 +94,30 @@ def test_image_view(self):
         self.assertTrue("My Image" in view())
         self.assertTrue("This is my image." in view())
 
+    def test_image_view_alt(self):
+        view = self.image_alt.restrictedTraverse('@@view')
+
+        self.assertTrue(view())
+        self.assertEqual(view.request.response.status, 200)
+        self.assertTrue('My Image 2' in view())
+        self.assertTrue('This is my second image.' in view())
+        self.assertTrue('An alt text' in view())
+
+    def test_image_alt_in_listing_view(self):
+        self.image_alt.image = dummy_image(u'image.svg')
+        view = self.portal.restrictedTraverse('@@listing_view')
+        self.assertTrue('An alt text' in view())
+
+    def test_image_alt_in_summary_view(self):
+        self.image_alt.image = dummy_image(u'image.svg')
+        view = self.portal.restrictedTraverse('@@summary_view')
+        self.assertTrue('An alt text' in view())
+
+    def test_image_alt_in_album_view(self):
+        self.image_alt.image = dummy_image(u'image.svg')
+        view = self.portal.restrictedTraverse('@@album_view')
+        self.assertTrue('An alt text' in view())
+
     # XXX: Not working. See ImageFunctionalTest test_image_view_fullscreen
     # Problem seems to be that the image is not properly uploaded.
     #    def test_image_view_fullscreen(self):
@@ -105,6 +138,14 @@ def test_svg_image(self):
             r'<img src="http://nohost/plone/image/@@images/[a-z0-9\-]*.svg" alt="My Image" title="My Image" height="[a-z0-9\-]*" width="[a-z0-9\-]*" />',  # noqa: E501
         )
 
+    def test_svg_image_alt(self):
+        self.image_alt.image = dummy_image(u'image.svg')
+        scale = self.image_alt.restrictedTraverse('@@images')
+        self.assertRegex(
+            scale.scale('image', scale='large').tag(),
+            r'<img src="http://nohost/plone/image-with-alt/@@images/[a-z0-9--]*.svg" alt="An alt text" height="768" width="768" />'  # noqa: E501
+        )
+
 
 class ImageFunctionalTest(unittest.TestCase):
     layer = PLONE_APP_CONTENTTYPES_FUNCTIONAL_TESTING