1046108: Reviewed and improved the UG documentation for the Blazor Toolbar component

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:
 | <kbd>←</kbd> | <kbd>←</kbd> | Focuses the previous element. |
 | <kbd>→</kbd> | <kbd>→</kbd> | Focuses the next element. |
 | <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. |
-| <kbd>Esc(Escape)</kbd> | <kbd>Esc</kbd> | Closes popup. |
+| <kbd>Esc</kbd> | <kbd>Esc</kbd> | Closes popup. |
 | <kbd>↓</kbd> | <kbd>↓</kbd> | Focuses the next popup element.  |
 | <kbd>↑</kbd> | <kbd>↑</kbd> | 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.
 

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.
+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.

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

blazor/toolbar/how-to/add-toggle-button.md

@@ -9,20 +9,19 @@ 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
 <Template>
     <SfButton></SfButton>
 </Template>
 ```
 
-* 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
 </SfToolbar>
 <br />
 <div id="content" style="display:@DisplayValue">
-    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.
 </div>
 
 <style>

blazor/toolbar/how-to/customize-the-scrolling-distance.md

@@ -9,45 +9,47 @@ documentation: ug
 
 # Customize the Scrolling Distance in Blazor Toolbar Component
 
-The toolbar `ScrollStep` property supports to customize the scrolling distance, by clicking the left and right side navigation icons. A required value can be passed through the `ScrollStep` property to customize toolbar scrolling distance.
+The Toolbar's [`ScrollStep`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfToolbar.html#Syncfusion_Blazor_Navigations_SfToolbar_ScrollStep) property lets you customize the scrolling distance when the left or right navigation icons are clicked. Pass the desired value to the `ScrollStep` property to control the scroll behavior.
 
-```csharp
+N> The `ScrollStep` value applies only when the Toolbar's [`OverflowMode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfToolbar.html#Syncfusion_Blazor_Navigations_SfToolbar_OverflowMode) is set to `Scrollable` (the default). The default `ScrollStep` value is `0`.
+
+```cshtml
 
 @using Syncfusion.Blazor.Navigations
 
 <SfToolbar Width="600" ScrollStep="50">
     <ToolbarItems>
-        <ToolbarItem PrefixIcon="e-icons e-cut" Tooltiptext="Cut"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-copy" Tooltiptext="Copy"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-paste" Tooltiptext="Paste"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-cut" TooltipText="Cut"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-copy" TooltipText="Copy"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-paste" TooltipText="Paste"></ToolbarItem>
         <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-bold" Tooltiptext="Bold"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-underline" Tooltiptext="Underline"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-italic" Tooltiptext="Italic"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-paint-bucket" Tooltiptext="Color-Picker"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-bold" TooltipText="Bold"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-underline" TooltipText="Underline"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-italic" TooltipText="Italic"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-paint-bucket" TooltipText="Color-Picker"></ToolbarItem>
         <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-align-left" Tooltiptext="Align-Left"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-align-right" Tooltiptext="Align-Right"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-align-center" Tooltiptext="Align-Center"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-justify" Tooltiptext="Align-Justify"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-align-left" TooltipText="Align-Left"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-align-right" TooltipText="Align-Right"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-align-center" TooltipText="Align-Center"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-justify" TooltipText="Align-Justify"></ToolbarItem>
         <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-list-unordered" Tooltiptext="Bullets"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-list-ordered" Tooltiptext="Numbering"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-list-unordered" TooltipText="Bullets"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-list-ordered" TooltipText="Numbering"></ToolbarItem>
         <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-sort-ascending" Tooltiptext="Sort A - Z"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-sort-descending" Tooltiptext="Sort Z - A"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-sort-ascending" TooltipText="Sort A - Z"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-sort-descending" TooltipText="Sort Z - A"></ToolbarItem>
         <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-upload-1" Tooltiptext="Upload"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-download" Tooltiptext="Download"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-upload-1" TooltipText="Upload"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-download" TooltipText="Download"></ToolbarItem>
         <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-increase-indent" Tooltiptext="Text Indent"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-decrease-indent" Tooltiptext="Text Outdent"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-increase-indent" TooltipText="Text Indent"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-decrease-indent" TooltipText="Text Outdent"></ToolbarItem>
         <ToolbarItem Type="ItemType.Separator"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-erase" Tooltiptext="Clear"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-refresh" Tooltiptext="Reload"></ToolbarItem>
-        <ToolbarItem PrefixIcon="e-icons e-export" Tooltiptext="Export"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-erase" TooltipText="Clear"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-refresh" TooltipText="Reload"></ToolbarItem>
+        <ToolbarItem PrefixIcon="e-icons e-export" TooltipText="Export"></ToolbarItem>
     </ToolbarItems>
 </SfToolbar>
 ```
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrdNwtBTddNsjxS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Custominzing Scroll Step in Blazor Toolbar](../images/blazor-toolbar-scrollstep.webp)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrdNwtBTddNsjxS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Scroll Step in Blazor Toolbar](../images/blazor-toolbar-scrollstep.webp)" %}

blazor/toolbar/how-to/enable-or-disable-toolbar-item.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Enable/Disable Toolbar Item in Blazor Toolbar Component
 
-The `Disabled` property of a Toolbar item enables or disables the item by setting its value to `false` or `true` respectively. In the following code example, the paste action is initially disabled. Clicking the 'Cut' button enables the 'Paste' button.
+The [`Disabled`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Disabled) property of a Toolbar item enables or disables the item by setting its value to `false` or `true`, respectively. In the following code example, the paste action is initially disabled. Clicking the 'Cut' button toggles the 'Paste' button between enabled and disabled states.
 
-```csharp
+```cshtml
 
 @using Syncfusion.Blazor.Navigations
 

blazor/toolbar/how-to/set-command-customization.md

@@ -9,13 +9,13 @@ documentation: ug
 
 # Set Items Customization in Blazor Toolbar Component
 
-The `HtmlAttributes` property of a Toolbar item sets HTML attributes (such as `id`, `class`, `style`, and `role`) for its associated elements.
+The [`HtmlAttributes`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_HtmlAttributes) property of a Toolbar item sets HTML attributes (such as `id`, `class`, `style`, and `role`) for its associated elements.
 
 When `style` attributes are added, if existing `style` attributes are present, the new ones will replace them. This behavior differs for the `class` attribute; new classes are added to the element without replacing existing ones.
 
-Single or multiple CSS classes can be applied to Toolbar items using the `ToolbarItem`'s `CssClass` property.
+Single or multiple CSS classes can be applied to Toolbar items using the Toolbar item's [`CssClass`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_CssClass) property.
 
-```csharp
+```cshtml
 
 @using Syncfusion.Blazor.Navigations
 

blazor/toolbar/how-to/set-item-wise-custom-template.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Set Item-Wise Custom Template in Blazor Toolbar Component
 
-The Toolbar supports defining custom content for an item using its `Template` property. The `Template` property accepts either an HTML element or a `RenderFragment`. 
+The Toolbar supports defining custom content for an item using its [`Template`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Template) property, which accepts either an HTML element or a `RenderFragment`.
 
-```csharp
+```cshtml
 
 @using Syncfusion.Blazor.Navigations
 

blazor/toolbar/how-to/set-tool-tip-to-the-commands.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Set Tooltip to the Items in Blazor Toolbar Component
 
-The `TooltipText` property of a Toolbar item sets the displayed hint text that appears on mouse hover.
+The [`TooltipText`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_TooltipText) property of a Toolbar item sets the hint text that appears on mouse hover.
 
-Initialize the Tooltip with the Toolbar target.
+Initialize the Tooltip with the Toolbar as the target.
 
-```csharp
+```cshtml
 
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.Blazor.Popups

blazor/toolbar/how-to/show-hide-toolbar-item.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Show/Hide Toolbar Item in Blazor Toolbar Component
 
-The `Visible` property of a Toolbar item controls its visibility by setting its value to `true` or `false`. In the following code example, the paste action is initially hidden. Clicking the 'Cut' button makes the 'Paste' button visible.
+The [`Visible`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ToolbarItem.html#Syncfusion_Blazor_Navigations_ToolbarItem_Visible) property of a Toolbar item controls its visibility by setting its value to `true` (visible) or `false` (hidden). In the following code example, the paste action is initially hidden. Clicking the 'Cut' button toggles the 'Paste' button between visible and hidden states.
 
-```csharp
+```cshtml
 
 @using Syncfusion.Blazor.Navigations