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/treemap/accessibility.md
+15-15Lines changed: 15 additions & 15 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,17 @@
1
1
---
2
2
layout: post
3
3
title: Accessibility in Blazor TreeMap Component | Syncfusion
4
-
description: Checkout and learn here all about Accessibility in Syncfusion Blazor TreeMap component and much more.
4
+
description: Check out and learn here all about Accessibility in Syncfusion Blazor TreeMap component and much more.
5
5
platform: Blazor
6
6
control: TreeMap
7
7
documentation: ug
8
8
---
9
9
10
10
# Accessibility in Blazor TreeMap Component
11
11
12
-
The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component follows commonly used accessibility guidelines and standards, such as [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).
12
+
The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component adheres to widely adopted accessibility standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles).
13
13
14
-
The accessibility compliance for the Blazor TreeMap component is outlined below.
14
+
The accessibility compliance for the Blazor TreeMap component is summarized below.
15
15
16
16
| Accessibility Criteria | Compatibility |
17
17
| -- | -- |
@@ -39,28 +39,28 @@ The accessibility compliance for the Blazor TreeMap component is outlined below.
39
39
40
40
## WAI-ARIA attributes
41
41
42
-
The Blazor TreeMap component follows the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to meet the accessibility. The following `WAI-ARIA` attributes are used in the TreeMap component:
42
+
The Blazor TreeMap component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) patterns to support accessibility. The following ARIA attributes are used in the TreeMap component:
43
43
44
44
| Attributes | Purpose |
45
45
| --- | --- |
46
-
|`role=region`|It specifies the TreeMap areas that do not support interactive functions like selection and highlight. |
47
-
|`role=button`|It specifies the TreeMap areas where interactive functions such as selection and highlight are available. |
48
-
|`aria-label`| Provides an accessible name for the title, subtitle, data labels, legend title, and legend item labels. |
46
+
|`role=region`|Identifies TreeMap areas without interactive behavior such as selection or highlight. |
47
+
|`role=button`|Identifies TreeMap areas where interactive behavior such as selection or highlight is available. |
48
+
|`aria-label`| Provides accessible names for the title, subtitle, data labels, legend title, and legend item labels. |
49
49
50
50
## Screen reading in TreeMap
51
51
52
-
Accessibility in the Blazor TreeMap component ensures that all users, regardless of ability or disability, can use screen reading. The following TreeMap elements will be read aloud using screen reading software, such as Narrator for Windows.
52
+
Accessibility support in the Blazor TreeMap component enables screen readers to announce relevant content. The following TreeMap elements are read by screen readers such as Narrator on Windows.
53
53
54
54
| Elements | Description |
55
55
| --- | --- |
56
-
| Data labels |Reads the labels displayed on leaf items of the TreeMap. |
57
-
| Title |Reads the title in the TreeMap. |
58
-
| Subtitle |Reads the title below the main title content in the TreeMap. |
59
-
| Legend title |Reads the title of the legend in the TreeMap. |
60
-
| Legend item label |Reads the label of the legend item in the TreeMap. |
56
+
| Data labels |Announces the labels displayed on leaf items of the TreeMap. |
57
+
| Title |Announces the TreeMap title. |
58
+
| Subtitle |Announces the subtitle below the main title. |
59
+
| Legend title |Announces the legend title in the TreeMap. |
60
+
| Legend item label |Announces the label of each legend item in the TreeMap. |
61
61
62
62
## Ensuring accessibility
63
63
64
-
The Blazor TreeMap component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
64
+
The Blazor TreeMap component’s accessibility is validated using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) tool during automated testing.
65
65
66
-
The accessibility compliance of the TreeMap component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/treemap) in a new window to evaluate the accessibility of the TreeMap component with accessibility tools.
66
+
The accessibility compliance of the TreeMap component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/treemap) in a new window to evaluate TreeMap accessibility with testing tools.
Copy file name to clipboardExpand all lines: blazor/treemap/color-mapping.md
+48-32Lines changed: 48 additions & 32 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,18 +1,19 @@
1
1
---
2
2
layout: post
3
3
title: Color Mapping in Blazor TreeMap Component | Syncfusion
4
-
description: Checkout and learn here all about Color Mapping in Syncfusion Blazor TreeMap component and much more.
4
+
description: Check out and learn how to configure Color Mapping in the Syncfusion Blazor TreeMap component and much more.
5
5
platform: Blazor
6
6
control: TreeMap
7
7
documentation: ug
8
8
---
9
9
10
10
# Color Mapping in Blazor TreeMap Component
11
11
12
-
Color mapping is used to customize the color for each group or item based on the specified types. The following options are available to customize the group and leaf items in the TreeMap component.
12
+
Color mapping customizes group and leaf item colors based on defined mapping types. The following options allow customizing group and leaf items in the TreeMap component.
13
13
14
14
## Range color mapping
15
15
16
+
Range color mapping applies colors to items based on numeric ranges of a specified value, defined by the [RangeColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RangeColorValuePath) property.
16
17
17
18
```cshtml
18
19
@using Syncfusion.Blazor.TreeMap
@@ -32,25 +33,28 @@ Color mapping is used to customize the color for each group or item based on the
32
33
public string FruitName { get; set; }
33
34
public double Count { get; set; }
34
35
};
36
+
35
37
public List<Fruit> Fruits = new List<Fruit> {
36
-
new Fruit { FruitName="Apple", Count=5000 },
37
-
new Fruit { FruitName="Mango", Count=3000 },
38
-
new Fruit { FruitName="Orange", Count=2300 },
39
-
new Fruit { FruitName="Banana", Count=500 },
40
-
new Fruit { FruitName="Grape", Count=4300 },
41
-
new Fruit { FruitName="Papaya", Count=1200 },
42
-
new Fruit { FruitName="Melon", Count=4500 }
38
+
new Fruit { FruitName = "Apple", Count = 5000 },
39
+
new Fruit { FruitName = "Mango", Count = 3000 },
40
+
new Fruit { FruitName = "Orange", Count = 2300 },
41
+
new Fruit { FruitName = "Banana", Count = 500 },
42
+
new Fruit { FruitName = "Grape", Count = 4300 },
43
+
new Fruit { FruitName = "Papaya", Count = 1200 },
44
+
new Fruit { FruitName = "Melon", Count = 4500 }
43
45
};
44
46
}
47
+
45
48
```
46
49
47
50
48
51
49
52
## Equal color mapping
50
53
51
-
Equal color mapping is used to fill colors to each item by specifying equal value present in the data source, that can be specified in the [EqualColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EqualColorValuePath) property.
54
+
Equal color mapping fills items with colors by matching equal values from the data source, specified by the [EqualColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_EqualColorValuePath) property.
@@ -71,24 +75,26 @@ Equal color mapping is used to fill colors to each item by specifying equal valu
71
75
public string Brand { get; set; }
72
76
};
73
77
public List<Car> Cars = new List<Car> {
74
-
new Car { Name="Mustang", Brand="Ford", Count=232 },
75
-
new Car { Name="EcoSport", Brand="Ford", Count=121 },
76
-
new Car { Name="Swift", Brand="Maruti", Count=143 },
77
-
new Car { Name="Baleno", Brand="Maruti", Count=454 },
78
-
new Car { Name="Vitara Brezza", Brand="Maruti", Count=545 },
79
-
new Car { Name="A3 Cabriolet", Brand="Audi",Count=123 },
80
-
new Car { Name="RS7 Sportback", Brand="Audi", Count=523 }
78
+
new Car { Name = "Mustang", Brand = "Ford", Count = 232 },
79
+
new Car { Name = "EcoSport", Brand = "Ford", Count = 121 },
80
+
new Car { Name = "Swift", Brand = "Maruti", Count = 143 },
81
+
new Car { Name = "Baleno", Brand = "Maruti", Count = 454 },
82
+
new Car { Name = "Vitara Brezza", Brand = "Maruti", Count = 545 },
83
+
new Car { Name = "A3 Cabriolet", Brand = "Audi",Count = 123 },
84
+
new Car { Name = "RS7 Sportback", Brand = "Audi", Count = 523 }
81
85
};
82
86
}
87
+
83
88
```
84
89
85
90
86
91
87
92
## Desaturation color mapping
88
93
89
-
Desaturation color mapping is used to apply colors to the items based on the [MinOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MinOpacity) and the [MaxOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MaxOpacity) properties in the[TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html).
94
+
Desaturation color mapping applies colors to items based on [MinOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MinOpacity) and [MaxOpacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_MaxOpacity) properties in [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html).
@@ -99,17 +105,19 @@ Desaturation color mapping is used to apply colors to the items based on the [Mi
99
105
</TreeMapLeafColorMappings>
100
106
</TreeMapLeafItemSettings>
101
107
</SfTreeMap>
108
+
102
109
```
103
110
104
-
N> Refer to the [code block](#range-color-mapping)to know about the property value of the **Fruits**.
111
+
N> See the [range color mapping](#range-color-mapping)section for the **Fruits** data model and values.
105
112
106
113
107
114
108
115
## Desaturation with multiple colors
109
116
110
-
Multiple colors are used to provide gradient effect to the TreeMap items based on the [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html) ranges and specify the **n** number of colors in the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ColorMapping) property.
117
+
Multiple colors provide a gradient effect to TreeMap items based on [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html) ranges. Specify multiple colors in the [ColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ColorMapping) property.
@@ -120,33 +128,38 @@ Multiple colors are used to provide gradient effect to the TreeMap items based o
120
128
</TreeMapLeafColorMappings>
121
129
</TreeMapLeafItemSettings>
122
130
</SfTreeMap>
131
+
123
132
```
124
133
125
-
N> Refer to the [code block](#range-color-mapping)to know about the property value of **Fruits**.
134
+
N> See the [range color mapping](#range-color-mapping)section for the **Fruits** data model and values.
126
135
127
136
128
137
129
138
## Palette color mapping
130
139
140
+
Palette color mapping assigns colors to items from a predefined set of colors specified using the [Palette](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_Palette) property.
N> Refer to the [code block](#equal-color-mapping)to know about the property value of **Cars**.
153
+
N> See the [equal color mapping](#equal-color-mapping)section for the **Cars** data model and values.
142
154
143
155
144
156
145
157
## Color for items excluded from color mapping
146
158
147
-
Get the excluded ranges from data source using the color mapping and apply the specific color to those items, without specifying the [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_StartRange) and the[EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_EndRange) properties.
159
+
Retrieve excluded ranges from the data source and apply a specific color to those items without specifying [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.ColorMapping.html#Syncfusion_Blazor_TreeMap_ColorMapping_EndRange) properties.
0 commit comments