alt text on images

app/activitypub/util.py

@@ -154,7 +154,9 @@ def post_to_activity(post: Post, community: Community):
     if post.type == POST_TYPE_LINK and post.url is not None:
         activity_data["object"]["object"]["attachment"] = {"href": post.url, "type": "Link"}
     if post.image_id is not None:
-        activity_data["object"]["object"]["image"] = {"href": post.image.source_url, "type": "Image"}
+        activity_data["object"]["object"]["image"] = {"href": post.image.view_url(), "type": "Image"}
+        if post.image.alt_text:
+            activity_data["object"]["object"]["image"]['altText'] = post.image.alt_text
     return activity_data
 
 

app/community/forms.py

@@ -50,6 +50,7 @@ class CreatePostForm(FlaskForm):
                                     render_kw={'placeholder': 'Text (optional)'})
     link_url = StringField(_l('URL'), render_kw={'placeholder': 'https://...'})
     image_title = StringField(_l('Title'), validators={Optional(), Length(min=3, max=255)})
+    image_alt_text = StringField(_l('Alt text'), validators={Optional(), Length(min=3, max=255)})
     image_body = TextAreaField(_l('Body'), validators={Optional(), Length(min=3, max=5000)},
                                     render_kw={'placeholder': 'Text (optional)'})
     image_file = FileField(_('Image'))

app/community/util.py

@@ -214,6 +214,8 @@ def save_post(form, post: Post):
         post.body = form.image_body.data
         post.body_html = markdown_to_html(post.body)
         post.type = POST_TYPE_IMAGE
+        alt_text = form.image_alt_text.data if form.image_alt_text.data else form.image_title.data
+        post.image.alt_text = alt_text
         uploaded_file = request.files['image_file']
         if uploaded_file and uploaded_file.filename != '':
             if post.image_id:
@@ -258,7 +260,7 @@ def save_post(form, post: Post):
                 thumbnail_width = img.width
                 thumbnail_height = img.height
 
-                file = File(file_path=final_place, file_name=new_filename + file_ext, alt_text=form.image_title.data,
+                file = File(file_path=final_place, file_name=new_filename + file_ext, alt_text=alt_text,
                             width=img_width, height=img_height, thumbnail_width=thumbnail_width,
                             thumbnail_height=thumbnail_height, thumbnail_path=final_place_thumbnail,
                             source_url=final_place.replace('app/static/', f"https://{current_app.config['SERVER_NAME']}/static/"))

app/post/routes.py

@@ -655,6 +655,7 @@ def post_edit(post_id: int):
                 form.post_type.data = 'image'
                 form.image_title.data = post.title
                 form.image_body.data = post.body
+                form.image_alt_text.data = post.image.alt_text
             form.notify_author.data = post.notify_author
             return render_template('post/post_edit.html', title=_('Edit post'), form=form, post=post,
                                    images_disabled=images_disabled, markdown_editor=True,

app/templates/community/add_post.html

@@ -57,6 +57,8 @@
               <div class="tab-pane fade" id="image-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                   {{ render_field(form.image_title) }}
                   {{ render_field(form.image_file) }}
+                  {{ render_field(form.image_alt_text) }}
+                  <small class="field_hint">{{ _('Describe the image, to help visually impaired people.') }}</small>
                   {{ render_field(form.image_body) }}
                   {% if markdown_editor %}
                     <script nonce="{{ session['nonce'] }}">

app/templates/post/post_edit.html

@@ -56,6 +56,19 @@
               <div class="tab-pane fade show active" id="discussion-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                   {{ render_field(form.discussion_title) }}
                   {{ render_field(form.discussion_body) }}
+                  {% if markdown_editor %}
+                    <script nonce="{{ session['nonce'] }}">
+                        window.addEventListener("load", function () {
+                            var downarea = new DownArea({
+                                elem: document.querySelector('#discussion_body'),
+                                resize: DownArea.RESIZE_VERTICAL,
+                                hide: ['heading', 'bold-italic'],
+                                value: {{ form.discussion_body.data | tojson | safe }},
+                            });
+                            setupAutoResize('discussion_body');
+                        });
+                    </script>
+                  {% endif %}
               </div>
               <div class="tab-pane fade" id="link-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                   {{ render_field(form.link_title) }}
@@ -68,6 +81,7 @@
                                 elem: document.querySelector('#link_body'),
                                 resize: DownArea.RESIZE_VERTICAL,
                                 hide: ['heading', 'bold-italic'],
+                                value: {{ form.link_body.data | tojson | safe }},
                             });
                             setupAutoResize('link_body');
                         });
@@ -77,6 +91,8 @@
               <div class="tab-pane fade" id="image-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                   {{ render_field(form.image_title) }}
                   {{ render_field(form.image_file) }}
+                  {{ render_field(form.image_alt_text) }}
+                  <small class="field_hint">{{ _('Describe the image, to help visually impaired people.') }}</small>
                   {{ render_field(form.image_body) }}
                   {% if markdown_editor %}
                     <script nonce="{{ session['nonce'] }}">
@@ -85,6 +101,7 @@
                                 elem: document.querySelector('#image_body'),
                                 resize: DownArea.RESIZE_VERTICAL,
                                 hide: ['heading', 'bold-italic'],
+                                value: {{ form.image_body.data | tojson | safe }},
                             });
                             setupAutoResize('image_body');
                         });