[Lists] Add aria-selected to fluent-option

WHATSNEW.md

@@ -28,6 +28,7 @@
 - [Dialog] Fix failing tests ([#2283](https://github.com/microsoft/fluentui-blazor/pull/2283))
 - [DialogService] Fix UpdateDialogAsync to refresh parameters and content ([#2310](https://github.com/microsoft/fluentui-blazor/pull/2310))
 - [Lists] Pass `Name` parameter ([#2305](https://github.com/microsoft/fluentui-blazor/pull/2305))
+- [Lists] Add aria-selected to fluent-option ([#2316](https://github.com/microsoft/fluentui-blazor/pull/2316))
 - [Multisplitter] Fix width panels ([#2218](https://github.com/microsoft/fluentui-blazor/pull/2218))
 - [MultiSplitter] Prevent semicolons from being displayed. ([#2226](https://github.com/microsoft/fluentui-blazor/pull/2226))
 - [NavMenu] Revert fix for when prerender set to false ([#2293](https://github.com/microsoft/fluentui-blazor/pull/2293))

examples/Demo/Shared/wwwroot/docs/WhatsNew.md

@@ -28,6 +28,7 @@
 - [Dialog] Fix failing tests ([#2283](https://github.com/microsoft/fluentui-blazor/pull/2283))
 - [DialogService] Fix UpdateDialogAsync to refresh parameters and content ([#2310](https://github.com/microsoft/fluentui-blazor/pull/2310))
 - [Lists] Pass `Name` parameter ([#2305](https://github.com/microsoft/fluentui-blazor/pull/2305))
+- [Lists] Add aria-selected to fluent-option ([#2316](https://github.com/microsoft/fluentui-blazor/pull/2316))
 - [Multisplitter] Fix width panels ([#2218](https://github.com/microsoft/fluentui-blazor/pull/2218))
 - [MultiSplitter] Prevent semicolons from being displayed. ([#2226](https://github.com/microsoft/fluentui-blazor/pull/2226))
 - [NavMenu] Revert fix for when prerender set to false ([#2293](https://github.com/microsoft/fluentui-blazor/pull/2293))

src/Core/Components/List/FluentOption.razor

@@ -1,4 +1,4 @@
-@namespace Microsoft.FluentUI.AspNetCore.Components
+@namespace Microsoft.FluentUI.AspNetCore.Components
 @inherits FluentComponentBase
 @typeparam TOption
 <fluent-option @ref=Element
@@ -8,6 +8,7 @@
                disabled="@Disabled"
                value="@Value"
                selected="@Selected"
+               aria-selected="@(Selected ? "true" : "false")"
                @onclick="@OnClickHandlerAsync"
                @attributes="AdditionalAttributes">
     @ChildContent

tests/Core/List/FluentComboboxTests.FluentCombobox_ClearSelection.verified.html

@@ -1,5 +1,5 @@
 
 <style>#myComponent::part(listbox) {  z-index: 9995 }</style>
 <fluent-combobox id="xxx" current-value="" position="below" blazor:onchange="1" blazor:elementreference="">
-  <fluent-option id="xxx" value="Contoso" blazor:onclick="2" blazor:elementreference="">Contoso</fluent-option>
+  <fluent-option id="xxx" value="Contoso" aria-selected="false" blazor:onclick="2" blazor:elementreference="">Contoso</fluent-option>
 </fluent-combobox>

tests/Core/List/FluentListboxTests.FluentListbox_NameAttribute.verified.razor.html

@@ -1,8 +1,8 @@
 
 <div style="overflow-y: auto; border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius) * 1px);">
   <fluent-listbox id="xxx" style=" border: none; width: 100%;" size="0" name="xxx" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-    <fluent-option id="xxx" value="1-Denis Voituron" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
-    <fluent-option id="xxx" value="2-Vincent Baaij" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
-    <fluent-option id="xxx" value="3-Bill Gates" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
+    <fluent-option id="xxx" value="1-Denis Voituron" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
+    <fluent-option id="xxx" value="2-Vincent Baaij" aria-selected="false" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
+    <fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
   </fluent-listbox>
 </div>

tests/Core/List/FluentListboxTests.FluentListbox_OptionTemplate.verified.razor.html

@@ -1,21 +1,21 @@
 
 <div style="overflow-y: auto; border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius) * 1px);">
   <fluent-listbox id="xxx" style=" border: none; width: 100%;" size="0" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-    <fluent-option id="xxx" value="1" blazor:onclick="3" blazor:elementreference="xxx">
+    <fluent-option id="xxx" value="1" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">
       <div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" blazor:onkeydown="6" blazor:onclick="7">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
           <circle cx="160" cy="160" r="140"></circle>
         </svg>
       </div>
       Denis Voituron</fluent-option>
-    <fluent-option id="xxx" value="2" blazor:onclick="4" blazor:elementreference="xxx">
+    <fluent-option id="xxx" value="2" aria-selected="false" blazor:onclick="4" blazor:elementreference="xxx">
       <div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" blazor:onkeydown="8" blazor:onclick="9">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
           <circle cx="160" cy="160" r="140"></circle>
         </svg>
       </div>
       Vincent Baaij</fluent-option>
-    <fluent-option id="xxx" value="3" blazor:onclick="5" blazor:elementreference="xxx">
+    <fluent-option id="xxx" value="3" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">
       <div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" blazor:onkeydown="10" blazor:onclick="11">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
           <circle cx="160" cy="160" r="140"></circle>

tests/Core/List/FluentListboxTests.FluentListbox_OptionText.verified.razor.html

@@ -1,8 +1,8 @@
 
 <div style="overflow-y: auto; border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius) * 1px);">
   <fluent-listbox id="xxx" style=" border: none; width: 100%;" size="0" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-    <fluent-option id="xxx" value="Denis Voituron (1)" blazor:onclick="3" blazor:elementreference="xxx">Denis Voituron (1)</fluent-option>
-    <fluent-option id="xxx" value="Vincent Baaij (2)" blazor:onclick="4" blazor:elementreference="xxx">Vincent Baaij (2)</fluent-option>
-    <fluent-option id="xxx" value="Bill Gates (3)" blazor:onclick="5" blazor:elementreference="xxx">Bill Gates (3)</fluent-option>
+    <fluent-option id="xxx" value="Denis Voituron (1)" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">Denis Voituron (1)</fluent-option>
+    <fluent-option id="xxx" value="Vincent Baaij (2)" aria-selected="false" blazor:onclick="4" blazor:elementreference="xxx">Vincent Baaij (2)</fluent-option>
+    <fluent-option id="xxx" value="Bill Gates (3)" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">Bill Gates (3)</fluent-option>
   </fluent-listbox>
 </div>

tests/Core/List/FluentListboxTests.FluentListbox_OptionValue.verified.razor.html

@@ -1,8 +1,8 @@
 
 <div style="overflow-y: auto; border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius) * 1px);">
   <fluent-listbox id="xxx" style=" border: none; width: 100%;" size="0" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-    <fluent-option id="xxx" value="1" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
-    <fluent-option id="xxx" value="2" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
-    <fluent-option id="xxx" value="3" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
+    <fluent-option id="xxx" value="1" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
+    <fluent-option id="xxx" value="2" aria-selected="false" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
+    <fluent-option id="xxx" value="3" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
   </fluent-listbox>
 </div>

tests/Core/List/FluentListboxTests.FluentListbox_Simple.verified.razor.html

@@ -1,8 +1,8 @@
 
 <div style="overflow-y: auto; border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius) * 1px);">
   <fluent-listbox id="xxx" style=" border: none; width: 100%;" size="0" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-    <fluent-option id="xxx" value="1-Denis Voituron" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
-    <fluent-option id="xxx" value="2-Vincent Baaij" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
-    <fluent-option id="xxx" value="3-Bill Gates" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
+    <fluent-option id="xxx" value="1-Denis Voituron" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
+    <fluent-option id="xxx" value="2-Vincent Baaij" aria-selected="false" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
+    <fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
   </fluent-listbox>
 </div>

tests/Core/List/FluentListboxTests.FluentListbox_WithIcons.verified.razor.html

@@ -1,23 +1,23 @@
 
 <div style="overflow-y: auto; border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest); border-radius: calc(var(--control-corner-radius) * 1px);">
   <fluent-listbox id="xxx" style=" border: none; width: 100%;" size="0" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-    <fluent-option id="xxx" value="1" blazor:onclick="3" blazor:elementreference="xxx">
+    <fluent-option id="xxx" value="1" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">
       Search
       <div slot="start" style="width: 20px; fill: var(--neutral-foreground-rest); display: inline-block;" blazor:onkeydown="6" blazor:onclick="7">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
           <circle cx="160" cy="160" r="140"></circle>
         </svg>
       </div>
     </fluent-option>
-    <fluent-option id="xxx" value="2" selected="" blazor:onclick="4" blazor:elementreference="xxx">
+    <fluent-option id="xxx" value="2" selected="" aria-selected="true" blazor:onclick="4" blazor:elementreference="xxx">
       Show
       <div slot="start" style="width: 20px; fill: var(--neutral-foreground-rest); display: inline-block;" blazor:onkeydown="8" blazor:onclick="9">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
           <circle cx="160" cy="160" r="140"></circle>
         </svg>
       </div>
     </fluent-option>
-    <fluent-option id="xxx" value="3" blazor:onclick="5" blazor:elementreference="xxx">
+    <fluent-option id="xxx" value="3" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">
       Generate
       <div slot="start" style="width: 20px; fill: var(--neutral-foreground-rest); display: inline-block;" blazor:onkeydown="10" blazor:onclick="11">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">

tests/Core/List/FluentSelectTests.FluentSelect_Appearance-Accent.verified.razor.html

@@ -1,11 +1,11 @@
 
 <style>
-#f7c6a55a2::part(listbox) { z-index: 9995; }
-#f7c6a55a2::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#f41c512e2::part(listbox) { z-index: 9995; }
+#f41c512e2::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 </style>
 <fluent-select id="xxx" appearance="accent" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-  <fluent-option id="xxx" value="1-Denis Voituron" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
-  <fluent-option id="xxx" value="2-Vincent Baaij" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
-  <fluent-option id="xxx" value="3-Bill Gates" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
+  <fluent-option id="xxx" value="1-Denis Voituron" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
+  <fluent-option id="xxx" value="2-Vincent Baaij" aria-selected="false" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
+  <fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
 </fluent-select>

tests/Core/List/FluentSelectTests.FluentSelect_Appearance-Filled.verified.razor.html

@@ -1,11 +1,11 @@
 
 <style>
-#f7ccbc23e::part(listbox) { z-index: 9995; }
-#f7ccbc23e::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#f2312380c::part(listbox) { z-index: 9995; }
+#f2312380c::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 </style>
 <fluent-select id="xxx" appearance="filled" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-  <fluent-option id="xxx" value="1-Denis Voituron" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
-  <fluent-option id="xxx" value="2-Vincent Baaij" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
-  <fluent-option id="xxx" value="3-Bill Gates" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
+  <fluent-option id="xxx" value="1-Denis Voituron" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
+  <fluent-option id="xxx" value="2-Vincent Baaij" aria-selected="false" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
+  <fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
 </fluent-select>

tests/Core/List/FluentSelectTests.FluentSelect_Appearance-Stealth.verified.razor.html

@@ -1,11 +1,11 @@
 
 <style>
-#f5636fa9f::part(listbox) { z-index: 9995; }
-#f5636fa9f::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#f4c7bb64a::part(listbox) { z-index: 9995; }
+#f4c7bb64a::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 </style>
 <fluent-select id="xxx" appearance="stealth" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-  <fluent-option id="xxx" value="1-Denis Voituron" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
-  <fluent-option id="xxx" value="2-Vincent Baaij" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
-  <fluent-option id="xxx" value="3-Bill Gates" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
+  <fluent-option id="xxx" value="1-Denis Voituron" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
+  <fluent-option id="xxx" value="2-Vincent Baaij" aria-selected="false" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
+  <fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
 </fluent-select>

tests/Core/List/FluentSelectTests.FluentSelect_CustomIndicator.verified.razor.html

@@ -1,7 +1,7 @@
 
 <style>
-#fb604ef0::part(listbox) { z-index: 9995; }
-#fb604ef0::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#f6e662eb3::part(listbox) { z-index: 9995; }
+#f6e662eb3::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 </style>
 <fluent-select id="xxx" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
@@ -10,8 +10,8 @@
       <circle cx="160" cy="160" r="140"></circle>
     </svg>
   </div>
-  <fluent-option id="xxx" value="1" blazor:onclick="5" blazor:elementreference="xxx">Option One</fluent-option>
-  <fluent-option id="xxx" value="2" blazor:onclick="6" blazor:elementreference="xxx">Option Two</fluent-option>
-  <fluent-option id="xxx" value="3" blazor:onclick="7" blazor:elementreference="xxx">Option Three</fluent-option>
-  <fluent-option id="xxx" value="4" blazor:onclick="8" blazor:elementreference="xxx">Option Four</fluent-option>
+  <fluent-option id="xxx" value="1" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">Option One</fluent-option>
+  <fluent-option id="xxx" value="2" aria-selected="false" blazor:onclick="6" blazor:elementreference="xxx">Option Two</fluent-option>
+  <fluent-option id="xxx" value="3" aria-selected="false" blazor:onclick="7" blazor:elementreference="xxx">Option Three</fluent-option>
+  <fluent-option id="xxx" value="4" aria-selected="false" blazor:onclick="8" blazor:elementreference="xxx">Option Four</fluent-option>
 </fluent-select>

tests/Core/List/FluentSelectTests.FluentSelect_NameAttribute.verified.razor.html

@@ -5,7 +5,7 @@
 
 </style>
 <fluent-select id="xxx" name="xxx" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-  <fluent-option id="xxx" value="1-Denis Voituron" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
-  <fluent-option id="xxx" value="2-Vincent Baaij" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
-  <fluent-option id="xxx" value="3-Bill Gates" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
+  <fluent-option id="xxx" value="1-Denis Voituron" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">1-Denis Voituron</fluent-option>
+  <fluent-option id="xxx" value="2-Vincent Baaij" aria-selected="false" blazor:onclick="4" blazor:elementreference="xxx">2-Vincent Baaij</fluent-option>
+  <fluent-option id="xxx" value="3-Bill Gates" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">3-Bill Gates</fluent-option>
 </fluent-select>

tests/Core/List/FluentSelectTests.FluentSelect_OptionTemplate.verified.razor.html

@@ -1,25 +1,25 @@
 
 <style>
-#f3d998730::part(listbox) { z-index: 9995; }
-#f3d998730::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+#f6cfd8ab0::part(listbox) { z-index: 9995; }
+#f6cfd8ab0::part(selected-value) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 
 </style>
 <fluent-select id="xxx" blazor:onchange="1" blazor:onkeydown="2" blazor:elementreference="xxx">
-  <fluent-option id="xxx" value="1" blazor:onclick="3" blazor:elementreference="xxx">
+  <fluent-option id="xxx" value="1" aria-selected="false" blazor:onclick="3" blazor:elementreference="xxx">
     <div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" blazor:onkeydown="6" blazor:onclick="7">
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
         <circle cx="160" cy="160" r="140"></circle>
       </svg>
     </div>
     Denis Voituron</fluent-option>
-  <fluent-option id="xxx" value="2" blazor:onclick="4" blazor:elementreference="xxx">
+  <fluent-option id="xxx" value="2" aria-selected="false" blazor:onclick="4" blazor:elementreference="xxx">
     <div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" blazor:onkeydown="8" blazor:onclick="9">
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
         <circle cx="160" cy="160" r="140"></circle>
       </svg>
     </div>
     Vincent Baaij</fluent-option>
-  <fluent-option id="xxx" value="3" blazor:onclick="5" blazor:elementreference="xxx">
+  <fluent-option id="xxx" value="3" aria-selected="false" blazor:onclick="5" blazor:elementreference="xxx">
     <div slot="end" style="width: 20px; fill: #F97316; display: inline-block;" blazor:onkeydown="10" blazor:onclick="11">
       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320">
         <circle cx="160" cy="160" r="140"></circle>