Skip to content

Conversation

@dvoituron
Copy link
Collaborator

[FluentAutocomplete] Accessibility - Add aria-selected on FluentOption

To comply with the a11y standard, we've added a `aria-selected' attribute to Options when selecting an item.
This makes it possible to use the default style when using a different Windows theme (see example below).

Theme "None"

a11y-Normal

Theme "Aquatic"

a11y-Aquatic

Theme "Desert"

a11y-Desert

Alternative

If you prefer to continue to use the "previous" style not compatible with a11y, you should add this style

.fluent-autocomplete-multiselect div[role=listbox] fluent-option:hover {
    background-color: var(--neutral-fill-stealth-hover) !important;
}

.fluent-autocomplete-multiselect div[role=listbox] fluent-option:not([disabled])[selectable] {
    background: var(--neutral-fill-secondary-hover);
    border: none !important;
}

Unit Tests

Updated

@dvoituron dvoituron added v3 a11y Accessibillity labels May 7, 2024
@dvoituron dvoituron requested a review from vnbaaij May 7, 2024 10:37
@github-actions
Copy link

github-actions bot commented May 7, 2024

✅ All tests passed successfully

Details on your Workflow / Core Tests page.

@github-actions
Copy link

github-actions bot commented May 7, 2024

Summary - Unit Tests Code Coverage

Summary
Generated on: 5/7/2024 - 10:40:18 AM
Coverage date: 5/7/2024 - 10:40:08 AM
Parser: Cobertura
Assemblies: 1
Classes: 229
Files: 337
Line coverage: 56.3% (4443 of 7891)
Covered lines: 4443
Uncovered lines: 3448
Coverable lines: 7891
Total lines: 27120
Branch coverage: 48.3% (2111 of 4363)
Covered branches: 2111
Total branches: 4363
Method coverage: Feature is only available for sponsors
Tag: 364_8983906861

Coverage

