Skip to content

Commit 3e38708

Browse files
GowrimathiGowrimathi
authored
Merge pull request #6811 from syncfusion-content/983838-RangeSelectorUG
983838: Updated the UG content and example changes in the Range Selector.
2 parents b6c46f1 + 28ad205 commit 3e38708

File tree

14 files changed

+267
-247
lines changed

14 files changed

+267
-247
lines changed

‎blazor/range-selector/accessibility.md‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
---
22
layout: post
33
title: Accessibility in Blazor Range Selector Component | Syncfusion
4-
description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Range Selector component and more.
4+
description: Check out and learn about accessibility, keyboard navigation, and compliance in the Syncfusion Blazor Range Selector component.
55
platform: Blazor
66
control: Range Selector
77
documentation: ug
88
---
99

1010
# Accessibility in Blazor Range Selector Component
1111

12-
The Blazor Range Selector 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.
12+
The Blazor Range Selector component follows 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/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles).
1313

14-
The accessibility compliance for the Blazor Range navigator component is outlined below.
14+
The table below outlines accessibility compliance for the Blazor Range Selector component.
1515

1616
| Accessibility Criteria | Compatibility |
1717
| -- | -- |
@@ -21,7 +21,7 @@ The accessibility compliance for the Blazor Range navigator component is outline
2121
| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
2222
| [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
2323
| [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
24-
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) |<img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
24+
| [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
2525
| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
2626

2727
<style>
@@ -30,39 +30,40 @@ The accessibility compliance for the Blazor Range navigator component is outline
3030
margin: 0.5em 0;
3131
}
3232
</style>
33+
3334
<div><img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> - All features of the component meet the requirement.</div>
3435

3536
<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>
3637

3738
<div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
3839

3940

40-
## WAI-ARIA attributes
41+
## WAI-ARIA Attributes
4142

42-
The Blazor Range Selector component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Range Selector component:
43+
The component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns for accessibility. The following ARIA attributes are used:
4344

4445
* img (role)
4546
* region (role)
4647
* aria-label (attribute)
4748
* aria-hidden (attribute)
4849

49-
## Keyboard interaction
50+
## Keyboard Interaction
5051

51-
The Blazor Range Selector component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Range Selector component.
52+
The component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making it accessible for users relying on assistive technologies or keyboard navigation. Supported keyboard shortcuts:
5253

5354
| Windows | Mac | Description |
5455
| --- | --- | --- |
55-
| <kbd>Alt + J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves the focus to the Range Selector element. |
56-
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the focus to the Range Selector element. |
57-
| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the Range Selector. |
56+
| <kbd>Alt + J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves focus to the Range Selector element. |
57+
| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the Range Selector element. |
58+
| <kbd>Shift + Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus to the previous element in the Range Selector. |
5859
| <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | Prints the Range Selector. |
5960

60-
## Ensuring accessibility
61+
## Ensuring Accessibility
6162

62-
The Blazor Range Selector component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
63+
Accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
6364

64-
The accessibility compliance of the Blazor Range Selector component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/range-selector) in a new window to evaluate the accessibility of the Blazor Range Selector component with accessibility tools.
65+
Evaluate accessibility in the Blazor Range Selector component by opening the [sample](https://blazor.syncfusion.com/accessibility/range-selector) in a new window and using accessibility tools.
6566

66-
## See also
67+
## See Also
6768

68-
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
69+
* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)

‎blazor/range-selector/custom.md‎

Lines changed: 55 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
---
22
layout: post
33
title: Customization in Blazor Range Selector Component | Syncfusion
4-
description: Checkout and learn here all about customization in Syncfusion Blazor Range Selector component and more.
4+
description: Check out and learn here all about customization in Syncfusion Blazor Range Selector component and more.
55
platform: Blazor
66
control: Range Selector
77
documentation: ug
@@ -11,7 +11,7 @@ documentation: ug
1111

1212
## Navigator Appearance
1313

14-
The Range Selector can be customized by using the [RangeNavigatorStyleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html). The [SelectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_SelectedRegionColor) property is used to specify the color for the selected region, whereas the [UnselectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_UnselectedRegionColor) property is used to specify the color for the unselected region.
14+
Customize the Range Selector using [RangeNavigatorStyleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html). Use [SelectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_SelectedRegionColor) to set the color for the selected region and [UnselectedRegionColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorStyleSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorStyleSettings_UnselectedRegionColor) for the unselected region.
1515

