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;
+}