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/toolbar/accessibility.md
+10-9Lines changed: 10 additions & 9 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ documentation: ug
9
9
10
10
# Accessibility in Blazor Toolbar Component
11
11
12
-
The [Blazor Toolbar](https://www.syncfusion.com/blazor-components/blazor-toolbar) component has been designed, keeping in mind the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/practices/) specifications, and applying the WAI-ARIA roles, states and properties along with keyboard support for people who use assistive devices. WAI-ARIA accessibility support is achieved through attributes like `aria-label` and `aria-orientation`, It provides information about elements in a document for assistive technology. The component implements keyboard navigation support by following the[WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/practices/), and has been tested in major screen readers.
12
+
The [Blazor Toolbar](https://www.syncfusion.com/blazor-components/blazor-toolbar) component is designed with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/practices/) specifications, applying WAI-ARIA roles, states, and properties, along with keyboard support for assistive devices. WAI-ARIA accessibility support, achieved through attributes like `aria-label` and `aria-orientation`, provides information about elements in a document for assistive technology. The component implements keyboard navigation support by following [WAI-ARIA practices](https://www.w3.org/WAI/ARIA/apg/practices/), and has been tested in major screen readers.
13
13
14
-
The Blazor Toolbar 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.
14
+
The Blazor Toolbar component adheres to 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) commonly used for accessibility evaluation.
15
15
16
16
The accessibility compliance for the Blazor Toolbar component is outlined below.
17
17
@@ -39,9 +39,9 @@ The accessibility compliance for the Blazor Toolbar component is outlined below.
39
39
40
40
<div><imgsrc="https://cdn.syncfusion.com/content/images/landing-page/no.png"alt="No"> - The component does not meet the requirement.</div>
41
41
42
-
## WAI-ARIA attributes
42
+
## WAI-ARIA Attributes
43
43
44
-
Blazor Toolbar component is designed by considering [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) standard. Toolbar is supported with ARIA Accessibility which is accessible by on-screen readers, and other assistive technology devices.
44
+
The Blazor Toolbar component is designed considering the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/) standard. ARIA Accessibility support ensures the Toolbar is accessible by screen readers and other assistive technology devices.
45
45
46
46
The following list of attributes are added in the Toolbar.
47
47
@@ -54,25 +54,26 @@ The following list of attributes are added in the Toolbar.
54
54
| aria-haspopup | Attribute is set to the popup element to indicates the popup mode of the Toolbar. Default value is false. When popup mode is enabled, attribute value has to be changed to `true`. |
55
55
| aria-disabled | Attribute set to the ToolBar element to indicates the disabled state of the ToolBar. |
56
56
57
-
## Keyboard interaction
57
+
## Keyboard Interaction
58
58
59
59
Keyboard navigation is enabled, by default. Possible keys are:
60
60
61
61
| Windows | Mac | Actions |
62
62
|-------- | ------ | ------|
63
63
| <kbd>←</kbd> | <kbd>←</kbd> | Focuses the previous element. |
64
64
| <kbd>→</kbd> | <kbd>→</kbd> | Focuses the next element. |
65
-
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | When focused on a ToolBar command, clicking the key triggers the click of Toolbar element. When popup drop-down icon is focused, the popup opens. |
65
+
| <kbd>Enter</kbd> | <kbd>Enter</kbd> | When focused on a ToolBar Item, clicking the key triggers the click of Toolbar element. When popup drop-down icon is focused, the popup opens. |
The Blazor Toolbar component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) software tool during automated testing.
72
+
The accessibility levels of the Blazor Toolbar component are ensured through automated testing using the [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright)
73
+
software tool.
73
74
74
75
The accessibility compliance of the Toolbar component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/toolbar) in a new window to evaluate the accessibility of the Toolbar component with accessibility tools.
75
76
76
-
## See also
77
+
## See Also
77
78
78
79
*[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/toolbar/align-items-using-spacer.md
+11-5Lines changed: 11 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -9,9 +9,9 @@ documentation: ug
9
9
10
10
# Align Items Using Spacer in Blazor Toolbar Component
11
11
12
-
A Toolbar [Spacer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type)is used for managing the alignment of a toolbar items. It creates an adjustable empty space within the toolbar, providing a clear separation between different items. The spacer dynamically adapts to the toolbar's width.
12
+
A Toolbar [`Spacer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Type)manages the alignment of toolbar items. It creates an adjustable empty space within the toolbar, providing clear separation between different items. The spacer dynamically adapts to the toolbar's width.
13
13
14
-
To achieve different alignment styles, the spacer can be strategically placed among the toolbar items:
14
+
To achieve different alignment styles, strategically place spacers within the toolbar items:
15
15
16
16
## Left, Center, and Right alignment
17
17
@@ -34,11 +34,13 @@ Insert spacers at the end of the items on the left and in the center. This will
Insert the spacer between the items you want on the left and those you want on the right. This will push the right-aligned items towards the edge of the toolbar.
43
+
Insert a spacer between items intended for left and right alignment. This pushes the right-aligned items towards the edge of the toolbar.
42
44
43
45
```cshtml
44
46
@using Syncfusion.Blazor.Navigations
@@ -56,11 +58,13 @@ Insert the spacer between the items you want on the left and those you want on t
Copy file name to clipboardExpand all lines: blazor/toolbar/getting-started-webapp.md
+17-17Lines changed: 17 additions & 17 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
# Getting Started with Blazor Toolbar in Blazor Web App
11
11
12
-
This section briefly explains about how to include [Blazor Toolbar](https://www.syncfusion.com/blazor-components/blazor-toolbar) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
12
+
This section explains how to integrate the Syncfusion [Blazor Toolbar](https://www.syncfusion.com/blazor-components/blazor-toolbar) component into a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code.
13
13
14
14
{% tabcontents %}
15
15
@@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Toolbar](https://www.
21
21
22
22
## Create a new Blazor Web App in Visual Studio
23
23
24
-
You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
24
+
A **Blazor Web App** can be created using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
25
25
26
-
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs)while creating a Blazor Web Application.
26
+
Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs)when creating a Blazor Web Application.
27
27
28
28
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Navigations and Themes NuGet in the App
29
29
30
30
To add **Blazor Toolbar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
31
31
32
-
If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion<supstyle="font-size:70%">®</sup> Blazor components NuGet packages within the client project.
32
+
If `WebAssembly or Auto` render modes are utilized in the Blazor Web App need to be install Syncfusion<supstyle="font-size:70%">®</sup> Blazor component NuGet packages are installed within the client project.
33
33
34
-
Alternatively, you can utilize the following package manager command to achieve the same.
34
+
Alternatively, the Package Manager Console can be used to install the required NuGet package
*[System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
54
54
55
-
## Create a new Blazor Web App in Visual Studio Code
55
+
## Create a New Blazor Web App in Visual Studio Code
56
56
57
-
You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
57
+
A **Blazor Web App** can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion<supstyle="font-size:70%">®</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project).
58
58
59
-
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc)while creating a Blazor Web Application.
59
+
Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc)when creating a Blazor Web Application.
60
60
61
61
For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands.
62
62
@@ -74,10 +74,10 @@ N> For more information on creating a **Blazor Web App** with various interactiv
74
74
75
75
## Install Syncfusion<supstyle="font-size:70%">®</sup> Blazor Navigations and Themes NuGet in the App
76
76
77
-
If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion<supstyle="font-size:70%">®</sup> Blazor components NuGet packages within the client project.
77
+
If `WebAssembly` or `Auto` render modes are utilized in the Blazor Web App, install Syncfusion<supstyle="font-size:70%">®</sup> Blazor component NuGet packages within the client project.
78
78
79
79
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
80
-
* Ensure you’re in the project root directory where your`.csproj` file is located.
80
+
* Ensure the current directory is the project root, where the`.csproj` file is located.
81
81
* Run the following command to install a [Syncfusion.Blazor.Navigations](https://www.nuget.org/packages/Syncfusion.Blazor.Navigations) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed.
82
82
83
83
{% tabs %}
@@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Navigations` namespace.
116
116
{% endhighlight %}
117
117
{% endtabs %}
118
118
119
-
Now, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of your Blazor Web App.
119
+
Now, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service in the **~/Program.cs** file of the Blazor Web App.
120
120
121
-
If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in both **~/Program.cs** files of your Blazor Web App.
121
+
If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor service in both **~/Program.cs** files (`server` and `client` projects) of the Blazor Web App.
If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service only in that**~/Program.cs** file.
155
+
If the **Interactive Render Mode** is set to `Server`, Register the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Service only in the server-side**~/Program.cs** file.
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
179
179
@@ -189,7 +189,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A
189
189
</body>
190
190
```
191
191
192
-
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
192
+
N> Review the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in a Blazor application. Also, review the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic for different approaches to adding script references in a Blazor application.
@@ -233,7 +233,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i
233
233
{% endhighlight %}
234
234
{% endtabs %}
235
235
236
-
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Toolbar component in your default web browser.
236
+
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion<supstyle="font-size:70%">®</sup> Blazor Toolbar component in the default web browser.
@@ -245,4 +245,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-
245
245
2.[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
246
246
3.[Getting Started with Syncfusion<supstyle="font-size:70%">®</sup> Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
247
247
248
-
N> You can also explore our [Blazor Toolbar example](https://blazor.syncfusion.com/demos/toolbar/default-functionalities?theme=bootstrap5)that shows you how to render and configure the toolbar.
248
+
N> Explore the [Blazor Toolbar example](https://blazor.syncfusion.com/demos/toolbar/default-functionalities?theme=bootstrap5)demonstrating toolbar rendering and configuration.
0 commit comments