1616
```cshtml
1717
@@ -26,21 +26,23 @@ The Range Selector can be customized by using the [RangeNavigatorStyleSettings](
2626
</RangeNavigatorSeriesCollection>
2727
</SfRangeNavigator>
2828
29-
@code{
29+
@code {
3030
public class StockDetails
3131
{
3232
public double Date { get; set; }
3333
public double Close { get; set; }
3434
}
35+
3536
public List<StockDetails> StockInfo = new List<StockDetails> {
36-
new StockDetails { Date = 12, Close = 28 },
37-
new StockDetails { Date = 34, Close = 44 },
38-
new StockDetails { Date = 45, Close = 48 },
39-
new StockDetails { Date = 56, Close = 50 },
40-
new StockDetails { Date = 67, Close = 66 },
41-
new StockDetails { Date = 78, Close = 78 },
42-
new StockDetails { Date = 89, Close = 84 },
37+
new StockDetails { Date = 12, Close = 28 },
38+
new StockDetails { Date = 34, Close = 44 },
39+
new StockDetails { Date = 45, Close = 48 },
40+
new StockDetails { Date = 56, Close = 50 },
41+
new StockDetails { Date = 67, Close = 66 },
42+
new StockDetails { Date = 78, Close = 78 },
43+
new StockDetails { Date = 89, Close = 84 }
4344
};
45+
4446
public int[] Value = new int[] { 45, 78 };
4547
}
4648
@@ -50,7 +52,7 @@ The Range Selector can be customized by using the [RangeNavigatorStyleSettings](
5052

5153
## Thumb
5254

53-
The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html) allows to customize the border, fill color, size, and type of thumb using the [RangeNavigatorThumbBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbBorder.html), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Fill), [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Height), [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Width), and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Type) properties. Thumbs can be of two shapes: **Circle** and **Rectangle**.
55+
Customize the thumb's border, fill color, size, and type using [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html), [RangeNavigatorThumbBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbBorder.html), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Fill), [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Height), [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Width), and [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorThumbSettings.html#Syncfusion_Blazor_Charts_RangeNavigatorThumbSettings_Type). Thumbs can be **Circle** or **Rectangle**.
5456

5557
```cshtml
5658
@@ -69,22 +71,21 @@ The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusi
6971
</RangeNavigatorSeriesCollection>
7072
</SfRangeNavigator>
7173
72-
@code{
73-
74+
@code {
7475
public class StockDetails
7576
{
7677
public double Date { get; set; }
7778
public double Close { get; set; }
7879
}
7980
8081
public List<StockDetails> StockInfo = new List<StockDetails> {
81-
new StockDetails { Date = 12, Close = 28 },
82-
new StockDetails { Date = 34, Close = 44 },
83-
new StockDetails { Date = 45, Close = 48 },
84-
new StockDetails { Date = 56, Close = 50 },
85-
new StockDetails { Date = 67, Close = 66 },
86-
new StockDetails { Date = 78, Close = 78 },
87-
new StockDetails { Date = 89, Close = 84 },
82+
new StockDetails { Date = 12, Close = 28 },
83+
new StockDetails { Date = 34, Close = 44 },
84+
new StockDetails { Date = 45, Close = 48 },
85+
new StockDetails { Date = 56, Close = 50 },
86+
new StockDetails { Date = 67, Close = 66 },
87+
new StockDetails { Date = 78, Close = 78 },
88+
new StockDetails { Date = 89, Close = 84 }
8889
};
8990
9091
public int[] Value = new int[] { 45, 78 };
@@ -96,7 +97,7 @@ The [RangeNavigatorThumbSettings](https://help.syncfusion.com/cr/blazor/Syncfusi
9697

9798
## Border
9899

99-
Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorBorder.html), the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Width) and the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Color) of the Range Selector border can be customized.
100+
Customize the Range Selector border using [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorBorder.html). Set the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Width) and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderModel.html#Syncfusion_Blazor_Charts_BorderModel_Color) properties.
100101

