Skip to content

Commit 5447d4f

Browse files
dvoiturondvoituron
authored
Fix: [Accessibility] Invalid aria-controls reference in Autocomplete popup rendering (#4117)
* Fix: [Accessibility] Invalid aria-controls reference in Autocomplete popup rendering Fixes #4096 * Update Unit Tests
1 parent d8ea9cd commit 5447d4f

10 files changed

+43
-6
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -543,6 +543,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
543543
if (firstRender)
544544
{
545545
Module = await JS.InvokeAsync<IJSObjectReference>("import", JAVASCRIPT_FILE.FormatCollocatedUrl(LibraryConfiguration));
546+
await Module.InvokeVoidAsync("initialize", Id);
546547
}
547548
}
548549

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,31 @@
1+
export function initialize(id) {
2+
var item = document.getElementById(id);
3+
if (!!item) {
4+
const input = item.shadowRoot?.querySelector('#control');
5+
6+
// Observe attribute changes to remove 'aria-controls' if added by another process
7+
// This attribute cannot be set in fluent-autocomplete Shadow DOM
8+
if (input) {
9+
const observer = new MutationObserver((mutationsList) => {
10+
for (const mutation of mutationsList) {
11+
if (
12+
mutation.type === 'attributes' &&
13+
mutation.attributeName === 'aria-controls' &&
14+
input.hasAttribute('aria-controls')
15+
) {
16+
input.removeAttribute('aria-controls');
17+
}
18+
}
19+
});
20+
observer.observe(input, { attributes: true, attributeFilter: ['aria-controls'] });
21+
}
22+
23+
if (input && input.hasAttribute('aria-controls')) {
24+
input.removeAttribute('aria-controls');
25+
}
26+
}
27+
}
28+
129
export function displayLastSelectedItem(id) {
230
var item = document.getElementById(id);
331
var scroll = document.getElementById(id + "-scroll");

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
visible="@Visible"
1010
anchor="@Anchor"
1111
delay="@Delay"
12+
aria-label="@(string.IsNullOrEmpty(AriaLabel) ? "Tooltip" : AriaLabel)"
1213
position="@Position.ToAttributeValue()"
1314
auto-update-mode="@AutoUpdateMode"
1415
horizontal-viewport-lock="@HorizontalViewportLock"

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,13 @@ public partial class FluentTooltip : FluentComponentBase, IDisposable
4343
/// </summary>
4444
protected virtual TooltipGlobalOptions? GlobalOptions => TooltipService?.GlobalOptions;
4545

46+
47+
/// <summary>
48+
/// Gets or sets the text used on aria-label attribute.
49+
/// </summary>
50+
[Parameter]
51+
public virtual string? AriaLabel { get; set; }
52+
4653
/// <summary>
4754
/// Gets or sets the value indicating whether the library should close the tooltip if the cursor leaves the anchor and the tooltip.
4855
/// 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‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h
99
<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>
1010
</svg>
1111
</fluent-button>
12-
<fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" blazor:ontooltipdismiss="9" blazor:elementreference="xxx">
12+
<fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" aria-label="Tooltip" blazor:ontooltipdismiss="9" blazor:elementreference="xxx">
1313
<div style="max-width: 500px; text-wrap: wrap;">Close</div>
1414
</fluent-tooltip>
1515
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h
99
<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>
1010
</svg>
1111
</fluent-button>
12-
<fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" blazor:ontooltipdismiss="9" blazor:elementreference="xxx">
12+
<fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" aria-label="Tooltip" blazor:ontooltipdismiss="9" blazor:elementreference="xxx">
1313
<div style="max-width: 500px; text-wrap: wrap;">Close</div>
1414
</fluent-tooltip>
1515
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Render Fragment
99
<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>
1010
</svg>
1111
</fluent-button>
12-
<fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" blazor:ontooltipdismiss="3" blazor:elementreference="xxx">
12+
<fluent-tooltip anchor="xxx" delay="300" position="bottom" role="tooltip" aria-label="Tooltip" blazor:ontooltipdismiss="3" blazor:elementreference="xxx">
1313
<div style="max-width: 500px; text-wrap: wrap;">Close</div>
1414
</fluent-tooltip>
1515
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<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>
1010
</svg>
1111
</fluent-button>
12-
<fluent-tooltip anchor="xxx" role="tooltip" delay="300" blazor:ontooltipdismiss="2" position="bottom" blazor:elementreference=""></fluent-tooltip>
12+
<fluent-tooltip anchor="xxx" role="tooltip" aria-label="Tooltip" delay="300" blazor:ontooltipdismiss="2" position="bottom" blazor:elementreference=""></fluent-tooltip>
1313
</div>
1414
<div class="fluent-dialog-body">
1515
Body content

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11

2-
<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">
2+
<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">
33
<div style="max-width: 300px; text-wrap: wrap;">My help text</div>
44
</fluent-tooltip>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
11

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>
2+
<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>

0 commit comments

Comments
 (0)