You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: blazor/listbox/accessibility.md
+24-25Lines changed: 24 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,20 +9,20 @@ documentation: ug
9
9
10
10
# Accessibility in Blazor ListBox Component
11
11
12
-
The Blazor ListBox component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles)that are commonly used to evaluate accessibility.
12
+
The Blazor ListBox component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2](https://www.w3.org/TR/WCAG22/). It also implements appropriate [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) to support assistive technologies.
13
13
14
-
The accessibility compliance for the Blazor ListBox component is outlined below.
14
+
The following table summarizes the accessibility compliance of the Blazor ListBox component.
@@ -31,44 +31,43 @@ The accessibility compliance for the Blazor ListBox component is outlined below.
31
31
}
32
32
</style>
33
33
34
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/yes.png"alt="Yes"> - All features of the component meet the requirement.</div>
34
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/yes.png"alt="Meets requirement"> - All features of the component meet the requirement.</div>
35
35
36
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png"alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
36
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png"alt="Partially meets requirement"> - Some features of the component do not meet the requirement.</div>
37
37
38
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/no.png"alt="No"> - The component does not meet the requirement.</div>
38
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/no.png"alt="Does not meet requirement"> - The component does not meet the requirement.</div>
39
39
40
40
## WAI-ARIA attributes
41
41
42
-
The Blazor ListBox component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/)patterns to meet the accessibility. The following ARIA attributes are used in the Blazor ListBox component:
42
+
The Blazor ListBox component follows the [WAI-ARIA listbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) to meet accessibility requirements. The following ARIA attributes are used in the Blazor ListBox component:
43
43
44
44
| Attributes | Purpose |
45
45
| --- | --- |
46
-
|`role`| Indicates the ListBox component wrapper element as `listbox`, the `UL` element as `presentation`, and its list item as `option`. |
46
+
|`role`| Indicates the ListBox component wrapper element as `listbox`, the `ul` element as `presentation`, and each list item as `option`. |
47
47
|`aria-label`| Provides an accessible name for the ListBox component. |
48
-
|`aria-multiselectable`| Applied to the element with the ListBox role, tells assistive technologies that the list supports multiple selection. The default value is true. |
49
-
|`aria-selected`| Applied to elements with role option that are visually styled as selected to inform assistive technologies that the options are selected. |
48
+
|`aria-multiselectable`| Applied to the element with the `listbox` role to indicate that multiple selection is supported. This is applied when multiple selection is enabled (default behavior). |
49
+
|`aria-selected`| Applied to elements with the `option` role that are visually styled as selected to inform assistive technologies that the options are selected. |
50
50
51
51
## Keyboard interaction
52
52
53
-
The Blazor ListBox component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ListBox component.
54
-
53
+
The Blazor ListBox component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/#keyboardinteraction) guidelines, supporting users of assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor ListBox component.
55
54
| Windows | Mac| Actions |
56
55
| --- | --- | --- |
57
56
| <kbd>↑</kbd> | <kbd>↑</kbd> | Moves focus to the previous option. |
58
57
| <kbd>↓</kbd> | <kbd>↓</kbd> | Moves focus to the next option. |
59
-
| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves focus to first option. |
60
-
| <kbd>End</kbd> | <kbd>End</kbd> | Moves focus to last option. |
61
-
| <kbd>Space</kbd> | <kbd>Space</kbd> |Changes the selection state of the focused option. |
58
+
| <kbd>Home</kbd> | <kbd>Home</kbd> | Moves focus to the first option. |
59
+
| <kbd>End</kbd> | <kbd>End</kbd> | Moves focus to the last option. |
60
+
| <kbd>Space</kbd> | <kbd>Space</kbd> |Toggles the selection state of the focused option. |
62
61
| <kbd>Ctrl + A</kbd> | <kbd>⌘</kbd> + <kbd>A</kbd> | Selects all options in the list. |
63
62
| <kbd>Ctrl + Shift + Home</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>Home</kbd> | Selects the focused option and all options up to the first option. |
64
63
| <kbd>Ctrl + Shift + End</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>End</kbd> | Selects the focused option and all options down to the last option. |
65
-
| <kbd>Ctrl</kbd> + <kbd>↑</kbd> or <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> or <kbd>↓</kbd> |Press Ctrl key with up / down arrow or mouse to select multiple items. |
64
+
| <kbd>Ctrl</kbd> + <kbd>↑</kbd> or <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>↑</kbd> or <kbd>↓</kbd> |Moves focus without changing the current selection. Use Ctrl/Cmd with mouse click to toggle individual items. |
66
65
67
66
## Ensuring accessibility
68
67
69
-
The Blazor ListBox component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
68
+
The Blazor ListBox component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
70
69
71
-
The accessibility compliance of the Blazor ListBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/listbox) in a new window to evaluate the accessibility of the Blazor ListBox component with accessibility tools.
70
+
The accessibility compliance of the Blazor ListBox component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/listbox) in a new window to evaluate the component with accessibility tools.
Copy file name to clipboardExpand all lines: blazor/listbox/data-binding.md
+16-17Lines changed: 16 additions & 17 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,25 +9,25 @@ documentation: ug
9
9
10
10
# Data Binding in Blazor ListBox Component
11
11
12
-
The ListBox loads the data from local data sources using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property.
12
+
The ListBox loads data from local or remote sources using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property.
13
13
14
14
| Fields | Type | Description |
15
15
|------|------|-------------|
16
-
|[Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text)|`string`| Specifies the display text of each list item. |
17
-
|[Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value)|`string`| Specifies the hidden data value mapped to each list item that should contain a unique value. |
18
-
|[GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_GroupBy)|`string`| Specifies the category under which the list item has to be grouped. |
19
-
|[IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_IconCss)|`string`| Specifies the iconCss class that needs to be mapped. |
20
-
|[HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_HtmlAttributes)|`string`|Allows additional attributes to configure the elements in various ways to meet the criteria. |
16
+
|[Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Text)|`string`| Specifies the display text of each list item. |
17
+
|[Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_Value)|`string`| Specifies the hidden data value mapped to each list item and should be unique. |
18
+
|[GroupBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_GroupBy)|`string`| Specifies the category under which each list item is grouped. |
19
+
|[IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_IconCss)|`string`| Specifies the CSS class for an icon to display with the item. |
20
+
|[HtmlAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FieldSettingsModel.html#Syncfusion_Blazor_DropDowns_FieldSettingsModel_HtmlAttributes)|`object`|Specifies additional HTML attributes to configure item elements. |
21
21
22
-
N> When binding complex data to the ListBox, fields should be mapped correctly. Otherwise, the selected item remains undefined.
22
+
N> When binding complex data to the ListBox, map fields correctly. If the mapping is incorrect, selection and value binding may not work as expected.
23
23
24
24
## Local Data
25
25
26
-
Local data can be represented by the following ways.
26
+
Local data can be provided in the following ways.
27
27
28
28
### Array of string
29
29
30
-
The ListBox has support to load array of primitive data such as strings or numbers. Here, both value and text field acts as same.
30
+
The ListBox supports arrays of primitive values such as strings or numbers. In this case, both the Text and Value fields resolve to the same value.
31
31
32
32
```cshtml
33
33
@using Syncfusion.Blazor.DropDowns
@@ -43,7 +43,7 @@ public string[] Games = new string[] { "Badminton", "Cricket", "Football", "Golf
43
43
44
44
The ListBox can generate its list items through an array of object data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property.
45
45
46
-
In the following example, `id` and `sports` column from complex data have been mapped to the `Value` field and `Text` field, respectively.
46
+
In the following example, the `Text` property is mapped to the Text field and the `Id` property is mapped to the Value field.
47
47
48
48
```cshtml
49
49
@using Syncfusion.Blazor.DropDowns
@@ -75,9 +75,9 @@ In the following example, `id` and `sports` column from complex data have been m
75
75
76
76
### Array of complex object
77
77
78
-
The ListBox can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property.
78
+
The ListBox can generate items from an array of complex objects. Map nested properties to the [Fields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfListBox-2.html) property as needed.
79
79
80
-
In the following example, `sports.Name`column from complex data have been mapped to the `Text` field.
80
+
In the following example, the `Sports.Name`property from the complex data is mapped to the Text field.
81
81
82
82
```cshtml
83
83
@using Syncfusion.Blazor.DropDowns
@@ -109,14 +109,13 @@ In the following example, `sports.Name` column from complex data have been mappe
109
109
}
110
110
```
111
111
112
-
112
+
113
113
114
114
## Remote Data
115
115
116
-
The ListBox supports retrieval of data from remote data services with the help of [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html).
117
-
118
-
The following sample displays the employee names from `Employee` table.
116
+
The ListBox supports retrieving data from remote services using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html).
119
117
118
+
The following example displays customer IDs from the `Orders` table.
120
119
```csharp
121
120
122
121
@usingSyncfusion.Blazor.DropDowns
@@ -147,4 +146,4 @@ The following sample displays the employee names from `Employee` table.
0 commit comments