Skip to content

Commit a1657ca

Browse files
PrinceOliverPrinceOliver
authored
Merge pull request #4938 from syncfusion-content/BLAZ-910110-MultiH1C
910110: Update the accessibility section in Multi column documentation.
2 parents 7e310dd + 63be0d9 commit a1657ca

File tree

8 files changed

+183
-13
lines changed

8 files changed

+183
-13
lines changed

‎blazor-toc.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3425,8 +3425,6 @@
34253425
<a href="/blazor/multicolumn-combobox/data-binding">Data Binding</a>
34263426
</li>
34273427
<li> <a href="/blazor/multicolumn-combobox/column">Columns</a></li>
3428-
<li> <a href="/blazor/multicolumn-combobox/grouping">Grouping</a></li>
3429-
34303428
<li>
34313429
<a href="/blazor/multicolumn-combobox/placeholder-and-floatlabel">Placeholder and Floatlabel</a>
34323430
</li>
@@ -3436,13 +3434,16 @@
34363434
<li>
34373435
<a href="/blazor/multicolumn-combobox/custom-value">Custom Value</a>
34383436
</li>
3437+
<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
34393438
<li> <a href="/blazor/multicolumn-combobox/paging">Paging</a></li>
3439+
<li> <a href="/blazor/multicolumn-combobox/grouping">Grouping</a></li>
3440+
<li><a href="/blazor/multicolumn-combobox/grid-settings">Grid Settings</a></li>
3441+
<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>
3442+
<li> <a href="/blazor/multicolumn-combobox/template">Templates</a></li>
34403443
<li> <a href="/blazor/multicolumn-combobox/popup-setting">Popup Setting</a></li>
34413444
<li> <a href="/blazor/multicolumn-combobox/style">Style and Appearance</a></li>
3442-
<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
34433445
<li><a href="/blazor/multicolumn-combobox/localization">Localization</a></li>
3444-
<li><a href="/blazor/multicolumn-combobox/grid-settings">Grid Settings</a></li>
3445-
<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>
3446+
<li> <a href="/blazor/multicolumn-combobox/accessibility">Accessibility</a></li>
34463447
<li> <a href="/blazor/multicolumn-combobox/form-validation">Form Validation</a></li>
34473448
</ul>
34483449
</li>

‎blazor/multicolumn-combobox/accessibility.md

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
---
2+
layout: post
3+
title: Accessibility in Syncfusion Blazor MultiColumn ComboBox
4+
description: Checkout and learn here all about Accessibility in Syncfusion Blazor MultiColumn ComboBox component and much more.
5+
platform: Blazor
6+
control: MultiColumn ComboBox
7+
documentation: ug
8+
---
9+
10+
# Accessibility in Blazor MultiColumn ComboBox Component
11+
12+
The [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component has been designed with the `WAI-ARIA` specifications in mind, and applies the WAI-ARIA roles, states, and properties along with `keyboard support`. This component is characterized
13+
by complete keyboard interaction support and ARIA accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
14+
15+
The Blazor ComboBox 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.
16+
17+
The accessibility compliance for the Blazor ComboBox component is outlined below.
18+
19+
| Accessibility Criteria | Compatibility |
20+
| -- | -- |
21+
| [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
22+
| [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
23+
| [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
24+
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
25+
| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
26+
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
27+
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
28+
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
29+
30+
<style>
31+
.post .post-content img {
32+
display: inline-block;
33+
margin: 0.5em 0;
34+
}
35+
</style>
36+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
37+
38+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/partial.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
39+
40+
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
41+
42+
## WAI-ARIA attributes
43+
44+
The Blazor MultiColumn ComboBox component uses the `combobox` role, and each list item has an `option` role. The following `ARIA attributes` denotes the ComboBox state:
45+
46+
| **Properties** | **Functionalities** |
47+
| --- | --- |
48+
| `aria-haspopup` | Indicates whether the ComboBox input element has a popup list or not. |
49+
| `aria-expanded` | Indicates whether the popup list has expanded or not. |
50+
| `aria-selected` | Indicates the selected option. |
51+
| `aria-readonly` | Indicates the readonly state of the ComboBox element. |
52+
| `aria-disabled` | Indicates whether the ComboBox component is in a disabled state or not. |
53+
| `aria-activedescendent` | This attribute holds the ID of the active list item to focus its descendant child element. |
54+
| `aria-owns` | This attribute contains the ID of the popup list to indicate popup as a child element. |
55+
| `aria-autocomplete` | This attribute contains the ‘both’ to a list of options shows and the currently selected suggestion also shows inline. |
56+
57+
## Keyboard interaction
58+
59+
You can use the following key shortcuts to access the Blazor MultiColumn ComboBox without interruptions:
60+
61+
| **Keyboard shortcuts** | **Actions** |
62+
| --- | --- |
63+
|**Focus**|
64+
|<kbd>Alt + J</kbd> | Focuses on the first component of the sample. |
65+
|**Input Navigation**|
66+
| <kbd>Alt + Down arrow</kbd> | Opens the popup list. |
67+
| <kbd>Alt + Up arrow</kbd> | Closes the popup list. |
68+
| <kbd>Home</kbd> | Cursor moves before the first character in the input. |
69+
| <kbd>End</kbd> | Cursor moves before the last character in the input. |
70+
| <kbd>Shift + tab </kbd> | Focuses on the previous TabIndex element on the page when the popup is closed. Otherwise, closes the popup list and remains the focus of the component. |
71+
|**Selection**|
72+
| <kbd>Enter</kbd> | Selects the focused item, and when it is in open state, the popup list closes. Otherwise, toggles the popup list. |
73+
|**Popup Navigation**|
74+
| <kbd>Esc(Escape)</kbd> | Closes the popup list when it is in an open state and the currently selected item remains the same. |
75+
76+
## Ensuring accessibility
77+
78+
The Blazor MultiColumn ComboBox component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
79+
80+
The accessibility compliance of the MultiColumn ComboBox component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/combobox) in a new window to evaluate the accessibility of the MultiColumn ComboBox component with accessibility tools.
81+
82+
## See also
83+
84+
* [Accessibility in Syncfusion components](../common/accessibility)

‎blazor/multicolumn-combobox/code-snippet/column/format.razor

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
4+
<MultiColumnComboboxColumns>
5+
<MultiColumnComboboxColumn Field="Name" Width="200px"></MultiColumnComboboxColumn>
6+
<MultiColumnComboboxColumn Field="Price" Width="200px" Format="C2"></MultiColumnComboboxColumn> <!-- C2 for currency format -->
7+
</MultiColumnComboboxColumns>
8+
</SfMultiColumnComboBox>
9+
10+
11+
@code {
12+
public class Product
13+
{
14+
public string Name { get; set; }
15+
public double Price { get; set; }
16+
public string Availability { get; set; }
17+
public string Category { get; set; }
18+
public double Rating { get; set; }
19+
}
20+
21+
private List<Product> Products = new List<Product>();
22+
private string Value { get; set; } = "Smartphone";
23+
24+
protected override Task OnInitializedAsync()
25+
{
26+
Products = new List<Product>
27+
{
28+
new Product { Name = "Laptop", Price = 999.99, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
29+
new Product { Name = "Smartphone", Price = 599.99, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
30+
new Product { Name = "Tablet", Price = 299.99, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
31+
new Product { Name = "Headphones", Price = 49.99, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
32+
};
33+
return base.OnInitializedAsync();
34+
}
35+
}

‎blazor/multicolumn-combobox/code-snippet/grid-settings/enable-alt-row.razor

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
@using Syncfusion.Blazor.MultiColumnComboBox
2+
3+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product" EnableAltRow="true">
4+
</SfMultiColumnComboBox>
5+
6+
7+
@code {
8+
public class Product
9+
{
10+
public string Name { get; set; }
11+
public double Price { get; set; }
12+
public string Availability { get; set; }
13+
public string Category { get; set; }
14+
public double Rating { get; set; }
15+
}
16+
17+
private List<Product> Products = new List<Product>();
18+
private string Value { get; set; } = "Smartphone";
19+
20+
protected override Task OnInitializedAsync()
21+
{
22+
Products = new List<Product>
23+
{
24+
new Product { Name = "Laptop", Price = 999.99, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
25+
new Product { Name = "Smartphone", Price = 599.99, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
26+
new Product { Name = "Tablet", Price = 299.99, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
27+
new Product { Name = "Headphones", Price = 49.99, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
28+
};
29+
return base.OnInitializedAsync();
30+
}
31+
}

‎blazor/multicolumn-combobox/column.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -87,4 +87,15 @@ The following example demonstrates how to customize the appearance of the Multic
8787

8888
![Blazor MultiColumn ComboBox with custom attributes](./images/column/blazor_multicolumn_combobox_column-custom-attributes.gif)
8989

90+
## Setting the format
91+
92+
The [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_Format) property to a column in the SfMultiColumnComboBox, specify a valid format string that matches the data type of the column, such as numeric or date formats. For example, you can apply currency formatting to a price field by using the format "C2".
93+
94+
The following example the Price column uses "C2" to display values in a currency format.
95+
96+
{% highlight cshtml %}
97+
98+
{% include_relative code-snippet/column/format.razor %}
99+
100+
{% endhighlight %}
90101

‎blazor/multicolumn-combobox/grid-settings.md

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ documentation: ug
99

1010
# Grid Settings in Blazor MultiColumn ComboBox Component
1111

12-
## Setting the grid lines
12+
## Setting the gridlines
1313

1414
Grid lines refer to the visual lines displayed between rows and columns in a grid-like structure. You can customize how these lines appear by using the [GridLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_GridLines) property. This allows for control over the visibility of horizontal, vertical, both, or no grid lines at all. The default value is Default.
1515

@@ -21,7 +21,19 @@ The following example configures the GridLines property to show both horizontal
2121

2222
{% endhighlight %}
2323

24-
## Setting AllowColumnResizing
24+
## Setting alternate rows
25+
26+
The [EnableAltRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_EnableAltRow) property controls whether the rows in the grid are styled with alternating colors. This property helps in improving readability by differentiating rows visually. When enabled, every other row will be rendered with a different style, while all rows will have the same styling if this property is disabled.
27+
28+
The following example enables alternate row styling, where every other row will have a different style.
29+
30+
{% highlight cshtml %}
31+
32+
{% include_relative code-snippet/grid-settings/enable-alt-row.razor %}
33+
34+
{% endhighlight %}
35+
36+
## Resizing the column
2537

2638
The Column resizing allows users to adjust the width of columns in the MultiColumn ComboBox by dragging the edge of the column header. The [AllowColumnResizing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_AllowColumnResizing) property. This property is useful for providing flexibility in adjusting the grid layout based on user preferences.
2739

‎blazor/multicolumn-combobox/localization.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,3 @@ documentation: ug
1212
## Localization
1313

1414
[Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion Blazor components.
15-
16-
## Globalization
17-
18-
[Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component can be localized. Refer to [Blazor Globalization](https://blazor.syncfusion.com/documentation/common/globalization) topic helps to demonstrate how globalization can be implemented in a Blazor application.

‎blazor/multicolumn-combobox/style.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ Specify the boolean value to the [Disabled](https://help.syncfusion.com/cr/blazo
3333

3434
{% endhighlight %}
3535

36-
## CssClass
36+
## Applying custom CSS classes
3737

3838
Specifies the CSS class name that can be appended to the root element of the MultiColumn ComboBox. One or more custom CSS classes can be added to a MultiColumn ComboBox.
3939

@@ -60,4 +60,4 @@ You can customize the text color of a disabled component by targeting its CSS cl
6060

6161
{% endhighlight %}
6262

63-
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVBwUFMudrwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
63+
{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVBwUFMudrwO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}

0 commit comments

Comments
 (0)