Skip to content
24 changes: 12 additions & 12 deletions blazor/dropdown-tree/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ documentation: ug

# Accessibility in Blazor Dropdown Tree Component

The [Blazor Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree) component has been designed, keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications, and applied the WAI-ARIA roles, states, and properties along with `keyboard support`. This component is characterized 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.
The [Blazor Dropdown Tree](https://www.syncfusion.com/blazor-components/blazor-dropdowntree) component is designed with a strong commitment to accessibility, adhering to the [WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications. It automatically applies appropriate WAI-ARIA roles, states, and properties, alongside comprehensive keyboard support, to ensure seamless navigation and interaction for users relying on assistive technologies (AT) or keyboard-only navigation.

The Blazor Dropdown Tree 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.
The component follows established accessibility guidelines and standards, including the [ADA (Americans with Disabilities Act)](https://www.ada.gov/), [Section 508](https://www.section508.gov/), and [WCAG 2.2 (Web Content Accessibility Guidelines)](https://www.w3.org/TR/WCAG22/) standards. It also incorporates [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used in evaluating accessibility features.

The accessibility compliance for the Blazor Dropdown Tree component is outlined below.

Expand Down Expand Up @@ -51,9 +51,9 @@ The Blazor Dropdown Tree component followed the [WAI-ARIA](https://www.w3.org/WA
| `aria-disabled` | Indicates whether the Dropdown Tree component is in a disabled state or not. |
| `aria-controls` | This attribute contains the ID of the popup list to indicate this element is controlled by the popup list element |

## Keyboard interaction
## Keyboard Interaction

You can use the following key shortcuts to access the Dropdown Tree without interruptions:
The Blazor Dropdown Tree component offers comprehensive keyboard support, allowing users to navigate and interact with the component without a mouse. The following key shortcuts are available:

| Windows | Mac | Actions |
| --- | --- | --- |
Expand All @@ -64,23 +64,23 @@ You can use the following key shortcuts to access the Dropdown Tree without inte
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>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. |
|**Popup Navigation**| | |
| <kbd>Esc(Escape)</kbd> | <kbd>Esc</kbd> | Closes the popup when it is in an open state. |
| <kbd>↑</kbd> | <kbd>↑</kbd> | Goes to the previous item in the popup. |
| <kbd>↓</kbd> | <kbd>↓</kbd> | Goes to the next item in the popup. |
| <kbd>↑</kbd> | <kbd>↑</kbd> | Navigates to the previous item in the popup. |
| <kbd>↓</kbd> | <kbd>↓</kbd> | Navigates to the next item in the popup. |
| <kbd>→</kbd> | <kbd>→</kbd> | Expands the current item. |
| <kbd>←</kbd> | <kbd>←</kbd> | Collapses the current item in the popup. |
| <kbd>Home</kbd> | <kbd>Home</kbd> | Goes to the first item in the popup. |
| <kbd>End</kbd> | <kbd>End</kbd> | Goes to the last item in the popup. |
| <kbd>Home</kbd> | <kbd>Home</kbd> | Navigates to the first item in the popup. |
| <kbd>End</kbd> | <kbd>End</kbd> | Navigates to the last item in the popup. |
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item in the popup. |
| <kbd>Space</kbd> | <kbd>Space</kbd> | Checks the current item in the popup. |
|**Over All Checkbox**| | |
| <kbd>Space</kbd> | <kbd>Space</kbd> | Checks all the items in popup |

## Ensuring accessibility
## Ensuring Accessibility

The Blazor Dropdown Tree component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
The accessibility levels of the Blazor Dropdown Tree component are continuously validated through automated testing using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool.

The accessibility compliance of the Dropdown Tree component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/dropdowntree) in a new window to evaluate the accessibility of the Dropdown Tree component with accessibility tools.
A sample demonstrating the accessibility compliance of the Dropdown Tree component is available. Open the [sample](https://blazor.syncfusion.com/accessibility/dropdowntree) in a new window to evaluate its accessibility using various tools.

## See also
## See Also

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
28 changes: 15 additions & 13 deletions blazor/dropdown-tree/checkbox.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
---
layout: post
title: Checkbox in Blazor Dropdown Tree Component | Syncfusion
title: Checkbox Functionality in Blazor Dropdown Tree Component | Syncfusion
description: Checkout and learn here all about Checkbox in Syncfusion Blazor Dropdown Tree component and much more.
platform: Blazor
control: Dropdown Tree
documentation: ug
---

# Checkbox in Blazor Dropdown Tree Component
# Checkbox Functionality in Blazor Dropdown Tree Component

The Dropdown Tree component allows you to check more than one item from the tree without affecting the UI’s appearance by enabling the [ShowCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowCheckBox) property. When this property is enabled, checkbox appears before each item text in the popup.
The Dropdown Tree component allows users to select multiple items from the tree structure using checkboxes. This functionality is enabled via the [`ShowCheckBox`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowCheckBox) property. When `ShowCheckBox` is set to `true`, a checkbox appears before each item's text within the popup.

## Auto Check

By default, the checkbox state of the parent and child items in the Dropdown Tree will not be dependent over each other. If you need dependent checked state, then enable the [AutoUpdateCheckState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AutoUpdateCheckState) property.
By default, the checkbox state of parent and child items in the Dropdown Tree `TreeView` is independent. To establish a dependent relationship, enable the [`AutoUpdateCheckState`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AutoUpdateCheckState) property.

* If one or more child items are not in the checked state, then the parent item will be in the intermediate state.
When `AutoUpdateCheckState` is enabled:

* If all the child items are checked, then the parent item will also be in the checked state.

* If a parent item is checked, then all the child items will also be changed to the checked state.
* If one or more child items are unchecked, the parent item will display an intermediate (partially checked) state.
* If all child items are checked, the parent item will also transition to the checked state.
* Checking a parent item will automatically check all its child items.

In the following example, the [AutoUpdateCheckState](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_AutoUpdateCheckState) property is enabled.

Expand Down Expand Up @@ -56,16 +56,18 @@ In the following example, the [AutoUpdateCheckState](https://help.syncfusion.com
}
}
```
{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLIXahnAAXFBirf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Dropdown Tree Component](./images/auto-check.png)" %}

## Select/Unselect All

The Dropdown Tree component has built-in support to select all the tree items using the checkbox in the header.
The Dropdown Tree component offers built-in support to select or unselect all tree items using a single checkbox in the header.

When the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowSelectAll) property is set to true, a checkbox will be displayed in the popup header that allows you to select or unselect all the tree items in the popup.
Setting the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowSelectAll) property to `true` displays a "Select All" checkbox in the popup header. This checkbox allows users to toggle the checked state of all visible tree items.

Also we can select all the tree items programmatically using the [SelectAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_SelectAllAsync_System_Boolean_) method.
Additionally, programmatic control over the "Select All" functionality is available:

We can unselect all the tree items programmatically using the [SelectAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_SelectAllAsync_System_Boolean_) method by passing the parameter as false.
* Use the [`SelectAllAsync()`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_SelectAllAsync_System_Boolean_) method without parameters (or with `true`) to programmatically check all tree items.
* Use the `SelectAllAsync(false)` method to programmatically uncheck all tree items.

In the following example, the [ShowSelectAll](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_ShowSelectAll) property is enabled and [SelectAllAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfDropDownTree-2.html#Syncfusion_Blazor_Navigations_SfDropDownTree_2_SelectAllAsync_System_Boolean_) method is used.

Expand Down Expand Up @@ -121,5 +123,5 @@ In the following example, the [ShowSelectAll](https://help.syncfusion.com/cr/bla
}
}
```

{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVojOhdgKqrVnUA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
![MultiSelection in Blazor Dropdown Tree.](./images/blazor-dropdowntree-component-selectall.PNG)
Loading