From 6f2cd7ec73cb028faac1892f9e303e40a6bbc6de Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Fri, 21 Jun 2024 03:15:27 +0300 Subject: [PATCH 1/2] docs(Gantt): add a11y draggable section with the sample --- components/gantt/accessibility/overview.md | 113 +++++++++++++++++++++ 1 file changed, 113 insertions(+) create mode 100644 components/gantt/accessibility/overview.md diff --git a/components/gantt/accessibility/overview.md b/components/gantt/accessibility/overview.md new file mode 100644 index 000000000..8c55476e7 --- /dev/null +++ b/components/gantt/accessibility/overview.md @@ -0,0 +1,113 @@ +--- +title: Accessibility Overview +page_title: Telerik UI for Blazor Gantt Documentation | Gantt Accessibility Overview +description: "Get started with the Telerik UI for Blazor Gantt and learn about its accessibility support for WAI-ARIA, Section 508, and WCAG 2.2." +tags: telerik,blazor,accessibility,wai-aria,wcag,gantt +slug: gantt-accessibility-overview +position: 0 +--- + +# Accessibility Overview + +The UI for Blazor Gantt component is WCAG 2.2 AA and Section 508 compliant. The component also follows the WAI-ARIA best practices for implementing the keyboard navigation for its component role, and is tested against the popular screen readers. + +# Blazor Gantt Accessibility Example + +WCAG 2.2 introduces the "Dragging Movements" criterion as an important part of the Operable principle. Its primary goal is to guarantee that any feature reliant on drag actions offers an alternative method that can be executed with a single click, enhancing user accessibility. + +The illustrative example below shows the Gantt tree columns reorder action, achievable through the [Column Menu]({%slug gantt-column-menu%}). Telerik UI for Blazor aims to offer a versatile API that allows users to trigger all functions programmatically or externally, meeting diverse accessibility requirements for any applications. + +The following example demonstrates the [accessibility compliance of the Gantt component]({%slug gantt-wai-aria-support%}). The described level of compliance is achievable with the [Ocean Blue A11y Accessibility Swatch]({%slug themes-accessibility-swatch%}). + +>caption Gantt accessibility compliance example + +````CSHTML +@*Evaluate the example with Axe Core or other accessibility tools*@ + + + + + + + + + + + + + + + + + + + + +@code { + private DateTime SelectedDate { get; set; } = new DateTime(2019, 11, 11, 6, 0, 0); + + public class FlatModel + { + public int Id { get; set; } + public int? ParentId { get; set; } + public string Title { get; set; } + public double PercentComplete { get; set; } + public DateTime Start { get; set; } + public DateTime End { get; set; } + } + + private int LastId { get; set; } = 1; + private List Data { get; set; } + + protected override void OnInitialized() + { + Data = new List(); + var random = new Random(); + + for (int i = 1; i < 6; i++) + { + var newItem = new FlatModel() + { + Id = LastId, + Title = "Employee " + i.ToString(), + Start = new DateTime(2020, 12, 10 + i), + End = new DateTime(2020, 12, 11 + i), + PercentComplete = Math.Round(random.NextDouble(), 2) + }; + + Data.Add(newItem); + var parentId = LastId; + LastId++; + + for (int j = 0; j < 5; j++) + { + Data.Add(new FlatModel() + { + Id = LastId, + ParentId = parentId, + Title = " Employee " + i + " : " + j.ToString(), + Start = new DateTime(2020, 12, 20 + j), + End = new DateTime(2020, 12, 21 + i + j), + PercentComplete = Math.Round(random.NextDouble(), 2) + }); + + LastId++; + } + } + + base.OnInitialized(); + } +} +```` + +## See also + * [Live demo: Gantt Accessibility](https://demos.telerik.com/blazor-ui/gantt/keyboard-navigation) \ No newline at end of file From 6197f70a09bda95204f92dcf8d06f44373c514be Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Tue, 25 Jun 2024 11:07:29 +0300 Subject: [PATCH 2/2] docs(Gantt): apply fixes as per comments --- components/gantt/accessibility/overview.md | 36 ++++++++++------------ 1 file changed, 17 insertions(+), 19 deletions(-) diff --git a/components/gantt/accessibility/overview.md b/components/gantt/accessibility/overview.md index 8c55476e7..6cc4aace9 100644 --- a/components/gantt/accessibility/overview.md +++ b/components/gantt/accessibility/overview.md @@ -22,7 +22,7 @@ The following example demonstrates the [accessibility compliance of the Gantt co >caption Gantt accessibility compliance example ````CSHTML -@*Evaluate the example with Axe Core or other accessibility tools*@ +@*Evaluate the example with Axe Core or another accessibility tool*@ Data { get; set; } @@ -77,7 +66,7 @@ The following example demonstrates the [accessibility compliance of the Gantt co { var newItem = new FlatModel() { - Id = LastId, + Id = LastId++, Title = "Employee " + i.ToString(), Start = new DateTime(2020, 12, 10 + i), End = new DateTime(2020, 12, 11 + i), @@ -85,29 +74,38 @@ The following example demonstrates the [accessibility compliance of the Gantt co }; Data.Add(newItem); - var parentId = LastId; - LastId++; + var parentId = newItem.Id; for (int j = 0; j < 5; j++) { Data.Add(new FlatModel() { - Id = LastId, + Id = LastId++, ParentId = parentId, Title = " Employee " + i + " : " + j.ToString(), Start = new DateTime(2020, 12, 20 + j), End = new DateTime(2020, 12, 21 + i + j), PercentComplete = Math.Round(random.NextDouble(), 2) }); - - LastId++; } } base.OnInitialized(); } + + public class FlatModel + { + public int Id { get; set; } + public int? ParentId { get; set; } + public string Title { get; set; } + public double PercentComplete { get; set; } + public DateTime Start { get; set; } + public DateTime End { get; set; } + } } ```` ## See also - * [Live demo: Gantt Accessibility](https://demos.telerik.com/blazor-ui/gantt/keyboard-navigation) \ No newline at end of file + * [Live demo: Gantt Accessibility](https://demos.telerik.com/blazor-ui/gantt/keyboard-navigation) + * [Live demo: Gantt Overview](https://demos.telerik.com/blazor-ui/gantt/overview) + * [Live demo: Blazor Accessibility](https://docs.telerik.com/blazor-ui/accessibility/overview) \ No newline at end of file