Merge pull request #7111 from syncfusion-content/986121-ie2

986121- IE Blazor UG correction based on shared prompt

Author: Gowrimathi

blazor/image-editor/accessibility.md

@@ -1,15 +1,15 @@
 ---
 layout: post
 title: Accessibility in Blazor Image Editor component | Syncfusion
-description: Checkout and learn here all about accessibility in Syncfusion Blazor Image Editor component and more.
+description: Learn about accessibility support in the Blazor Image Editor component for Blazor Server and WebAssembly applications.
 platform: Blazor
-control: Progress Button
+control: Image Editor
 documentation: ug
 ---
 
 # Accessibility in Blazor Image Editor component
 
-The Blazor Image Editor 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.
+The Blazor Image Editor 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.
 
 The accessibility compliance for the Blazor Image Editor component is outlined below.
 
@@ -39,25 +39,25 @@ The accessibility compliance for the Blazor Image Editor component is outlined b
 
 ## Keyboard interaction
 
-The Blazor Image Editor component followed the keyboard interaction 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 Image Editor component.
+The Blazor Image Editor component follows keyboard interaction guidelines, making it accessible for people who use assistive technologies (AT) and those who rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Image Editor component.
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>Ctrl</kbd> + <kbd>Z</kbd> | <kbd>⌘</kbd> + <kbd>Z</kbd> | Undo the last user action. |
-| <kbd>Ctrl</kbd> + <kbd>Y</kbd> | <kbd>⌘</kbd> + <kbd>Y</kbd> | Redo the last user action. |
-| <kbd>Ctrl</kbd> + <kbd>S</kbd> | <kbd>⌘</kbd> + <kbd>S</kbd> | To save the Image. |
-| <kbd>Ctrl</kbd> + <kbd>O</kbd> | <kbd>⌘</kbd> + <kbd>O</kbd> | To open the Image. |
-| <kbd>Delete</kbd> | <kbd>Delete</kbd> | To delete the shape once the shape got selected through mouse click . |
-| <kbd>Enter</kbd> | <kbd>Enter</kbd> | To apply Selection Crop or Image Resize. |
-| <kbd>Escape</kbd> | <kbd>Escape</kbd> | To discard operations performed in the Image Editor, such as annotation drawings, crop selection, and more. |
+| <kbd>Ctrl</kbd> + <kbd>Z</kbd> | <kbd>⌘</kbd> + <kbd>Z</kbd> | Undo the last action. |
+| <kbd>Ctrl</kbd> + <kbd>Y</kbd> | <kbd>⌘</kbd> + <kbd>Y</kbd> | Redo the last action. |
+| <kbd>Ctrl</kbd> + <kbd>S</kbd> | <kbd>⌘</kbd> + <kbd>S</kbd> | Save the image. |
+| <kbd>Ctrl</kbd> + <kbd>O</kbd> | <kbd>⌘</kbd> + <kbd>O</kbd> | Open an image. |
+| <kbd>Delete</kbd> | <kbd>Delete</kbd> | Delete the selected shape. |
+| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Apply selection crop or image resize. |
+| <kbd>Escape</kbd> | <kbd>Escape</kbd> | Discard operations such as annotation drawings and crop selections. |
 
 ## Ensuring accessibility
 
-The Blazor Image Editor component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests.
+The Blazor Image Editor component's accessibility levels are validated using [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with Playwright tests.
 
-The accessibility compliance of the Blazor Image Editor component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/image-editor) in a new window to evaluate the accessibility of the Blazor Image Editor component with accessibility tools.
+The accessibility compliance of the Blazor Image Editor component is demonstrated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/image-editor) in a new window to evaluate the Blazor Image Editor component with accessibility tools.
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLfZMhEziJhvXKH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrICNDYqKacaGsS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## See also
 

blazor/image-editor/image-restrictions.md

@@ -1,23 +1,23 @@
 ---
 layout: post
 title: Image Restrictions with Blazor Image Editor Component | Syncfusion
-description: Checkout the Image Restrictions available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+description: Explore image extension and file size restrictions in the Blazor Image Editor for Blazor Server and WebAssembly applications.
 platform: Blazor
 control: Image Editor
 documentation: ug
 ---
 
 # Image Restrictions in the Blazor Image Editor component
 