Microsoft.FluentUI.AspNetCore.Components - 56.3%
Name Line Branch
Microsoft.FluentUI.AspNetCore.Components 56.3% 48.3%
Microsoft.FluentUI.AspNetCore.Components.AccordionChangeEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.ActionButton`1 50%
Microsoft.FluentUI.AspNetCore.Components.ActionLink`1 0%
Microsoft.FluentUI.AspNetCore.Components.CalendarExtended 95% 86.6%
Microsoft.FluentUI.AspNetCore.Components.CalendarTitles 87% 76.6%
Microsoft.FluentUI.AspNetCore.Components.CheckboxChangeEventArgs 50%
Microsoft.FluentUI.AspNetCore.Components.ColumnBase`1 56.5% 21%
Microsoft.FluentUI.AspNetCore.Components.CommunicationToast 0% 0%
Microsoft.FluentUI.AspNetCore.Components.CommunicationToastContent 0%
Microsoft.FluentUI.AspNetCore.Components.ComponentParameters 16.6% 0%
Microsoft.FluentUI.AspNetCore.Components.Components.Dialog.ContentComponent
s.RenderFragmentDialog
100%
Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipGlobalOp
tions
0%
Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipOptions 0%
Microsoft.FluentUI.AspNetCore.Components.Components.Tooltip.TooltipService 0% 0%
Microsoft.FluentUI.AspNetCore.Components.CountdownTimer 0% 0%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.AsyncQuery
ExecutorSupplier
72.7% 71.4%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.ColumnsCol
lectedNotifier`1
87.5% 50%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.Defer 100%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.DisplayAtt
ributeExtensions
66.6% 50%
Microsoft.FluentUI.AspNetCore.Components.DataGrid.Infrastructure.InternalGr
idContext`1
94.7% 100%
Microsoft.FluentUI.AspNetCore.Components.DataGridCellFocusEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.DataGridRowFocusEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.DialogEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.DialogInstance 92.3% 75%
Microsoft.FluentUI.AspNetCore.Components.DialogParameters 92.3%
Microsoft.FluentUI.AspNetCore.Components.DialogParameters`1 0%
Microsoft.FluentUI.AspNetCore.Components.DialogReference 33.3% 0%
Microsoft.FluentUI.AspNetCore.Components.DialogResult 0% 0%
Microsoft.FluentUI.AspNetCore.Components.DialogService 3% 3.3%
Microsoft.FluentUI.AspNetCore.Components.Emoji 0% 0%
Microsoft.FluentUI.AspNetCore.Components.EmojiCompress 0% 0%
Microsoft.FluentUI.AspNetCore.Components.EmojiInfo 0%
Microsoft.FluentUI.AspNetCore.Components.Extensions.AdditionalAttributesExt
ensions
100% 100%
Microsoft.FluentUI.AspNetCore.Components.Extensions.BooleanExtensions 100% 50%
Microsoft.FluentUI.AspNetCore.Components.Extensions.DateTimeExtensions 83.8% 85%
Microsoft.FluentUI.AspNetCore.Components.Extensions.EnumExtensions 84.6% 75%
Microsoft.FluentUI.AspNetCore.Components.Extensions.FluentInputExtensions 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentAccessibilityStatus 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentAccordion 52.3% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem 73.9% 35.7%
Microsoft.FluentUI.AspNetCore.Components.FluentAnchor 88.8% 67.8%
Microsoft.FluentUI.AspNetCore.Components.FluentAnchoredRegion 86% 60%
Microsoft.FluentUI.AspNetCore.Components.FluentAppBar 57.7% 41.1%
Microsoft.FluentUI.AspNetCore.Components.FluentAppBarItem 84.3% 66.6%
Microsoft.FluentUI.AspNetCore.Components.FluentAutocomplete`1 80.8% 67.7%
Microsoft.FluentUI.AspNetCore.Components.FluentBadge 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentBodyContent 100%
Microsoft.FluentUI.AspNetCore.Components.FluentBreadcrumb 100%
Microsoft.FluentUI.AspNetCore.Components.FluentBreadcrumbItem 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentButton 82.8% 64%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendar 89.9% 83.3%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarBase 100% 94.4%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarDay 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarMonth 100% 66.6%
Microsoft.FluentUI.AspNetCore.Components.FluentCalendarYear 90.9% 60%
Microsoft.FluentUI.AspNetCore.Components.FluentCard 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentCheckbox 95.7% 90.3%
Microsoft.FluentUI.AspNetCore.Components.FluentCollapsibleRegion 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentCombobox`1 51.8% 31.5%
Microsoft.FluentUI.AspNetCore.Components.FluentComponentBase 90.9% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentCounterBadge 92.3% 86.5%
Microsoft.FluentUI.AspNetCore.Components.FluentDataGrid`1 56.9% 44.7%
Microsoft.FluentUI.AspNetCore.Components.FluentDataGridCell`1 93.3%
Microsoft.FluentUI.AspNetCore.Components.FluentDataGridRow`1 57.4% 30%
Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker 75.6% 47.2%
Microsoft.FluentUI.AspNetCore.Components.FluentDesignSystemProvider 100% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentDesignTheme 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentDialog 61% 71%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogBody 100%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogFooter 66.6% 44.1%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogHeader 82.6% 76.9%
Microsoft.FluentUI.AspNetCore.Components.FluentDialogProvider 38% 18.7%
Microsoft.FluentUI.AspNetCore.Components.FluentDivider 82.3% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentDragContainer`1 69.2%
Microsoft.FluentUI.AspNetCore.Components.FluentDragEventArgs`1 0%
Microsoft.FluentUI.AspNetCore.Components.FluentDropZone`1 22.2% 5%
Microsoft.FluentUI.AspNetCore.Components.FluentEditForm 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentEmoji`1 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentFlipper 100%
Microsoft.FluentUI.AspNetCore.Components.FluentFooter 100%
Microsoft.FluentUI.AspNetCore.Components.FluentGrid 71.4% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentGridItem 87.5% 82.5%
Microsoft.FluentUI.AspNetCore.Components.FluentHeader 100%
Microsoft.FluentUI.AspNetCore.Components.FluentHighlighter 80% 20%
Microsoft.FluentUI.AspNetCore.Components.FluentHorizontalScroll 51.8% 20%
Microsoft.FluentUI.AspNetCore.Components.FluentIcon`1 86% 77.7%
Microsoft.FluentUI.AspNetCore.Components.FluentInputBase`1 64.1% 57.5%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFile 88.5% 76.6%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileBuffer 100%
Microsoft.FluentUI.AspNetCore.Components.FluentInputFileEventArgs 91.6%
Microsoft.FluentUI.AspNetCore.Components.FluentInputLabel 100% 95%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode 89.5% 84.6%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeEventArgs 100% 83.3%
Microsoft.FluentUI.AspNetCore.Components.FluentKeyCodeProvider 57.1% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentLabel 58.6% 21.4%
Microsoft.FluentUI.AspNetCore.Components.FluentLayout 100%
Microsoft.FluentUI.AspNetCore.Components.FluentListbox`1 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentMain 100%
Microsoft.FluentUI.AspNetCore.Components.FluentMainLayout 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentMenu 38.8% 41.6%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuButton 59.3% 8.3%
Microsoft.FluentUI.AspNetCore.Components.FluentMenuItem 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentMessageBar 50% 22.8%
Microsoft.FluentUI.AspNetCore.Components.FluentMessageBarProvider 82.3% 66.6%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitter 81.1% 66.6%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterPane 95.7% 87.5%
Microsoft.FluentUI.AspNetCore.Components.FluentMultiSplitterResizeEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.FluentNavBase 50% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentNavGroup 61.2% 36.6%
Microsoft.FluentUI.AspNetCore.Components.FluentNavLink 84.6% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentNavMenu 57.1% 40%
Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuGroup 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuItemBase 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuLink 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentNavMenuTree 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentNumberField`1 60.4% 47.2%
Microsoft.FluentUI.AspNetCore.Components.FluentOption`1 52.9% 33.3%
Microsoft.FluentUI.AspNetCore.Components.FluentOverflow 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentOverflowItem 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentOverlay 70.5% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentPageScript 100%
Microsoft.FluentUI.AspNetCore.Components.FluentPaginator 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentPersona 100% 78.1%
Microsoft.FluentUI.AspNetCore.Components.FluentPopover 76% 65.9%
Microsoft.FluentUI.AspNetCore.Components.FluentPresenceBadge 60.9% 29.1%
Microsoft.FluentUI.AspNetCore.Components.FluentProfileMenu 100% 100%
Microsoft.FluentUI.AspNetCore.Components.FluentProgress 79% 68.1%
Microsoft.FluentUI.AspNetCore.Components.FluentProgressRing 97.2% 92.8%
Microsoft.FluentUI.AspNetCore.Components.FluentPullToRefresh 94% 89.2%
Microsoft.FluentUI.AspNetCore.Components.FluentRadio`1 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentRadioContext 70% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentRadioGroup`1 80% 31.2%
Microsoft.FluentUI.AspNetCore.Components.FluentSearch 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentSelect`1 0%
Microsoft.FluentUI.AspNetCore.Components.FluentSkeleton 52.9% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentSlider`1 56.3% 38.6%
Microsoft.FluentUI.AspNetCore.Components.FluentSliderLabel`1 57.5% 30%
Microsoft.FluentUI.AspNetCore.Components.FluentSortableList`1 68.2% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentSortableListEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.FluentSpacer 100% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentSplashScreen 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentSplitter 70.7% 40%
Microsoft.FluentUI.AspNetCore.Components.FluentStack 90.4% 60%
Microsoft.FluentUI.AspNetCore.Components.FluentSwitch 77.7% 50%
Microsoft.FluentUI.AspNetCore.Components.FluentTab 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentTabs 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentTextArea 80%
Microsoft.FluentUI.AspNetCore.Components.FluentTextField 86.6% 60%
Microsoft.FluentUI.AspNetCore.Components.FluentTimePicker 100% 75%
Microsoft.FluentUI.AspNetCore.Components.FluentToast 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentToastProvider 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentToolbar 100%
Microsoft.FluentUI.AspNetCore.Components.FluentTooltip 60.7% 47.6%
Microsoft.FluentUI.AspNetCore.Components.FluentTooltipProvider 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentTreeItem 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentTreeView 22.6% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentValidationMessage`1 0% 0%
Microsoft.FluentUI.AspNetCore.Components.FluentValidationSummary 100% 87.5%
Microsoft.FluentUI.AspNetCore.Components.FluentWizard 94% 82.3%
Microsoft.FluentUI.AspNetCore.Components.FluentWizardStep 95.7% 88.3%
Microsoft.FluentUI.AspNetCore.Components.FluentWizardStepArgs 100%
Microsoft.FluentUI.AspNetCore.Components.FluentWizardStepChangeEventArgs 100%
Microsoft.FluentUI.AspNetCore.Components.GlobalState 33.3% 50%
Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderRequest`1 92.3% 25%
Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderResult 100%
Microsoft.FluentUI.AspNetCore.Components.GridItemsProviderResult`1 100%
Microsoft.FluentUI.AspNetCore.Components.GridSort`1 35.1% 25.9%
Microsoft.FluentUI.AspNetCore.Components.HorizontalScrollEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.Icon 81.3% 82.3%
Microsoft.FluentUI.AspNetCore.Components.IconFromImage 100%
Microsoft.FluentUI.AspNetCore.Components.IconInfo 100%
Microsoft.FluentUI.AspNetCore.Components.Identifier 66.6% 62.5%
Microsoft.FluentUI.AspNetCore.Components.IdentifierContext 66.6% 41.6%
Microsoft.FluentUI.AspNetCore.Components.INavMenuItemsOwner 0%
Microsoft.FluentUI.AspNetCore.Components.Infrastructure.EventCallbackSubscr
ibable`1
83.3% 100%
Microsoft.FluentUI.AspNetCore.Components.Infrastructure.EventCallbackSubscr
iber`1
90% 75%
Microsoft.FluentUI.AspNetCore.Components.InputHelpers`1 38.8% 31.6%
Microsoft.FluentUI.AspNetCore.Components.InternalDialogContext 80%
Microsoft.FluentUI.AspNetCore.Components.InternalListContext`1 60% 50%
Microsoft.FluentUI.AspNetCore.Components.InternalToastContext 0%
Microsoft.FluentUI.AspNetCore.Components.KeyCodeService 84.6% 50%
Microsoft.FluentUI.AspNetCore.Components.LibraryConfiguration 100%
Microsoft.FluentUI.AspNetCore.Components.ListComponentBase`1 50% 43.4%
Microsoft.FluentUI.AspNetCore.Components.LoadedEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.LuminanceChangedEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.MenuChangeEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.Message 50% 0%
Microsoft.FluentUI.AspNetCore.Components.MessageBox 50% 0%
Microsoft.FluentUI.AspNetCore.Components.MessageBoxContent 0%
Microsoft.FluentUI.AspNetCore.Components.MessageOptions 76.9%
Microsoft.FluentUI.AspNetCore.Components.MessageService 33% 26.9%
Microsoft.FluentUI.AspNetCore.Components.NavMenuActionArgs 0% 0%
Microsoft.FluentUI.AspNetCore.Components.OfficeColorUtilities 0%
Microsoft.FluentUI.AspNetCore.Components.Option`1 0%
Microsoft.FluentUI.AspNetCore.Components.OptionsSearchEventArgs`1 100%
Microsoft.FluentUI.AspNetCore.Components.OverflowItem 100%
Microsoft.FluentUI.AspNetCore.Components.PaginationState 0% 0%
Microsoft.FluentUI.AspNetCore.Components.ProgressFileDetails 100%
Microsoft.FluentUI.AspNetCore.Components.ProgressToast 0% 0%
Microsoft.FluentUI.AspNetCore.Components.ProgressToastContent 0%
Microsoft.FluentUI.AspNetCore.Components.PropertyColumn`2 71.4% 46.6%
Microsoft.FluentUI.AspNetCore.Components.Resources.TimeAgoResource 76.1% 100%
Microsoft.FluentUI.AspNetCore.Components.SelectColumn`1 93.4% 86.9%
Microsoft.FluentUI.AspNetCore.Components.ServiceCollectionExtensions 78.5% 100%
Microsoft.FluentUI.AspNetCore.Components.SortedProperty 0%
Microsoft.FluentUI.AspNetCore.Components.SplashScreenContent 0% 0%
Microsoft.FluentUI.AspNetCore.Components.SplitterCollapsedEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.SplitterResizedEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.StandardLuminanceExtensions 0% 0%
Microsoft.FluentUI.AspNetCore.Components.StaticAssetServiceConfiguration 0% 0%
Microsoft.FluentUI.AspNetCore.Components.TabChangeEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.TemplateColumn`1 0% 0%
Microsoft.FluentUI.AspNetCore.Components.TimeAgoOptions 92.3%
Microsoft.FluentUI.AspNetCore.Components.ToastInstance 0% 0%
Microsoft.FluentUI.AspNetCore.Components.ToastParameters 0%
Microsoft.FluentUI.AspNetCore.Components.ToastParameters`1 0%
Microsoft.FluentUI.AspNetCore.Components.ToastResult 0% 0%
Microsoft.FluentUI.AspNetCore.Components.ToastService 0% 0%
Microsoft.FluentUI.AspNetCore.Components.TreeChangeEventArgs 0%
Microsoft.FluentUI.AspNetCore.Components.UploadedFileDetails 0%
Microsoft.FluentUI.AspNetCore.Components.Utilities.CssBuilder 100% 91.6%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Debouncer 94.8% 37.5%
Microsoft.FluentUI.AspNetCore.Components.Utilities.InlineStyleBuilder 96.4% 87.5%
Microsoft.FluentUI.AspNetCore.Components.Utilities.JSModule 0% 0%
Microsoft.FluentUI.AspNetCore.Components.Utilities.Splitter 82.8% 81.8%
Microsoft.FluentUI.AspNetCore.Components.Utilities.StyleBuilder 100% 91.6%
Microsoft.FluentUI.AspNetCore.Components.ZIndex 100%
System.Text.RegularExpressions.Generated 72.5% 42.1%

@dvoituron dvoituron removed the request for review from vnbaaij May 7, 2024 12:05
@dvoituron dvoituron disabled auto-merge May 7, 2024 12:05
@dvoituron dvoituron merged commit adc2ea4 into dev May 7, 2024
@dvoituron dvoituron deleted the users/dvoituron/autocomplete-options-a11y branch May 7, 2024 12:06
@vnbaaij vnbaaij added this to the v4.7.3 milestone May 15, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y Accessibillity v3

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants