diff --git a/blazor/toolbar/accessibility.md b/blazor/toolbar/accessibility.md index 392664b49c..8a1de135a9 100644 --- a/blazor/toolbar/accessibility.md +++ b/blazor/toolbar/accessibility.md @@ -11,7 +11,7 @@ documentation: ug 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. -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. +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. The accessibility compliance for the Blazor Toolbar component is outlined below. @@ -43,16 +43,16 @@ The accessibility compliance for the Blazor Toolbar component is outlined below. 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. -The following list of attributes are added in the Toolbar. +The following list of attributes is added to the Toolbar. | **Attributes** | **Purpose** | | --- | --- | -| role="toolbar" | Attribute is set to the ToolBar element describes the actual role of the element. | -| aria-orientation | Attribute is set to the ToolBar element to indicates the ToolBar orientation. Default value is `horizontal`. | -| aria-label | Attribute is set to ToolBar element describes the purpose of the set of toolbar. | -| aria-expanded | Attribute is set to the ToolBar Popup element to indicates the expanded state of the popup.| -| 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`. | -| aria-disabled | Attribute set to the ToolBar element to indicates the disabled state of the ToolBar. | +| role="toolbar" | Attribute is set to the ToolBar element and describes its actual role. | +| aria-orientation | Attribute is set to the ToolBar element to indicate the ToolBar orientation. Default value is `horizontal`. | +| aria-label | Attribute is set to the ToolBar element and describes the purpose of the toolbar. | +| aria-expanded | Attribute is set to the ToolBar Popup element to indicate the expanded state of the popup.| +| aria-haspopup | Attribute is set to the popup element to indicate the popup mode of the Toolbar. Default value is false. When popup mode is enabled, the attribute value is changed to `true`. | +| aria-disabled | Attribute is set to the Toolbar item to indicate the disabled state of that item. | ## Keyboard Interaction @@ -63,14 +63,13 @@ Keyboard navigation is enabled, by default. Possible keys are: | ← | ← | Focuses the previous element. | | → | → | Focuses the next element. | | Enter | Enter | 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. | -| Esc(Escape) | Esc | Closes popup. | +| Esc | Esc | Closes popup. | | ↓ | ↓ | Focuses the next popup element. | | ↑ | ↑ | Focuses the previous popup element. | ## Ensuring Accessibility -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) -software tool. +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) software tool. 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. diff --git a/blazor/toolbar/align-items-using-spacer.md b/blazor/toolbar/align-items-using-spacer.md index 2b86b092e8..02bdbdf9e6 100644 --- a/blazor/toolbar/align-items-using-spacer.md +++ b/blazor/toolbar/align-items-using-spacer.md @@ -9,9 +9,9 @@ documentation: ug # Align Items Using Spacer in Blazor Toolbar Component -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. +A Toolbar [`Spacer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ItemType.html#Syncfusion_Blazor_Navigations_ItemType_Spacer) manages the alignment of toolbar items. It creates an adjustable empty space within the toolbar whose size adapts to the available width. -To achieve different alignment styles, strategically place spacers within the toolbar items: +To achieve different alignment styles, strategically place Spacer items within the toolbar items: ## Left, Center, and Right alignment @@ -81,4 +81,4 @@ Insert a spacer as the first item in the toolbar. This pushes all other items to {% previewsample "https://blazorplayground.syncfusion.com/embed/LDVnXcXhAOUWIMkE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Toolbar Spacer](./images/blazor-toolbar-spacer-right-item.webp)" %} -N> Avoid using the `Align` property in toolbar items when `Spacer` is utilized. \ No newline at end of file +N> Avoid using the [`Align`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Align) property in toolbar items when `Spacer` is used. \ No newline at end of file diff --git a/blazor/toolbar/how-to/add-remove-toolbar-items.md b/blazor/toolbar/how-to/add-remove-toolbar-items.md index 48e096c229..5411bb0e39 100644 --- a/blazor/toolbar/how-to/add-remove-toolbar-items.md +++ b/blazor/toolbar/how-to/add-remove-toolbar-items.md @@ -11,9 +11,9 @@ documentation: ug Toolbar items can be added or removed dynamically by updating the underlying data collection, which is then iterated to render the Toolbar component. -In the following demo, the `ToolbarItems` collection initially contains five items, resulting in five toolbar items being rendered. Clicking the `Add Item` button adds a new item to the `ToolbarItems` collection, which then renders as a sixth toolbar item in the Toolbar component. Clicking the `Remove Item` button removes the first item from the `ToolbarItems` collection, consequently removing the first toolbar item from the Toolbar component. +In the following demo, the [`ToolbarItems`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItems.html) collection initially contains five items, resulting in five toolbar items being rendered. Clicking the `Add Item` button adds a new item to the `ToolbarItems` collection, which then renders as a sixth toolbar item in the Toolbar component. Clicking the `Remove Item` button removes the first item from the `ToolbarItems` collection, consequently removing the first toolbar item from the Toolbar component. -```csharp +```cshtml @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons diff --git a/blazor/toolbar/how-to/add-toggle-button.md b/blazor/toolbar/how-to/add-toggle-button.md index 295a0100c0..545b89638d 100644 --- a/blazor/toolbar/how-to/add-toggle-button.md +++ b/blazor/toolbar/how-to/add-toggle-button.md @@ -9,9 +9,9 @@ documentation: ug # Add Toggle Button in Blazor Toolbar Component -Toolbar supports adding a toggle button by using the `Template` property. +Toolbar supports adding a toggle button by using the [`Template`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Template) property. -* By using Toolbar template property, pass required HTML String to render the toggle button. +* By using Toolbar's `Template` property, pass the required HTML String to render the toggle button. ```cshtml ``` -* Now render the toggle Button into the targeted element in the Toolbar created event handler and bind click event for it. -On clicking the toggle Button, change the required icon and content based on current active state. +* Render the `SfButton` with the [`IsToggle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfButton.html#Syncfusion_Blazor_Buttons_SfButton_IsToggle) property set to `true` inside the `Template`, and use a click event handler to update the icon and content based on the toggle state. -```csharp +```cshtml @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Buttons @@ -62,7 +61,7 @@ On clicking the toggle Button, change the required icon and content based on cur
- This content will be hidden, when you click on hide button and toggle will get an active state as shown, otherwise it will be visible. + This content will be hidden when you click the hide button and the toggle will get an active state as shown; otherwise it will be visible.