initial draft (need to fix DOM targeting)

src/registrar/admin.py

@@ -283,6 +283,11 @@ class DomainRequestAdminForm(forms.ModelForm):
                 admin.site,
                 attrs={"data-placeholder": "---------", "ajax-url": "get-suborganization-list-json"},
             ),
+            # 'investigator': forms.Select(
+            #     attrs={
+            #         'aria-describedby': 'id_investigator-arialabel'}),
+            # 'senior_official': forms.Select(
+            #     attrs={'aria-describedby': 'id_senior_official-arialabel'}),
         }
         labels = {
             "action_needed_reason_email": "Email",
@@ -2622,11 +2627,9 @@ class DomainRequestAdmin(ListHeaderAdmin, ImportExportModelAdmin):
 
     # Table ordering
     # NOTE: This impacts the select2 dropdowns (combobox)
-    # Currentl, there's only one for requests on DomainInfo
+    # Currently, there's only one for requests on DomainInfo
     ordering = ["-last_submitted_date", "requested_domain__name"]
 
-    change_form_template = "django/admin/domain_request_change_form.html"
-
     def get_fieldsets(self, request, obj=None):
         fieldsets = super().get_fieldsets(request, obj)
 

src/registrar/assets/src/js/getgov-admin/andi.js

@@ -0,0 +1,36 @@
+export function initAriaInjections() {
+    console.log("FIRED")
+    document.addEventListener('DOMContentLoaded', function () {
+        // Find all spans with "--aria-description" in their id
+        const descriptionSpans = document.querySelectorAll('span[id*="--aria-description"]');
+
+        // Iterate through each span to add aria-describedby
+        descriptionSpans.forEach(function(span) {
+            // Extract the base ID from the span's id (remove "--aria-description" part)
+            const fieldId = span.id.replace('--aria-description', '');
+
+            // Find the field element with the corresponding ID
+            const field = document.getElementById(fieldId);
+
+            // If the field exists, set the aria-describedby attribute
+            if (field) {
+                let select2ElementDetected = false
+                if (field.classList.contains('admin-autocomplete')) {
+                    console.log("select2---> select2-"+${fieldId}+"-container")
+                    // If it's a Select2 component, find the rendered span inside Select2
+                    const select2Span = field.querySelector('.select2-selection');
+                    if (select2Span) {
+                        console.log("set select2 aria")
+                        select2Span.setAttribute('aria-describedby', span.id);
+                        select2ElementDetected=true
+                    }
+                } 
+                if (!select2ElementDetected)
+                {
+                    // Otherwise, set aria-describedby directly on the field
+                    field.setAttribute('aria-describedby', span.id);
+                }
+            }
+        });
+    });
+}

src/registrar/assets/src/js/getgov-admin/main.js

@@ -15,6 +15,7 @@ import { initDomainFormTargetBlankButtons } from './domain-form.js';
 import { initDynamicPortfolioFields } from './portfolio-form.js';
 import { initDynamicDomainInformationFields } from './domain-information-form.js';
 import { initDynamicDomainFields } from './domain-form.js';
+import { initAriaInjections } from './andi.js'
 
 // General
 initModals();
@@ -22,6 +23,7 @@ initCopyToClipboard();
 initFilterHorizontalWidget();
 initDescriptions();
 initSubmitBar();
+initAriaInjections();
 
 // Domain request
 initIneligibleModal();

src/registrar/templates/django/admin/includes/detail_table_fieldset.html

@@ -160,6 +160,13 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
 {% endblock field_readonly %}
 
 {% block field_other %}
+    <!-- {{field.field.field.widget.template_name|safe}} -->
+    {% if "related_widget_wrapper" in field.field.field.widget.template_name or field.field.field.widget.input_type == 'select' %}
+        <span id="{{ field.field.id_for_label }}--aria-description" class="visually-hidden admin-select--aria-description">
+            {{ field.field.label }}, combo-box, collapsed, edit, has autocomplete. To set the value, use the arrow keys or type the text.
+        </span>
+    {% endif %}
+
     {% if field.field.name == "action_needed_reason_email" %}
         {{ field.field }}
 
@@ -251,7 +258,6 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
 
     {% elif field.field.name == "rejection_reason_email" %}
         {{ field.field }}
-
         <div class="margin-top-05 text-faded custom-email-placeholder">
             &ndash;
         </div>
@@ -331,7 +337,6 @@ This is using a custom implementation fieldset.html (see admin/fieldset.html)
                 </button>
             </div>
         </div>
-        
         {% if original_object.rejection_reason_email %}
             <input id="last-sent-rejection-email-content" class="display-none" value="{{original_object.rejection_reason_email}}">
         {% else %}

src/registrar/utility/admin_helpers.py

@@ -105,6 +105,7 @@ class AutocompleteSelectWithPlaceholder(AutocompleteSelect):
         attrs = super().build_attrs(base_attrs, extra_attrs=extra_attrs)
         if "data-placeholder" in base_attrs:
             attrs["data-placeholder"] = base_attrs["data-placeholder"]
+        
         return attrs
 
     def __init__(self, field, admin_site, attrs=None, choices=(), using=None):