Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion blazor/3D-chart/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Getting Stared with Blazor 3D Chart Component | Syncfusion
title: Getting Stared with Blazor 3DChart Component | Syncfusion
description: Checkout and learn about getting started with Blazor 3D Chart component in Blazor Server App using Visual Studio and more.
platform: Blazor
control: 3D Chart
Expand Down
2 changes: 1 addition & 1 deletion blazor/chart/getting-started-with-maui-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ documentation: ug

This section explains you through the step-by-step process of integrating the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Chart component into your Blazor MAUI application using both Visual Studio and Visual Studio Code.

> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistant](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)
> **Ready to streamline your Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor development?** <br/>Discover the full potential of Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components with Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Syncfusion<sup style="font-size:70%">&reg;</sup> CodeStudio and more. [Explore Syncfusion<sup style="font-size:70%">&reg;</sup> AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview)

{% tabcontents %}

Expand Down
1 change: 0 additions & 1 deletion blazor/datepicker/getting-started-with-web-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -252,4 +252,3 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
1. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app)
2. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
3. [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app)

80 changes: 38 additions & 42 deletions blazor/gantt-chart/accessibility.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ documentation: ug

# Accessibility in Blazor Gantt Chart Component

The Blazor Gantt 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 Syncfusion Blazor Gantt Chart component adheres to accessibility guidelines, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) standards, ensuring compatibility with assistive technologies, including those relying on assistive technologies.

The accessibility compliance for the Blazor Gantt component is outlined below.

Expand Down Expand Up @@ -39,29 +39,28 @@ The accessibility compliance for the Blazor Gantt component is outlined below.

## WAI-ARIA

The Blazor Gantt component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Gantt component:
The Blazor Gantt component implements [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to enhance accessibility. The following ARIA attributes are applied:

The following ARIA attributes are used in Blazor Gantt:


| **Attributes** | **Description** |
| --- | --- |
| `treegrid (role)` | Used to convey a significant and contextual message to the user. This attribute is added to the `e-table` element present in the Gantt, which represents Grid part. |
| `gridcell (role)` | This attribute is added to the `td` elements present within the `e-table`, which represents the work cells of Gantt .|
| `columnheader (role)` | This attribute is added to the `th` elements within the `e-table`, which represents the header cells of Grid table. |
| `separator (role)` | This attribute is added to the `e-split-bar` element, which represents the splitter between the Grid table and Chart. |
| `dialog (role)` | This attribute is added to the `e-dialog` element, which represents the pop-up dialog. |
| `toolbar (role)` | This attribute is added to the `e-gantt-toolbar` element, which represents the toolbars of Gantt. |
| `aria-label` | It indicates the element's information`<br>`. It is assigned to the Gantt UI elements such as timeline cell, taskbar, left label, right label, dependency line, and event markers. |
| `aria-selected` | This attribute is assigned to the Gantt chart row and is set to `false` by default. The value is changed to `true` when the user selects a grid cell or task. |
| `aria-expanded` | This attribute is assigned to the Gantt chart parent task row. The value is changed to `true` when the user clicks a parent taskbar to expand. After the user clicked a parent taskbar to collapse, the attribute value is changed to `false`. |
| `aria-grabbed` | This attribute is assigned to the taskbars of Gantt when the user tries to achieve taskbar editing. |
| Attributes | Description |
|------------|-------------|
| `treegrid (role)` | Applied to the `e-table` element in the Gantt's grid section to indicate a treegrid structure. |
| `gridcell (role)` | Added to `td` elements within the `e-table` to represent work cells in the Gantt grid. |
| `columnheader (role)` | Assigned to `th` elements within the `e-table` to denote header cells in the grid. |
| `separator (role)` | Used for the `e-split-bar` element, representing the splitter between the grid and chart sections. |
| `dialog (role)` | Applied to the `e-dialog` element for pop-up dialogs in the Gantt. |
| `toolbar (role)` | Assigned to the `e-gantt-toolbar` element to indicate the toolbar. |
| `aria-label` | Provides descriptive information for UI elements, such as timeline cells, taskbars, labels, dependency lines, and event markers. |
| `aria-selected` | Indicates selection state for chart rows, set to **false** by default and `true` when a cell or task is selected. |
| `aria-expanded` | Used for parent task rows, set to `true` when expanded and **false** when collapsed. |
| `aria-grabbed` | Applied to taskbars during editing to indicate drag-and-drop interaction. |

## Keyboard navigation

The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/) guideline, ensuring accessibility for users of assistive technologies (AT) and those who rely solely on keyboard navigation. The following keyboard shortcuts are supported by the Gantt component:

<b>Focus Elements</b>
### Focus elements

| Windows | MAC | Actions |
| ----- | ----- | ----- |
Expand All @@ -76,7 +75,7 @@ The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/AR
| <kbd>←</kbd> | <kbd>←</kbd> | Moves the cell focus left side from the focused cell. |
| <kbd>Alt</kbd> + <kbd>W</kbd> | <kbd>⌥</kbd> + <kbd>W</kbd> | Moves the focus to the gantt content element. |

<b>Expand/Collapse</b>
### Expand/Collapse

| Windows | MAC | Actions |
| ----- | ----- | ----- |
Expand All @@ -85,7 +84,7 @@ The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/AR
| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>↑</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>↑</kbd> | Collapse the selected row. |
| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>↓</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>←</kbd> | Expands the selected row. |

<b>Selection</b>
### Selection

