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/speeddial/accessibility.md
+25-25Lines changed: 25 additions & 25 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,22 +7,22 @@ control: SpeedDial
7
7
documentation: ug
8
8
---
9
9
10
-
# Accessibility in Blazor SpeedDial component
10
+
# Accessibility in Blazor Speed Dial component
11
11
12
-
The Blazor Speed Dial 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 Speed Dial 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/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
13
13
14
-
The accessibility compliance for the Blazor Speed Dial component is outlined below.
14
+
The accessibility compliance for the Blazor Speed Dial component is outlined below. The badges indicate whether each criterion is fully supported.
@@ -31,29 +31,29 @@ The accessibility compliance for the Blazor Speed Dial component is outlined bel
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="Meets requirement"> - 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="Partially meets requirement"> - 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="Does not meet requirement"> - The component does not meet the requirement.</div>
39
39
40
40
## WAI-ARIA attributes
41
41
42
-
The Blazor Speed Dial component followed the[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Speed Dial component:
42
+
The Blazor Speed Dial component follows relevant[WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) patterns to meet accessibility requirements. The following ARIA attributes are used in the Blazor Speed Dial component:
43
43
44
44
| Attributes | Purpose |
45
45
| ------------ | ----------------------- |
46
-
|`role=menu`|Specifies that the Speed Dial item has a submenu.|
47
-
|`role=menuitem`|Indicates an actionable item within the Speed Dial submenu. |
48
-
|`aria-label`|Indicates the Speed Dial Popup item text. |
49
-
|`aria-expanded`|It indicates whether the Speed Dial current state is expanded or collapsed. |
50
-
|`aria-haspopup`|It indicates whether the Speed Dial has popup items or not. |
51
-
|`aria-controls`|Attribute is set to the Speed Dial button and it points to the corresponding content. |
52
-
|`aria-disabled`| Indicates the state of menu item whether it is disabled. |
46
+
|`role=menu`|Identifies the popup that contains the Speed Dial action items. |
47
+
|`role=menuitem`|Identifies an actionable item within the Speed Dial popup. |
48
+
|`aria-label`|Provides an accessible name for the Speed Dial popup or items. |
49
+
|`aria-expanded`|Indicates whether the Speed Dial popup is expanded or collapsed. |
50
+
|`aria-haspopup`|Indicates that the trigger button opens a popup with menu items. |
51
+
|`aria-controls`|References the popup element controlled by the trigger button. |
52
+
|`aria-disabled`| Indicates that a menu item is disabled and unavailable for interaction. |
53
53
54
54
## Keyboard interaction
55
55
56
-
The Blazor Speed Dial component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/#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 Speed Dial component.
56
+
The Blazor Speed Dial component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/#keyboardinteraction)guidelines, making it accessible for users of assistive technologies and those who rely on keyboard navigation. The following keyboard shortcuts are supported:
57
57
58
58
| Windows | Mac | Actions |
59
59
|------------|-------------------| --- |
@@ -68,10 +68,10 @@ The Blazor Speed Dial component followed the [keyboard interaction](https://www.
68
68
69
69
## Ensuring accessibility
70
70
71
-
The Blazor Speed Dial component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
71
+
The Blazor Speed Dial component’s accessibility is validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright-based automated tests.
72
72
73
73
The accessibility compliance of the Blazor Speed Dial component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/speeddial) in a new window to evaluate the accessibility of the Blazor Speed Dial component with accessibility tools.
74
74
75
75
## See also
76
76
77
-
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
77
+
*[Accessibility in Syncfusion<supstyle="font-size:70%">®</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
Copy file name to clipboardExpand all lines: blazor/speeddial/display-modes.md
+9-8Lines changed: 9 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,23 +9,24 @@ documentation: ug
9
9
10
10
# Display Modes in Blazor Speed Dial Component
11
11
12
-
The action items in Blazor Speed Dial can be displayed in `Linear` and `Radial` display modes by setting [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property.
12
+
The action items in the Blazor Speed Dial can be displayed in Linear or Radialmodes by setting the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Mode) property. By default, Speed Dial items are displayed in Linear mode.
13
13
14
14
## Linear display mode
15
15
16
-
In `Linear` display mode, Speed Dial action items are displayed in a list-like format either horizontally or vertically. By default, Speed Dial items are displayed in `Linear` mode.
16
+
In `Linear` display mode, Speed Dial action items are displayed in a list-like layout either horizontally or vertically, based on the direction.
17
17
18
18
### Direction
19
19
20
-
You can open the action items on the top, left, up, and down side of the Speed Dial button by setting [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Direction) property. The default value is `Auto` where the action items are displayed based on the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position)of the Speed Dial.
20
+
You can open the action items to the left, right, up, or down side of the Speed Dial button by setting [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Direction) property. The default value is `Auto` where the action items are displayed based on the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Position)
21
+
of the Speed Dial.
21
22
22
23
The `Linear` directions of Speed Dial are as follows:
23
24
24
25
* Left - Action items are displayed on the left side of the button.
25
26
* Right - Action items are displayed on the right side of the button.
26
-
* Up - Action items are displayed on the top of the button.
27
-
* Down - Action items are displayed on the bottom of the button.
28
-
* Auto - Action items display direction auto calculated based on `Position` of the Speed Dial. If Speed Dial is position at bottom right, then action items displayed at top.
27
+
* Up - Action items are displayed above the button.
28
+
* Down - Action items are displayed below the button.
29
+
* Auto - The direction is automatically calculated based on the Speed Dial`Position` (for example, if positioned at the bottom-right, items open upward).
29
30
30
31
```cshtml
31
32
@@ -41,8 +42,8 @@ The `Linear` directions of Speed Dial are as follows:
41
42
42
43
```
43
44
44
-
45
+
45
46
46
47
## Radial display mode (Radial Menu)
47
48
48
-
In `Radial` mode, Speed Dial action items are displayed in a circular pattern like a radial menu. For more details about radial mode, check out the link[here](https://blazor.syncfusion.com/documentation/speeddial/getting-started).
49
+
In `Radial` mode, Speed Dial action items are displayed in a circular pattern similar to a radial menu. For more details about Radial mode, see the getting started guide[here](https://blazor.syncfusion.com/documentation/speeddial/getting-started).
Copy file name to clipboardExpand all lines: blazor/speeddial/events.md
+7-7Lines changed: 7 additions & 7 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 Speed Dial events that will be triggered when appropr
13
13
14
14
## Item clicked
15
15
16
-
The speed dial Component triggers the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) argument when an action item is clicked. You can use this event to perform the required action.
16
+
The Speed Dial component raises the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemClicked) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) argument when an action item is clicked. You can use this event to perform the required action.
17
17
18
18
{% tabs %}
19
19
{% highlight razor %}
@@ -40,7 +40,7 @@ The speed dial Component triggers the [ItemClicked](https://help.syncfusion.com/
40
40
41
41
## Created
42
42
43
-
The speed dial Component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Created) event when SpeedDial Component rendering is completed.
43
+
The Speed Dial component raises the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Created) event after the component has completed rendering. Use this event to run initialization logic, logging, or configuration that depends on the rendered instance.
44
44
45
45
{% tabs %}
46
46
{% highlight razor %}
@@ -67,7 +67,7 @@ The speed dial Component triggers the [Created](https://help.syncfusion.com/cr/b
67
67
68
68
## Opening
69
69
70
-
The speed dial Component triggers the [Opening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opening) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html)argument before the SpeedDial popup is opened.
70
+
The Speed Dial component raises the [Opening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opening) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html) before the Speed Dial popup opens. Use this event to prepare data, adjust items, or cancel opening based on conditions by setting the Cancel property in the event arguments.
71
71
72
72
{% tabs %}
73
73
{% highlight razor %}
@@ -94,7 +94,7 @@ The speed dial Component triggers the [Opening](https://help.syncfusion.com/cr/b
94
94
95
95
## Opened
96
96
97
-
The speed dial Component triggers the [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opened) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html)argument when SpeedDial popup is opened.
97
+
The Speed Dial component raises the [Opened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Opened) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html)after the Speed Dial popup is opened. Use this event to run logic that depends on the popup being visible, such as focusing elements or tracking analytics.
98
98
99
99
{% tabs %}
100
100
{% highlight razor %}
@@ -121,7 +121,7 @@ The speed dial Component triggers the [Opened](https://help.syncfusion.com/cr/bl
121
121
122
122
## Closing
123
123
124
-
The speed dial Component triggers the [Closing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closing) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html)argument before the SpeedDial popup is closed.
124
+
The Speed Dial component raises the [Closing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closing) event with [SpeedDialBeforeOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialBeforeOpenCloseEventArgs.html) before the Speed Dial popup closes. Use this event to validate state, save changes, or cancel closing by setting the Cancel property in the event arguments.
125
125
126
126
{% tabs %}
127
127
{% highlight razor %}
@@ -148,7 +148,7 @@ The speed dial Component triggers the [Closing](https://help.syncfusion.com/cr/b
148
148
149
149
## Closed
150
150
151
-
The speed dial Component triggers the [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closed) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html)argument when SpeedDial popup is closed.
151
+
The Speed Dial component raises the [Closed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_Closed) event with [SpeedDialOpenCloseEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialOpenCloseEventArgs.html)after the Speed Dial popup is closed. Use this event to perform cleanup or post-close actions.
152
152
153
153
{% tabs %}
154
154
{% highlight razor %}
@@ -175,7 +175,7 @@ The speed dial Component triggers the [Closed](https://help.syncfusion.com/cr/bl
175
175
176
176
## Item rendered
177
177
178
-
The speed dial Component triggers the [ItemRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemRendered) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html)argument for each `SpeedDialItem` once its rendered.
178
+
The Speed Dial component raises the [ItemRendered](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSpeedDial.html#Syncfusion_Blazor_Buttons_SfSpeedDial_ItemRendered) event with [SpeedDialItemEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SpeedDialItemEventArgs.html) for each SpeedDialItem after it is rendered. Use this event to customize item UI or attributes once the DOM is available.
0 commit comments