-The Image Editor allows users to specify image extensions, as well as the minimum and maximum image sizes for uploaded or loaded images using the [`ImageEditorUploadSettings`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. End users will receive a clear alert message if an uploaded image does not meet the defined criteria, ensuring a seamless and user-friendly upload experience.
+The Image Editor supports restricting image uploads by file extension and by minimum and maximum file size using the [ImageEditorUploadSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html) property. When an uploaded image does not meet the configured criteria, the component displays an alert to guide the end user and maintain a smooth workflow.
 
-`Note:` File restrictions apply when uploading images to the Image Editor, whether through the open method or the built-in uploader. If uploadSettings is not defined in the sample, the Image Editor, by default, allows files with .jpg, .png, .svg, .webp and .bmp extensions, without any file size restrictions.
+Note: File restrictions apply when opening images via the open method or the built-in uploader. If upload settings are not defined, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp extensions, with no file size restrictions.
 
 ## Allowed image extensions
 
-The Image Editor allows users to specify acceptable file extensions for uploaded images using the [`ImageEditorUploadSettings.AllowedExtensions`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property, ensuring that only supported formats, such as `.jpg`, `.png`, `.svg`,  `.webp` and `.bmp` are allowed. This helps maintain compatibility and prevents errors caused by unsupported file types. By default, the Image Editor allows files with .jpg, .png, .svg, .webp, and .bmp  extensions.
+Configure allowed file extensions for uploaded images using the [ImageEditorUploadSettings.AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_AllowedExtensions) property. This ensures that only supported formats—such as .jpg, .png, .svg, .webp, and .bmp—are processed, improving compatibility and preventing errors caused by unsupported file types. By default, the Image Editor allows .jpg, .png, .svg, .webp, and .bmp.
 
-`Note:` To specify allowed extensions in the upload settings, use the format '.png, .svg', listing the permitted file types as a comma-separated string.
+Note: Specify allowed extensions as a comma-separated string, for example: '.jpg, .svg'.
 
 Here is an example of configuring image restrictions using the `ImageEditorUploadSettings` property.
 
@@ -46,9 +46,9 @@ Here is an example of configuring image restrictions using the `ImageEditorUploa
 
 ## Minimum and maximum image size
 
-The Image Editor allows users to specify the minimum and maximum size limits for uploaded image files by using the [ImageEditorUploadSettings.MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MinFileSize) and [ImageEditorUploadSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MaxFileSize) properties. This ensures that images meet specific requirements, maintaining consistency and preventing oversized or undersized files from being processed.
+Set minimum and maximum upload size limits using the [ImageEditorUploadSettings.MinFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MinFileSize) and [ImageEditorUploadSettings.MaxFileSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorUploadSettings.html#Syncfusion_Blazor_ImageEditor_ImageEditorUploadSettings_MaxFileSize) properties. These constraints enforce consistent input and prevent oversized or undersized files from being processed.
 
-`Note:` Users can also upload images as base64 strings, in which case file extension validation is bypassed, but file size restrictions still apply.
+Note: When images are uploaded as base64 strings, file extension validation is bypassed; file size restrictions still apply.
 
 Here is an example of configuring image restrictions using the `ImageEditorUploadSettings` property.
 

blazor/image-editor/images/blazor-image-editor-file-size-restrict.jpg

@@ -1,15 +1,14 @@
 ---
 layout: post
 title: Localization with Blazor Image Editor Component | Syncfusion
-description: Checkout the Localization available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+description: Explore the localization support available in the Blazor Image Editor component for Blazor Server and WebAssembly applications.
 platform: Blazor
 control: Image Editor
 documentation: ug
 ---
 
-
 # Localization in the Blazor Image Editor component
 
-[Blazor Image editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component can be localized. Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
+The [Blazor Image Editor](https://www.syncfusion.com/blazor-components/blazor-image-editor) component supports localization. Refer to the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components.
 
-N> You can also explore our [Blazor Image editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to know how to render and configure the image editor.
+N> Explore the [Blazor Image Editor example](https://blazor.syncfusion.com/demos/image-editor/default-functionalities?theme=bootstrap5) to see how to render and configure the Image Editor.

blazor/image-editor/images/blazor-image-editor-file-type-restrict.jpg

@@ -1,41 +1,34 @@
 ---
 layout: post
 title: Quick Access Toolbar with Blazor Image Editor Component | Syncfusion
-description: Checkout the Quick Access Toolbar available in Blazor Image Editor component in Blazor Server App and Blazor WebAssembly App.
+description: Explore the Quick Access Toolbar in the Blazor Image Editor component for Blazor Server and WebAssembly applications.
 platform: Blazor
 control: Image Editor
 documentation: ug
 ---
 
-# Quick access toolbar in the Blazor Image Editor Component
+# Quick Access Toolbar in the Blazor Image Editor Component
 
-The quick access toolbars in the Image Editor play a vital role in facilitating interactions with annotations like Rectangle, Ellipse, Line, Arrow, and Path. These toolbars offer a diverse array of tools and options that can be tailored to match the specific requirements and preferences associated with each annotation type. The toolbar is only displayed when an annotation is selected, ensuring a focused and contextual user experience.
+The quick access toolbars in the Image Editor facilitate interactions with annotations such as Rectangle, Ellipse, Line, Arrow, and Path. These toolbars provide a configurable set of tools and options tailored to each annotation type. The toolbar appears only when an annotation is selected, ensuring a focused and contextual editing experience.
 
-The [`ShowQuickAccessToolbar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ShowQuickAccessToolbar) property controls the visibility of the quick access toolbar. Users have the flexibility to enable or disable this toolbar, add or remove items, and create a personalized set of tools.
+The [ShowQuickAccessToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html#Syncfusion_Blazor_ImageEditor_SfImageEditor_ShowQuickAccessToolbar) property controls quick access toolbar visibility. The toolbar can be enabled or disabled, items can be added or removed, and a customized toolset can be configured.
 
 ## Add a custom toolbar item
 
-The quick access toolbar that appears when inserting annotations in the Blazor Image Editor component is customizable using the [`QuickAccessToolbarOpening`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening) event. This event is triggered when the quick access toolbar is opened, allowing you to modify its contents. To add additional toolbar items to the quick access toolbar, you can access the ToolbarItems property of the [`QuickAccessToolbarEventArgs`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.QuickAccessToolbarEventArgs.html) object within the event handler. By adding or removing items from the ToolbarItems property based on the Item property, you can customize the options available in the quick access toolbar according to your needs. This gives you the ability to extend the functionality of the quick access toolbar and provide additional tools and options for working with inserted annotations. 
+The quick access toolbar that appears when inserting annotations in the Blazor Image Editor component is customizable using the [QuickAccessToolbarOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.ImageEditorEvents.html#Syncfusion_Blazor_ImageEditor_ImageEditorEvents_QuickAccessToolbarOpening) event. This event is triggered when the quick access toolbar opens, allowing modification of its contents. Additional toolbar items can be included by accessing the `ToolbarItems` property of the [QuickAccessToolbarEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.ImageEditor.QuickAccessToolbarEventArgs.html) object within the event handler. By adding or removing items from `ToolbarItems` based on the `Item` property, the quick access toolbar options can be customized to match specific requirements for working with inserted annotations.
 
-Here is an example of adding the custom toolbar item to the quick access toolbar. 
+Here is an example of adding a custom toolbar item to the quick access toolbar.
 
 ```cshtml
 @using Syncfusion.Blazor.ImageEditor
 @using Syncfusion.Blazor.Navigations
 
-<SfImageEditor @ref="ImageEditor" Toolbar="customToolbarItem" Height="400">
+<SfImageEditor @ref="ImageEditor" Height="400">
     <ImageEditorEvents Created="OpenAsync" QuickAccessToolbarOpening="QuickAccessToolbarOpening"></ImageEditorEvents>
 </SfImageEditor>
 
 @code {
     SfImageEditor ImageEditor;
-    private List<ImageEditorToolbarItemModel> customToolbarItem = new List<ImageEditorToolbarItemModel>()
-    {
-        new ImageEditorToolbarItemModel { Name = "Annotation" },
-        new ImageEditorToolbarItemModel { Name = "Confirm" },
-        new ImageEditorToolbarItemModel { Name = "Reset" }
-    };
-
     private async void OpenAsync()
     {
         await ImageEditor.OpenAsync("https://ej2.syncfusion.com/react/demos/src/image-editor/images/bridge.png");
@@ -48,4 +41,4 @@ Here is an example of adding the custom toolbar item to the quick access toolbar
 }
 ```
 
-![Blazor Image Editor with Quick Access Toolbar](./images/blazor-image-editor-quick-access-toolbar.png)
+![Blazor Image Editor with Quick Access Toolbar](./images/blazor-image-editor-quick-access-toolbar.jpg)