53702: To improve blazor accessibility UG document

Jenkinsfile

@@ -20,7 +20,7 @@ timestamps
 
 
 
-			 def branchCommit = '"' + 'https://api.github.com/repos/syncfusion-content/blazor-docs/pulls/' + env.pullRequestId + '/files'
+			 def branchCommit = 'https://api.github.com/repos/syncfusion-content/'+env.githubSourceRepoHttpUrl.split('/')[env.githubSourceRepoHttpUrl.split('/').size() - 1]+'/pulls/' + env.pullRequestId + '/files'
 
             String branchCommitDetails = bat returnStdout: true, script: 'curl -H "Accept: application/vnd.github.v3+json" -u SyncfusionBuild:' + env.GithubBuildAutomation_PrivateToken + " " + branchCommit
 

blazor-toc.html

@@ -61,6 +61,9 @@
 			<li>
 				<a href="/blazor/getting-started/blazor-electron-app">Blazor Electron App</a>
 			</li>
+			<li>
+				<a href="/blazor/getting-started/wpf-blazor-app">WPF Blazor App</a>
+			</li>
 			<li>Using Syncfusion.Blazor NuGet
 				<ul>
 					<li><a href="/blazor/getting-started/blazor-web-app-single-nuget">Blazor Web App</a></li>
@@ -655,6 +658,9 @@
 			<li>
 				<a href="/blazor/breadcrumb/templates">Templates</a>
 			</li>
+			<li>
+				<a href="/blazor/breadcrumb/accessibility">Accessibility</a>
+			</li>
 			<li>
 				<a href="/cr/blazor/Syncfusion.Blazor.Navigations.SfBreadcrumb.html"> API Reference</a>
 			</li>
@@ -734,6 +740,9 @@
 			<li>
 				<a href="/blazor/button/style-and-appearance">Styles and Appearances</a>
 			</li>
+			<li>
+				<a href="/blazor/button/accessibility">Accessibility</a>
+			</li>
 			<li>How To
 				<ul>
 					<li>
@@ -785,6 +794,9 @@
 			<li>
 				<a href="/blazor/button-group/style-and-appearance">Styles and Appearances</a>
 			</li>
+			<li>
+				<a href="/blazor/button-group/accessibility">Accessibility</a>
+			</li>
 			<li>
 				<a href="/cr/blazor/Syncfusion.Blazor.SplitButtons.SfButtonGroup.html"> API Reference</a>
 			</li>
@@ -2814,6 +2826,7 @@
 			<li> <a href="/blazor/image-editor/frame">Frame</a></li>
 			<li> <a href="/blazor/image-editor/resize">Resize</a></li>
 			<li> <a href="/blazor/image-editor/localization">Localization</a></li>
+			<li> <a href="/blazor/image-editor/accessibility">Accessibility</a></li>
 			<li>
 				<a href="/cr/blazor/Syncfusion.Blazor.ImageEditor.SfImageEditor.html"> API Reference</a>
 			</li>
@@ -3268,7 +3281,7 @@
 					<li><a href="/blazor/pdfviewer-2/getting-started/wsl-application">Windows Subsystem for Linux</a></li>
 				</ul>
 			</li>
-			<li> <a href="/blazor/pdfviewer-2/keyboard-accessibility">Accessibility</a></li>
+			<li> <a href="/blazor/pdfviewer-2/accessibility">Accessibility</a></li>
 
 			<li> <a href="/blazor/pdfviewer-2/opening-pdf-file">Open PDF files</a>
 				<ul>
@@ -3509,6 +3522,7 @@
 			<li> <a href="/blazor/query-builder/import-export">Importing and Exporting</a></li>
 			<li> <a href="/blazor/query-builder/localization">Localization</a></li>
 			<li> <a href="/blazor/query-builder/style-and-appearance">Styles and Appearances</a></li>
+			<li> <a href="/blazor/query-builder/accessibility">Accessibility</a></li>
 			<li>How To
 				<ul>
 					<li> <a href="/blazor/query-builder/how-to/getting-started-web-assembly">Getting Started-Client side using Visual studio</a></li>
