Fix: [Accessibility] Invalid aria-controls reference in Autocomplete popup rendering

src/Core/Components/List/FluentAutocomplete.razor.cs

@@ -543,6 +543,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         if (firstRender)
         {
             Module = await JS.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
+            await Module.InvokeVoidAsync("initialize", Id);
         }
     }
 

src/Core/Components/List/FluentAutocomplete.razor.js

@@ -1,3 +1,31 @@
+export function initialize(id) {
+    var item = document.getElementById(id);
+    if (!!item) {
+        const input = item.shadowRoot?.querySelector('#control');
+
+        // Observe attribute changes to remove 'aria-controls' if added by another process
+        // This attribute cannot be set in fluent-autocomplete Shadow DOM
+        if (input) {
+            const observer = new MutationObserver((mutationsList) => {
+            for (const mutation of mutationsList) {
+                if (
+                mutation.type === 'attributes' &&
+                mutation.attributeName === 'aria-controls' &&
+                input.hasAttribute('aria-controls')
+                ) {
+                input.removeAttribute('aria-controls');
+                }
+            }
+            });
+            observer.observe(input, { attributes: true, attributeFilter: ['aria-controls'] });
+        }
+
+        if (input && input.hasAttribute('aria-controls')) {
+            input.removeAttribute('aria-controls');
+        }
+    }
+}
+
 export function displayLastSelectedItem(id) {
     var item = document.getElementById(id);
     var scroll = document.getElementById(id + "-scroll");

src/Core/Components/Tooltip/FluentTooltip.razor

@@ -9,6 +9,7 @@
                     visible="@Visible"
                     anchor="@Anchor"
                     delay="@Delay"
+                    aria-label="@(string.IsNullOrEmpty(AriaLabel) ? "Tooltip" : AriaLabel)"
                     position="@Position.ToAttributeValue()"
                     auto-update-mode="@AutoUpdateMode"
                     horizontal-viewport-lock="@HorizontalViewportLock"

src/Core/Components/Tooltip/FluentTooltip.razor.cs

@@ -42,7 +42,14 @@
     /// Gets the default tooltip options.
     /// </summary>
     protected virtual TooltipGlobalOptions? GlobalOptions => TooltipService?.GlobalOptions;
 
+
+    /// <summary>
+    /// Gets or sets the text used on aria-label attribute.
+    /// </summary>
+    [Parameter]
+    public virtual string? AriaLabel { get; set; }
+
     /// <summary>
     /// Gets or sets the value indicating whether the library should close the tooltip if the cursor leaves the anchor and the tooltip.
     /// By default, the tooltip closes if the cursor leaves the anchor, but not the tooltip itself.

tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_Default.verified.razor.html

@@ -9,7 +9,7 @@ <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h
         <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
       </svg>
     </fluent-button>
-    <fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" blazor:ontooltipdismiss="9" blazor:elementreference="xxx">
+    <fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" aria-label="Tooltip" blazor:ontooltipdismiss="9" blazor:elementreference="xxx">
       <div style="max-width: 500px; text-wrap: wrap;">Close</div>
     </fluent-tooltip>
   </div>

tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_HeightUnset.verified.razor.html

@@ -9,7 +9,7 @@ <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h
         <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
       </svg>
     </fluent-button>
-    <fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" blazor:ontooltipdismiss="9" blazor:elementreference="xxx">
+    <fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" aria-label="Tooltip" blazor:ontooltipdismiss="9" blazor:elementreference="xxx">
       <div style="max-width: 500px; text-wrap: wrap;">Close</div>
     </fluent-tooltip>
   </div>

tests/Core/Dialog/FluentDialogServiceTests.FluentDialog_RenderFragment.verified.razor.html

@@ -9,7 +9,7 @@ <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Render Fragment
         <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
       </svg>
     </fluent-button>
-    <fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" blazor:ontooltipdismiss="3" blazor:elementreference="xxx">
+    <fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" aria-label="Tooltip" blazor:ontooltipdismiss="3" blazor:elementreference="xxx">
       <div style="max-width: 500px; text-wrap: wrap;">Close</div>
     </fluent-tooltip>
   </div>

tests/Core/Dialog/FluentDialogTests.FluentDialog_HeaderFooter.verified.razor.html

@@ -9,7 +9,7 @@
         <path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
       </svg>
     </fluent-button>
-    <fluent-tooltip anchor="xxx" role="tooltip" delay="300" blazor:ontooltipdismiss="2" position="bottom" blazor:elementreference=""></fluent-tooltip>
+    <fluent-tooltip anchor="xxx" role="tooltip" aria-label="Tooltip" delay="300" blazor:ontooltipdismiss="2" position="bottom" blazor:elementreference=""></fluent-tooltip>
   </div>
   <div class="fluent-dialog-body">
     Body content

tests/Core/Tooltip/FluentTooltipTests.FluentTooltip_AllAttributes.verified.html

@@ -1,4 +1,4 @@
 
-<fluent-tooltip visible="" anchor="button-id" delay="200" position="bottom" auto-update-mode="Auto" horizontal-viewport-lock="" vertical-viewport-lock="" role="tooltip" blazor:ontooltipdismiss="1" blazor:elementreference="82c7cfb0-d639-4809-ada8-c06caa67273f">
+<fluent-tooltip visible="" anchor="button-id" aria-label="Tooltip" delay="200" position="bottom" auto-update-mode="Auto" horizontal-viewport-lock="" vertical-viewport-lock="" role="tooltip" blazor:ontooltipdismiss="1" blazor:elementreference="82c7cfb0-d639-4809-ada8-c06caa67273f">
     <div style="max-width: 300px; text-wrap: wrap;">My help text</div>
 </fluent-tooltip>

tests/Core/Tooltip/FluentTooltipTests.FluentTooltip_Default.verified.html

@@ -1,2 +1,2 @@
 
-<fluent-tooltip anchor="button-id" delay="300" role="tooltip" blazor:ontooltipdismiss="1" blazor:elementreference="ab13056b-5757-44df-bc3e-aab0ae2b20b4">My help text</fluent-tooltip>
+<fluent-tooltip anchor="button-id" delay="300" role="tooltip" aria-label="Tooltip" blazor:ontooltipdismiss="1" blazor:elementreference="ab13056b-5757-44df-bc3e-aab0ae2b20b4">My help text</fluent-tooltip>