Implement accessibility improvements for screen readers on Ask a Question page

Co-authored-by: LiNk-NY <[email protected]>

Author: Copilot

biostar/forum/forms.py

@@ -168,7 +168,12 @@ class PostLongForm(forms.Form):
     choices = informative_choices(choices=choices)
 
     post_type = forms.IntegerField(label="Post Type",
-                                   widget=forms.Select(choices=choices, attrs={'class': "ui dropdown"}),
+                                   widget=forms.Select(choices=choices, attrs={
+                                       'class': "ui dropdown",
+                                       'aria-label': "Select post type",
+                                       'aria-required': "true",
+                                       'aria-describedby': "post_type_help"
+                                   }),
                                    help_text="Select a post type.")
     title = forms.CharField(label="Post Title", max_length=200, min_length=2,
                             validators=[valid_title, validate_ascii],

biostar/forum/templates/new_post.html

@@ -41,7 +41,7 @@
                         <div class="required field">
                             <label>{{ form.post_type.label }}</label>
                             {{ form.post_type }}
-                            <p class="muted" style="display: contents; ">{{ form.post_type.help_text }} Click here for
+                            <p class="muted" id="post_type_help" style="display: contents; ">{{ form.post_type.help_text }} Click here for
                                 more</p> {% include 'forms/help_text.html' %}
                         </div>
 
@@ -51,7 +51,7 @@
                             {% block new_tag_val %}
                             {{ form.tag_val }}
                             {% endblock %}
-                            <p class="muted">{{ form.tag_val.help_text }}</p>
+                            <p class="muted" id="tag_val_help">{{ form.tag_val.help_text }}</p>
                         </div>
 
 

biostar/forum/templatetags/forum_tags.py

@@ -320,8 +320,12 @@ def inplace_type_field(post=None, field_id='type'):
     (opt[0] in Post.TOP_LEVEL), choices)
 
     post_type = forms.IntegerField(label="Post Type",
-                                   widget=forms.Select(choices=choices, attrs={'class': "ui fluid dropdown",
-                                                                               'id': field_id}),
+                                   widget=forms.Select(choices=choices, attrs={
+                                       'class': "ui fluid dropdown",
+                                       'id': field_id,
+                                       'aria-label': "Select post type",
+                                       'aria-required': "true"
+                                   }),
                                    help_text="Select a post type.")
 
     value = post.type if post else Post.QUESTION

themes/bioconductor/static/theme.css

@@ -118,3 +118,66 @@ body {
     background-color: #87B13F !important;
     color: white;
 }
+
+/* ========================================
+   Accessibility improvements for dropdowns
+   ======================================== */
+
+/* Ensure native select elements are accessible when JavaScript is disabled */
+.ui.dropdown select {
+    opacity: 1 !important;
+    position: static !important;
+    height: auto !important;
+    width: 100% !important;
+    visibility: visible !important;
+}
+
+/* Style native selects to look consistent */
+.ui.dropdown.disabled select,
+noscript .ui.dropdown select {
+    display: block !important;
+    opacity: 1 !important;
+    position: static !important;
+    height: auto !important;
+    width: 100% !important;
+    visibility: visible !important;
+    background: white;
+    border: 1px solid rgba(34,36,38,.15);
+    border-radius: .28571429rem;
+    padding: .67857143em 1em;
+    font-size: 1em;
+    line-height: 1.21428571em;
+}
+
+/* Hide the custom dropdown UI when JavaScript is disabled */
+noscript .ui.dropdown .text,
+noscript .ui.dropdown .dropdown.icon {
+    display: none !important;
+}
+
+/* Ensure focus is visible on all interactive elements */
+.ui.dropdown:focus,
+.ui.dropdown select:focus {
+    outline: 2px solid #0066cc;
+    outline-offset: 2px;
+}
+
+/* Improve screen reader announcements */
+.sr-only {
+    position: absolute;
+    left: -10000px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+/* Ensure form validation messages are accessible */
+.field .error.message {
+    color: #9f3a38;
+    font-weight: 600;
+}
+
+.field .error.message:before {
+    content: "Error: ";
+    font-weight: bold;
+}

themes/bioconductor/templates/forms/field_tags.html

@@ -1,16 +1,62 @@
 <select multiple="multiple" name="{{ form_field.name }}" id="{{ form_field.id_for_label }}" 
-        class="ui search selection dropdown tags" data-placeholder="Select tags">
+        class="ui search selection dropdown tags" data-placeholder="Select tags"
+        aria-label="Select post tags"
+        aria-required="true"
+        aria-describedby="tag_val_help">
     {% for value, is_selected in dropdown_options %}
         <option value="{{ value }}" {% if is_selected or value == 'Bioconductor' %}selected{% endif %}>
             {{ value }}
         </option>
     {% endfor %}
 </select>
 
+<!-- Fallback instructions for screen readers when JavaScript is disabled -->
+<noscript>
+  <p class="sr-only">JavaScript is disabled. Use the above multi-select dropdown to choose tags. Hold Ctrl (Windows) or Cmd (Mac) while clicking to select multiple tags.</p>
+</noscript>
+
 <script>
   $(document).ready(function() {
     $('.ui.dropdown.tags').dropdown({
-      allowAdditions: true  // optional, only if you want new tags allowed
+      allowAdditions: true,  // optional, only if you want new tags allowed
+      // Add accessibility support for keyboard navigation
+      keys: {
+        delimiter: 32, // spacebar
+        deleteKey: 8,  // backspace
+        leftArrow: 37,
+        upArrow: 38,
+        rightArrow: 39,
+        downArrow: 40,
+        enter: 13,
+        escape: 27,
+        tab: 9
+      },
+      // Enable keyboard navigation
+      allowAdditions: true,
+      hideAdditions: false,
+      // Ensure screen reader can access the dropdown
+      forceSelection: false,
+      // Add aria-live region for screen reader announcements
+      onChange: function(value, text, $choice) {
+        // Update aria-live region when selection changes
+        var announcement = 'Selected: ' + text;
+        if (!$('#tag-announcements').length) {
+          $('body').append('<div id="tag-announcements" aria-live="polite" aria-atomic="true" style="position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden;"></div>');
+        }
+        $('#tag-announcements').text(announcement);
+      }
     }).dropdown('set selected', ['Bioconductor']);
+    
+    // Ensure dropdown button is properly labeled for screen readers
+    $('.ui.dropdown.tags > .dropdown.icon').attr('aria-hidden', 'true');
+    $('.ui.dropdown.tags').attr('role', 'combobox');
+    $('.ui.dropdown.tags').attr('aria-expanded', 'false');
+    
+    // Update aria-expanded when dropdown opens/closes
+    $('.ui.dropdown.tags').on('dropdown.open', function() {
+      $(this).attr('aria-expanded', 'true');
+    }).on('dropdown.close', function() {
+      $(this).attr('aria-expanded', 'false');
+    });
   });
 </script>