| Windows | MAC | Actions |
| ----- | ----- | ----- |
Expand All @@ -102,14 +101,14 @@ The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/AR
| <kbd>Esc</kbd> | <kbd>Esc</kbd> | Deselects all the selected row/cells. |
| <kbd>Ctrl</kbd> + <kbd>A</kbd> | <kbd>⌘</kbd> + <kbd>A</kbd> | Select all the row/cells in the current page. |

<b>Clipboard</b>
### Clipboard

| Windows | MAC | Actions |
| ----- | ----- | ----- |
| <kbd>Ctrl</kbd> + <kbd>C</kbd> | <kbd>⌘</kbd> + <kbd>C</kbd> | Copies selected rows or cells data into the clipboard. |
| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>H</kbd> | Copies selected rows or cells data with header into clipboard. |
<b>Context Menu</b>
| Windows | Mac | Action |
|---------|-----|--------|
| <kbd>Ctrl</kbd> + <kbd>C</kbd> | <kbd>⌘</kbd> + <kbd>C</kbd> | Copies selected rows or cells to the clipboard. |
| <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>H</kbd> | <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>H</kbd> | Copies selected rows or cells with headers to the clipboard. |

### Context menu

| Windows | MAC | Actions |
| ----- | ----- | ----- |
Expand All @@ -120,7 +119,7 @@ The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/AR
| <kbd>Left</kbd> | <kbd>Left</kbd> | Close the current sub menu and navigates to the parent menu. |
| <kbd>Right</kbd> | <kbd>Right</kbd> | Navigates and open the next sub menu. |

<b>Cell Editing</b>
### Cell editing

| Windows | MAC | Actions |
| ----- | ----- | ----- |
Expand All @@ -132,48 +131,48 @@ The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/AR
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Navigates to the previous editable cell, saves the current cell, and starts editing the previous cell. |
| <kbd>Shift</kbd> + <kbd>Enter</kbd> | <kbd>⇧</kbd> + <kbd>Enter</kbd> | Saves the current cell and starts editing the previous row cell. |

<b>Filtering</b>
### Filtering

| Windows | MAC | Actions |
| ----- | ----- | ----- |
| <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens the filter menu when its header element is in focused state. |

<b>Column Menu</b>
### Column Menu

| Windows | MAC | Actions |
| ----- | ----- | ----- |
| <kbd>Alt</kbd> + <kbd>↓</kbd> | <kbd>⌥</kbd> + <kbd>↓</kbd> | Opens column menu when its header element is in focused state. |

<b>Reordering</b>
### Reordering

| Windows | MAC | Actions |
| ----- | ----- | ----- |
| <kbd>Ctrl</kbd> + <kbd>←</kbd> / <kbd>→</kbd> | <kbd>⌘</kbd> + <kbd>←</kbd> / <kbd>→</kbd> | Reorders the focused header column to the left or right side. |

<b>Sorting</b>
### Sorting

| Windows | MAC | Actions |
| ----- | ----- | ----- |
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Performs sorting(ascending/descending) on a column when its header element is in focused state. |
| <kbd>Ctrl</kbd> + <kbd>Enter</kbd> | <kbd>⌘</kbd> + <kbd>Enter</kbd> | Performs multi-sorting on a column when its header element is in focused state. |
| <kbd>Shift</kbd> + <kbd>Enter</kbd> | <kbd>⇧</kbd> + <kbd>Enter</kbd> | Clears sorting for the focused header column. |

<b>Toolbar</b>
### Toolbar

| Windows | MAC | Actions |
| ----- | ----- | ----- |
| <kbd>←</kbd> | <kbd>←</kbd> | Focuses the previous element. |
| <kbd>→</kbd> | <kbd>→</kbd> | Focuses the next element. |
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Performs the focused toolbar element action. |

<b>Tooltip</b>
### Tooltip

| Windows | MAC | Actions |
| ----- | ----- | ----- |
| <kbd>Escape</kbd> | <kbd>Escape</kbd> | Closes or dismisses the tooltip. |
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | A form control receiving focus (say through tab key), opens the tooltip, and on focus out closes it. |

<b>Dialog Editing</b>
### Dialog editing

| Windows | MAC | Actions |
| ----- | ----- | ----- |
Expand All @@ -185,15 +184,12 @@ The Gantt component follows the [keyboard interaction](https://www.w3.org/WAI/AR
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Navigates to the next editable cell, saves the current cell, and starts editing the next cell in the dialog elements. |
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Navigates to the previous editable cell, saves the current cell, and starts editing the previous cell in the dialog elements. |

## Validate Accessibility Compliance

## Ensuring accessibility

The Blazor Gantt component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.

The accessibility compliance of the Blazor Gantt component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/gantt-chart) in a new window to evaluate the accessibility of the Blazor Gantt component with accessibility tools.

N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5) to know how to render and configure the Gantt.
Accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests to ensure compliance with WCAG 2.2 and other standards. Evaluate the accessibility of the Blazor Gantt Chart component using the [sample](https://blazor.syncfusion.com/accessibility/gantt-chart) in a new window with accessibility tools.

## See also
## Related Resources

* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
- [Accessibility in Syncfusion Blazor Components](https://blazor.syncfusion.com/documentation/common/accessibility)
- [Blazor Gantt Chart Feature Tour](https://www.syncfusion.com/blazor-components/blazor-gantt-chart)
- [Blazor Gantt Chart Example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap5)
Loading