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
@@ -31,43 +31,43 @@ The accessibility compliance for the Blazor Rating component is outlined below.
31
31
}
32
32
</style>
33
33
34
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Yes"> - All features of the component meet the requirement.</div>
34
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/full.png"alt="Full support"> - All features of the component meet the requirement.</div>
35
35
36
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
36
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/partial.png"alt="Partial support"> - Some features of the component do not meet the requirement.</div>
37
37
38
-
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="No"> - The component does not meet the requirement.</div>
38
+
<div><imgsrc="https://cdn.syncfusion.com/content/images/documentation/not-supported.png"alt="Not supported"> - The component does not meet the requirement.</div>
39
39
40
40
## WAI-ARIA attributes
41
41
42
-
The Blazor Rating component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/slider/)patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Rating component:
42
+
The Blazor Rating component follows the [WAI-ARIA slider pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) to meet accessibility requirements. The following ARIA attributes are used in the Blazor Rating component:
43
43
44
44
| Attributes | Purpose |
45
45
| ------------ | ----------------------- |
46
-
|`role=slider`|It defines an input where the user selects a value from within a specified range. |
47
-
|`role=button`|Specifies that the reset is a clickable element that resets the rating to its minimum value. |
48
-
|`aria-label`| Provides an accessible name for Rating. |
49
-
|`aria-valuemin`|It defines the minimum value of rating. |
50
-
|`aria-valuemax`|It defines the maximum value of rating. |
51
-
|`aria-valuenow`|It defines the current value of rating. |
52
-
|`aria-hidden`|It specifies whether the reset button is interactive or not. |
46
+
|`role=slider`|Defines an input where the user selects a value from within a specified range. |
47
+
|`role=button`|Indicates that the reset control is clickable and resets the rating to its minimum value. |
48
+
|`aria-label`| Provides an accessible name for the Rating component. |
49
+
|`aria-valuemin`|Defines the minimum rating value. |
50
+
|`aria-valuemax`|Defines the maximum rating value. |
51
+
|`aria-valuenow`|Announces the current rating value. |
52
+
|`aria-hidden`|Hides the element from assistive technologies when present. |
53
53
54
54
## Keyboard interaction
55
55
56
-
The Blazor Rating component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/slider/#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 Rating component.
56
+
The Blazor Rating component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/slider/#keyboardinteraction) guideline, improving accessibility for people who use assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Rating component.
57
57
58
58
| Windows | Mac | Actions |
59
59
|------------|-------------------| ---|
60
-
| <kbd>Space</kbd> | <kbd>Space</kbd> | When **Reset Button** is focused, resets to `min` value. |
60
+
| <kbd>Space</kbd> | <kbd>Space</kbd> | When the Reset button is focused, resets to the`min` value. |
61
61
| <kbd>↑</kbd> | <kbd>↑</kbd> | Increases the value. |
62
-
| <kbd>←</kbd> | <kbd>←</kbd> | Decreases the value; in RTL mode, increases the value. |
62
+
| <kbd>←</kbd> | <kbd>←</kbd> | Decreases the value; in right-to-left mode, increases the value. |
63
63
| <kbd>↓</kbd> | <kbd>↓</kbd> | Decreases the value. |
64
-
| <kbd>→</kbd> | <kbd>→</kbd> | Increases the value; in RTL mode, decreases the value. |
64
+
| <kbd>→</kbd> | <kbd>→</kbd> | Increases the value; in right-to-left mode, decreases the value. |
65
65
66
66
## Ensuring accessibility
67
67
68
-
The Blazor Rating component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
68
+
The Blazor Rating component’s accessibility is verified using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
69
69
70
-
The accessibility compliance of the Blazor Rating component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/rating) in a new window to evaluate the accessibility of the Blazor Rating component with accessibility tools.
70
+
The accessibility compliance of the Blazor Rating component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/rating) in a new window to evaluate the component with accessibility tools.
Copy file name to clipboardExpand all lines: blazor/rating/appearance.md
+11-11Lines changed: 11 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ documentation: ug
9
9
10
10
# Appearance in Blazor Rating Component
11
11
12
-
You can also customize the appearance of rating component.
12
+
The appearance of the Blazor Rating component can be customized to match application design requirements.
13
13
14
14
## Items count
15
15
@@ -23,13 +23,13 @@ You can specify the number of rating items using the [ItemsCount](https://help.s
23
23
24
24
```
25
25
26
-
In this example, the rating component will display `8` rating items. The `Value` property specifies the number of rating items that should be filled, so in this case `3` of the `8` rating items will be filled.
26
+
In this example, the rating component displays 8 rating items. The `Value` property specifies how many items appear filled, so 3 of the 8 items are filled.
27
27
28
28
29
29
30
30
## Disabled
31
31
32
-
You can disable the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Rating component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Disabled) property. When the `Disabled` property is set to `true`, the rating component will be disabled and the user will not be able to interact with it and a disabled rating component may have a different visual appearance than an enabled one.
32
+
Disable the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Rating component by using the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Disabled) property. When the `Disabled` property is set to `true`, the rating component will be disabled and the user will not be able to interact with it and a disabled rating component may have a different visual appearance than an enabled one.
33
33
34
34
```cshtml
35
35
@@ -43,7 +43,7 @@ You can disable the Syncfusion<sup style="font-size:70%">®</sup> Blazor Rati
43
43
44
44
## Visible
45
45
46
-
You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Visible) property of the Blazor Rating component to control the visibility of the component. When the `Visible` property is set to `true`, the rating component will be visible on the page. When it is set to `false`, the component will be hidden.
46
+
Use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Visible) property of the Blazor Rating component to control the visibility of the component. When the `Visible` property is set to `true`, the rating component will be visible on the page. When it is set to `false`, the component will be hidden.
47
47
48
48
```cshtml
49
49
@@ -57,7 +57,7 @@ You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
57
57
58
58
## Read only
59
59
60
-
You can use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ReadOnly) property of the Blazor Rating component to make the component non-interactive and prevent the user from changing the rating value.
60
+
Use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ReadOnly) property of the Blazor Rating component to make the component non-interactive and prevent changes to the rating value via mouse or keyboard.
61
61
62
62
```cshtml
63
63
@@ -71,11 +71,11 @@ You can use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz
71
71
72
72
## CssClass
73
73
74
-
You can customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_CssClass) property.
74
+
Customize the appearance of the rating component, such as by changing its colors, fonts, sizes, or other visual aspects by using the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_CssClass) property.
75
75
76
76
### Changing rating symbol border color
77
77
78
-
You can change the rating icon border color in Blazor Rating component, you can use the `CssClass` property and set the `text-stroke` CSS property of `.e-rating-icon` to your desired border color.
78
+
Change the rating icon border color in Blazor Rating component, you can use the `CssClass` property and set the `text-stroke` CSS property of `.e-rating-icon` to your desired border color.
79
79
80
80
```cshtml
81
81
@@ -97,7 +97,7 @@ You can change the rating icon border color in Blazor Rating component, you can
97
97
98
98
### Changing rated/un-rated symbol fill color
99
99
100
-
You can customize the fill colors of rated and un-rated icons in the Rating component using the `CssClass` property and the `linear-gradient` color-stops in the `background` CSS property of `.e-rating-icon`. The **first** color-stop defines the rated fill color and the **second** defines the un-rated fill color.
100
+
Customize the fill colors of rated and un-rated icons in the Rating component using the `CssClass` property and the `linear-gradient` color-stops in the `background` CSS property of `.e-rating-icon`. The **first** color-stop defines the rated fill color and the **second** defines the un-rated fill color.
101
101
102
102
```cshtml
103
103
@@ -117,13 +117,13 @@ You can customize the fill colors of rated and un-rated icons in the Rating comp
117
117
118
118
```
119
119
120
-
This will customize the rated fill color to `#ffe814` and un-rated fill color to `#d8d7d4`. `--rating-value` in the linear-gradient provides the current value of the rating item.
120
+
This customizes the rated fill color to `#ffe814` and the unrated fill color to `#d8d7d4`. The `--rating-value`custom property in the gradient reflects the current value of the rating item.
121
121
122
122
123
123
124
124
### Changing the item spacing
125
125
126
-
You can change the space between the rating items in Blazor Rating component, by using the `CssClass` property and setting the `margin`/`padding`CSS property of `.e-rating-item-container` to your desired size.
126
+
To change the space between rating items in the Blazor Rating component, use the `CssClass` property and set the `margin`or`padding` of `.e-rating-item-container` to the desired size.
127
127
128
128
```cshtml
129
129
@@ -144,7 +144,7 @@ You can change the space between the rating items in Blazor Rating component, by
144
144
145
145
## Changing icon using CssClass
146
146
147
-
You can change the rating item icon in Blazor Rating component, you can use the `CssClass` property and set the `content`CSS property of `.e-icons.e-star-filled:before` to your desired font icon.
147
+
To change the rating item icon in the Blazor Rating component, use the `CssClass` property and set the `content` of `.e-icons.e-star-filled:before` to the desired font icon.
Copy file name to clipboardExpand all lines: blazor/rating/events.md
+3-3Lines changed: 3 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ This section describes the rating events that will be triggered when appropriate
13
13
14
14
## Created
15
15
16
-
The rating component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Created) event when the rendering of the rating component is completed.
16
+
The rating component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_Created) event after the component rendering is completed. Use this event for initialization logic that depends on the rendered UI.
17
17
18
18
```cshtml
19
19
@@ -32,7 +32,7 @@ The rating component triggers the [Created](https://help.syncfusion.com/cr/blazo
32
32
33
33
## ValueChanged
34
34
35
-
The rating component triggers the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ValueChanged) event when the value of the rating is changed. The changed value is passed as the event argument.
35
+
The rating component triggers the [ValueChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_ValueChanged) event when the rating value changes. The new value is passed as the event argument.
36
36
37
37
```cshtml
38
38
@@ -51,7 +51,7 @@ The rating component triggers the [ValueChanged](https://help.syncfusion.com/cr/
51
51
52
52
## OnItemHover
53
53
54
-
The rating component triggers the [OnItemHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_OnItemHover) event when the rating item is hovered. The [RatingHoverEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.RatingHoverEventArgs.html)passed as an event argument provides the details of the hovered item.
54
+
The rating component triggers the [OnItemHover](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfRating.html#Syncfusion_Blazor_Inputs_SfRating_OnItemHover) event when a rating item is hovered. The [RatingHoverEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.RatingHoverEventArgs.html)in the event provides details such as the hovered item’s index and value.
0 commit comments