@@ -3538,6 +3552,7 @@
 			<li> <a href="/blazor/radio-button/native-event">Native Events</a></li>
 			<li> <a href="/blazor/radio-button/label-and-size">Label and Size</a></li>
 			<li> <a href="/blazor/radio-button/style-and-appearance">Styles and Appearances</a></li>
+			<li> <a href="/blazor/radio-button/accessibility">Accessibility</a></li>
 			<li>How To
 				<ul>
 					<li> <a href="/blazor/radio-button/how-to/customize-radiobutton-appearance">Customize Radio Button Appearance</a></li>
@@ -4408,7 +4423,7 @@
 			<li> <a href="/blazor/pdfviewer/getting-started/server-side-application">Getting Started - Server App</a></li>
 			<li> <a href="/blazor/pdfviewer/getting-started/web-assembly-application">Getting Started - WebAssembly App</a></li>
 			<li> <a href="/blazor/pdfviewer/getting-started/wsl-application">Getting Started with Blazor PDF Viewer Component in WSL mode</a></li>
-			<li> <a href="/blazor/pdfviewer/keyboard-accessibility">Accessibility</a></li>
+			<li> <a href="/blazor/pdfviewer/accessibility">Accessibility</a></li>
 			<li> <a href="/blazor/pdfviewer/opening-pdf-file">Opening PDF file</a></li>
 			<li> <a href="/blazor/pdfviewer/saving-pdf-file">Saving PDF file</a></li>
 			<li> <a href="/blazor/pdfviewer/toolbar-customization">Toolbar Customization</a></li>

blazor/appearance/themes.md

@@ -970,14 +970,15 @@ Material and Tailwind Themes uses online roboto font. If your app is designed to
         * `~/Pages/_Layout.cshtml` file for `.NET 6` project
         * `~/Pages/_Host.cshtml` file for `.NET 7` project.
 
-    ```html
+```html
     <head>
         ....
         ....
         <link href="material.min.css" rel="stylesheet" />
     </head>
-    ```
-### Using Customized Styles from `Syncfusion.Blazor.Themes` Package and CDN (From `v23.2.4` and above) 
+```
+
+### Using Customized Styles from `Syncfusion.Blazor.Themes` Package and CDN (From `v23.2.4` and above)
 
 Starting from `v23.2.4`, customized `Material` and `Tailwind` themes are available in the `Syncfusion.Blazor.Themes` package. Also it can be accessed via CDN for Blazor components.
 

blazor/breadcrumb/accessibility.md

@@ -0,0 +1,66 @@
+---
+layout: post
+title: Accessibility in Blazor Breadcrumb Component | Syncfusion
+description: Checkout and learn here all about Accessibility in Syncfusion Blazor Breadcrumb component and much more.
+platform: Blazor
+control: Button
+documentation: ug
+---
+
+# Accessibility in Blazor Breadcrumb component
+
+The Breadcrumb 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 accessibility compliance for the Breadcrumb component is outlined below.
+
+| Accessibility Criteria | Compatibility |
+| -- | -- |
+| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Section 508](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Mobile Device Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Keyboard Navigation Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Accessibility Checker](https://www.npmjs.com/package/accessibility-checker) Validation | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+
+<style>
+    .post .post-content img {
+        display: inline-block;
+        margin: 0.5em 0;
+    }
+</style>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> - All features of the component meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
+
+## WAI-ARIA attributes
+
+The Breadcrumb component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/) patterns to meet the accessibility. The following ARIA attributes are used in the Breadcrumb component:
+
+| Attributes | Purpose |
+| --- | --- |
+| `aria-label` | Indicates the breadcrumb item text. |
+| `aria-disabled` | Indicates the state of breadcrumb item whether it is disabled. |
+
+## Keyboard interaction
+
+The Breadcrumb component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/#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 Breadcrumb component.
+
+| **Press** | **To do this** |
+| --- | --- |
+| <kbd>Tab</kbd> | Navigate to the next item and also next item in the popup of menu type overflow. |
+| <kbd>Shift + Tab</kbd> | Navigate to the previous item also previous item in the popup of menu type overflow. |
+| <kbd>Enter key in normal mode</kbd> | Select the breadcrumb item. |
+| <kbd>Enter key in normal mode</kbd> | To open the popup of menu type overflow mode when you press enter on collapsed button and It will expand the items of collapsed type overflow mode when you press enter on collapsed button. |
+
+## Ensuring accessibility
+
+The Breadcrumb component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
+
+The accessibility compliance of the Breadcrumb component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/breadcrumb.html) in a new window to evaluate the accessibility of the Breadcrumb component with accessibility tools.
+
+{% previewsample "https://ej2.syncfusion.com/accessibility/breadcrumb.html" %}