101102
```cshtml
102103
@@ -111,21 +112,23 @@ Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusio
111112
</RangeNavigatorSeriesCollection>
112113
</SfRangeNavigator>
113114
114-
@code{
115+
@code {
115116
public class StockDetails
116117
{
117118
public double Date { get; set; }
118119
public double Close { get; set; }
119120
}
121+
120122
public List<StockDetails> StockInfo = new List<StockDetails> {
121-
new StockDetails { Date = 12, Close = 28 },
122-
new StockDetails { Date = 34, Close = 44 },
123-
new StockDetails { Date = 45, Close = 48 },
124-
new StockDetails { Date = 56, Close = 50 },
125-
new StockDetails { Date = 67, Close = 66 },
126-
new StockDetails { Date = 78, Close = 78 },
127-
new StockDetails { Date = 89, Close = 84 },
123+
new StockDetails { Date = 12, Close = 28 },
124+
new StockDetails { Date = 34, Close = 44 },
125+
new StockDetails { Date = 45, Close = 48 },
126+
new StockDetails { Date = 56, Close = 50 },
127+
new StockDetails { Date = 67, Close = 66 },
128+
new StockDetails { Date = 78, Close = 78 },
129+
new StockDetails { Date = 89, Close = 84 }
128130
};
131+
129132
public int[] Value = new int[] { 45, 78 };
130133
}
131134
@@ -135,7 +138,7 @@ Using the [RangeNavigatorBorder](https://help.syncfusion.com/cr/blazor/Syncfusio
135138

136139
## Snapping
137140

138-
The [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AllowSnapping) property toggles the placement of the slider exactly to the left or right at the nearest interval.
141+
Enable the [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AllowSnapping) property to snap the slider to the nearest interval.
139142

140143
```cshtml
141144
@@ -149,30 +152,31 @@ The [AllowSnapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char
149152
</RangeNavigatorSeriesCollection>
150153
</SfRangeNavigator>
151154
152-
@code{
155+
@code {
153156
public class StockDetails
154157
{
155158
public double Date { get; set; }
156159
public double Close { get; set; }
157160
}
158161
159162
public List<StockDetails> StockInfo = new List<StockDetails> {
160-
new StockDetails { Date = 12, Close = 28 },
161-
new StockDetails { Date = 34, Close = 44 },
162-
new StockDetails { Date = 45, Close = 48 },
163-
new StockDetails { Date = 56, Close = 50 },
164-
new StockDetails { Date = 67, Close = 66 },
165-
new StockDetails { Date = 78, Close = 78 },
166-
new StockDetails { Date = 89, Close = 84 },
163+
new StockDetails { Date = 12, Close = 28 },
164+
new StockDetails { Date = 34, Close = 44 },
165+
new StockDetails { Date = 45, Close = 48 },
166+
new StockDetails { Date = 56, Close = 50 },
167+
new StockDetails { Date = 67, Close = 66 },
168+
new StockDetails { Date = 78, Close = 78 },
169+
new StockDetails { Date = 89, Close = 84 }
167170
};
171+
168172
public int[] Value = new int[] { 45, 78 };
169173
}
170174
171175
```
172176

173177
## Animation
174178

175-
Animation for the Range Selector is enabled by default. The speed of the animation can be controlled using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AnimationDuration) property. The default value of the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AnimationDuration) property is **500** milliseconds.
179+
Animation is enabled by default. Control the speed using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_AnimationDuration) property. The default is **500** milliseconds.
176180

177181
```cshtml
178182
@@ -186,27 +190,29 @@ Animation for the Range Selector is enabled by default. The speed of the animati
186190
</RangeNavigatorSeriesCollection>
187191
</SfRangeNavigator>
188192
189-
@code{
193+
@code {
190194
public class StockDetails
191195
{
192196
public double Date { get; set; }
193197
public double Close { get; set; }
194198
}
199+
195200
public List<StockDetails> StockInfo = new List<StockDetails> {
196-
new StockDetails { Date = 12, Close = 28 },
197-
new StockDetails { Date = 34, Close = 44 },
198-
new StockDetails { Date = 45, Close = 48 },
199-
new StockDetails { Date = 56, Close = 50 },
200-
new StockDetails { Date = 67, Close = 66 },
201-
new StockDetails { Date = 78, Close = 78 },
202-
new StockDetails { Date = 89, Close = 84 },
201+
new StockDetails { Date = 12, Close = 28 },
202+
new StockDetails { Date = 34, Close = 44 },
203+
new StockDetails { Date = 45, Close = 48 },
204+
new StockDetails { Date = 56, Close = 50 },
205+
new StockDetails { Date = 67, Close = 66 },
206+
new StockDetails { Date = 78, Close = 78 },
207+
new StockDetails { Date = 89, Close = 84 }
203208
};
209+
204210
public int[] Value = new int[] { 45, 78 };
205211
}
206212
207213
```
208214

209215
## See Also
210216

211-
* [Grid and Tick Lines](./grid-tick/)
212-
* [Labels](./labels/)
217+
* [Grid and Tick Lines](./grid-tick)
218+
* [Labels](./labels)

0 commit comments

Comments
 (0)