blazor/button-group/accessibility.md

@@ -0,0 +1,57 @@
+---
+layout: post
+title: Accessibility in Blazor Button Group Component | Syncfusion
+description: Checkout and learn here all about Accessibility in Syncfusion Blazor Button component and much more.
+platform: Blazor
+control: Button
+documentation: ug
+---
+
+# Accessibility in Blazor Button Group component
+
+The Button Group 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 accessibility compliance for the Button Group component is outlined below.
+
+| Accessibility Criteria | Compatibility |
+| -- | -- |
+| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Section 508](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Mobile Device Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Keyboard Navigation Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Accessibility Checker](https://www.npmjs.com/package/accessibility-checker) Validation | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+
+<style>
+    .post .post-content img {
+        display: inline-block;
+        margin: 0.5em 0;
+    }
+</style>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> - All features of the component meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
+
+## Keyboard interaction
+
+The Button Group component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/button/#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 Button Group component.
+
+| **Press** | **To do this** |
+| --- | --- |
+| <kbd>Tab</kbd> | Focuses the next button in the multiple selection type Button Group. |
+| <kbd>Shift + Tab</kbd> | Focuses the previous button in the multiple selection Button Group. |
+| <kbd>Arrow</kbd> | Focuses and activates the next / previous button in the single selection ButtonGroup. |
+| <kbd>Space</kbd> | Activates the focused button in the Button Group. |
+
+## Ensuring accessibility
+
+The Button Group component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
+
+The accessibility compliance of the Button Group component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/button-group.html) in a new window to evaluate the accessibility of the Button Group component with accessibility tools.
+
+{% previewsample "https://ej2.syncfusion.com/accessibility/button-group.html" %}

blazor/button/accessibility.md

@@ -0,0 +1,62 @@
+---
+layout: post
+title: Accessibility in Blazor Button Component | Syncfusion
+description: Checkout and learn here all about Accessibility in Syncfusion Blazor Button component and much more.
+platform: Blazor
+control: Button
+documentation: ug
+---
+
+# Accessibility in Blazor Button component
+
+The Button 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 accessibility compliance for the Button component is outlined below.
+
+| Accessibility Criteria | Compatibility |
+| -- | -- |
+| [WCAG 2.2](https://www.w3.org/TR/WCAG22/) Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Section 508](https://www.section508.gov/) Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Screen Reader Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Right-To-Left Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Color Contrast | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Mobile Device Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| Keyboard Navigation Support | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Accessibility Checker](https://www.npmjs.com/package/accessibility-checker) Validation | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | <img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> |
+
+<style>
+    .post .post-content img {
+        display: inline-block;
+        margin: 0.5em 0;
+    }
+</style>
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/yes.png" alt="Yes"> - All features of the component meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/intermediate.png" alt="Intermediate"> - Some features of the component do not meet the requirement.</div>
+
+<div><img src="https://cdn.syncfusion.com/content/images/landing-page/no.png" alt="No"> - The component does not meet the requirement.</div>
+
+## WAI-ARIA attributes
+
+The Button component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/button/) patterns to meet the accessibility. The following ARIA attributes are used in the Button component:
+
+| Attributes | Purpose |
+| --- | --- |
+| `aria-label` | Provides an accessible name for the icon only button. |
+
+## Keyboard interaction
+
+The Button component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/button/#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 Button component.
+
+| **Press** | **To do this** |
+| --- | --- |
+| <kbd>Space</kbd> | When the button has focus, pressing the space key changes the state of the button. |
+
+## Ensuring accessibility
+
+The Button component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing.
+
+The accessibility compliance of the Button component is shown in the following sample. Open the [sample](https://ej2.syncfusion.com/accessibility/button.html) in a new window to evaluate the accessibility of the Button component with accessibility tools.
+
+{% previewsample "https://ej2.syncfusion.com/accessibility/button.html" %}