Merge pull request #6824 from syncfusion-content/983303-kanban-dev

983303: Updated Kanban documentation

Author: saravanangn

blazor/kanban/accessibility.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Accessibility in Blazor Kanban Component
 
-The [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component has been designed, keeping in mind the WAI-ARIA specifications, and applies the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) roles, states, and properties. This component is characterized by complete `WAI-ARIA` accessibility support that makes it easy for people who use assistive technologies (AT) or those who completely rely on keyboard navigation.
+The [Blazor Kanban](https://www.syncfusion.com/blazor-components/blazor-kanban-board) component is built in accordance with [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/) specifications, incorporating appropriate roles, states, and properties. It offers full accessibility support for users relying on assistive technologies (AT) or keyboard navigation.
 
-The Blazor Kanban 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.
+It adheres to key accessibility standards including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) , ensuring inclusive design and usability.
 
-The accessibility compliance for the Blazor Kanban component is outlined below.
+The following table summarizes the accessibility compliance of the Blazor Kanban component:
 
 | Accessibility Criteria | Compatibility |
 | -- | -- |
@@ -76,7 +76,7 @@ The Blazor Kanban component followed the [keyboard interaction](https://www.w3.o
 
 ## Disable keyboard interaction
 
-Disables all the functionalities in the Kanban board performed using keyboard by setting the `allowKeyboard` properties to `false`.
+To disable all keyboard-based interactions in the Kanban board, set the `allowKeyboard` property to `false`. This may impact accessibility for users relying on keyboard navigation or assistive technologies.
 
 ## Ensuring accessibility
 

blazor/kanban/cards.md

@@ -7,13 +7,13 @@ control: Kanban
 documentation: ug
 ---
 
-# Cards in Blazor Kanban Component
+# Working with Cards in Blazor Kanban Component
 
 The cards are main elements in the [Blazor Kanban Board](https://www.syncfusion.com/blazor-components/blazor-kanban-board), which represents the task information with header and content. The header and content of a card is fetched from the corresponding mapping fields. The card layout can be customized with template also.
 
 ## Header
 
-The card header is achieved by mapping the `HeaderField` property, which is placed inside the `KanbanCardSettings` property. By default, the `ShowHeader` property is enabled by Kanban board that is used to show the header at the top of the card.
+The card header is achieved by mapping the `HeaderField` property, which is placed inside the `KanbanCardSettings` property. By default, the `ShowHeader` property is enabled by Kanban board that is used to display the header at the top of the card.
 
 N> The `HeaderField` property must be a unique datasource value to avoid the duplication of card data.
 
@@ -148,7 +148,7 @@ N> The mapped datasource key value contains single or multiple tags. If it is mu
 
 ![Blazor Kanban Card with Tags](./images/blazor-kanban-card-tags.png)
 
-## Left border color
+## Customizing left border color
 
 Kanban card supports to custom the left border color for all the cards. This can be achieved by mapping the data key value to the `GrabberField` property, which is placed inside the `KanbanCardSettings` property. The mapped data key value will be directly assigned to each card element border left color property.
 
@@ -213,7 +213,7 @@ N> By default, the card border left color width is `3px`.
 
 ![Customizing Left Border Color in Blazor Kanban Card](./images/blazor-kanban-card-with-custom-border-color.png)
 
-## Custom class
+## Rendering custom footer elements
 
 The card allows to render the custom elements based on the given class names inside the `e-card-footer` element. It can be achieved by mapping the data key to the `FooterCssField` property, which is placed inside the `KanbanCardSettings` property. It will help to create your own class name elements inside the `e-card-footer` element. The mapped datasource key value contains single or multiple class names. If it is multiple class names, each class name will be separated by a comma in the datasource.
 
@@ -362,7 +362,7 @@ In the following demo, images and icons are rendered using the `FooterCssField`
 
 ![Blazor Kanban Card with Custom Elements](./images/blazor-kanban-card-with-custom-element.png)
 
-## Template
+## Customizing card layout with templates
 
 You can customize the default card layout using template as per your application needs. This can be achieved by template of the `KanbanCardSettings` property.
 
@@ -476,9 +476,9 @@ Kanban board allows to select single and multiple selection of cards when mouse
 * **Single**: Only one card allowed to select at a time in the Kanban board.
 * **Multiple**: Multiple cards are allowed to select in a board.
 
-### Multiple Selection
+### Enabling multiple card selection
 
-Select the multiple cards randomly using Ctrl + mouse click and select the multiple cards continuously using Shift + mouse click action on Kanban board. Set `Multiple` in `SelectionType` to enable the multiple selection in a board.
+Select multiple cards randomly using Ctrl + mouse click and select the multiple cards continuously using Shift + mouse click action on Kanban board. Set `SelectionType` to `Multiple` to enable multi-selection in a board.
 
 ```cshtml
 

blazor/kanban/columns.md

@@ -7,15 +7,15 @@ control: Kanban
 documentation: ug
 ---
 
-# Columns in Blazor Kanban Component
+# Columns in Syncfusion Blazor Kanban Component
 
-The **Kanban** columns represents each stage of the process. The column definitions are used as the **DataSource** schema in the Kanban. The Kanban operations such as drag-and-drop, swimlane, and toggle columns are performed based on column definitions.
+The **Kanban** columns represent each stage of workflow process.Column definitions serve as the schema for the Kanban board's **DataSource**. The Operations such as drag-and-drop, swimlane grouping, and column toggling are driven by these column definitions.
 
 ## Single-key mapping
 
-Kanban columns are categorized by mapping the **key** from the datasource using the `KeyField` property. The corresponding **value** in the datasource is mapped inside the columns `KeyField`. Based on this categorization, Kanban columns are split on this board.
+Columns are categorized by mapping the [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField) property to specific key values in the data source. The corresponding **value** in the datasource is mapped inside the columns `KeyField`. This categorization determines how cards are distributed across columns on the Kanban board.
 
-N> The `KeyField` property is mandatory to render the columns in the Kanban board.
+N> The [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField) property is required to render columns on the Kanban board.
 
 ```cshtml
 
@@ -79,7 +79,7 @@ N> The `KeyField` property is mandatory to render the columns in the Kanban boar
 
 ## Multi-key mapping
 
-Kanban board allows to render a single column by mapping multiple keys using `KeyField` property.
+The Kanban board supports rendering a single column with multiple key mappings using the [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField) property.
 
 ```cshtml
 
@@ -143,13 +143,13 @@ Kanban board allows to render a single column by mapping multiple keys using `Ke
 
 ## Header text
 
-You can provide the column header text of Kanban columns using the `HeaderText` property. If you have not specified any header text, it will render the header without any text.
+Use the `HeaderText` property to define the display text for each Kanban column header. If no header text is specified, the column header will appear blank.
 
 ## Header template
 
 You can customize the column header with `Template` property as shown in the following code.
 
-To get start quickly with Blazor Kanban component using Templates, you can check on this video.
+To quickly get started with using templates in the Blazor Kanban component, watch the following video.
 
 {% youtube
 "youtube:https://www.youtube.com/watch?v=PjTgXuibei8" %}
@@ -323,7 +323,7 @@ To get start quickly with Blazor Kanban component using Templates, you can check
 
 ## Toggle columns
 
-Kanban allows to expand or collapse its columns using `AllowToggle` in `KanbanColumn`. When the property is enabled, it will render the expand or collapse icon to the column header.
+Kanban columns can be expanded or collapsed by enabling the `AllowToggle` property in `KanbanColumn`. When enabled, an expand/collapse icon appears in the column header.
 
 N> By default, collapsed column width is set to `50px`.
 
@@ -389,7 +389,7 @@ N> By default, collapsed column width is set to `50px`.
 
 ### Initially collapsed column
 
-By default, all columns are on expanded state when loading the Kanban board initially. But, you can render the columns with collapsed state using the `IsExpanded` property.
+By default, all columns are expanded when the Kanban board is initially rendered. To render a column in a collapsed state initially, use the `IsExpanded` property.
 
 N> The `IsExpanded` property only works when enabling the `AllowToggle` property on particular column.
 
@@ -457,7 +457,7 @@ In the following example, the Backlog column is collapsed on initialization of K
 
 ## Stacked headers
 
-Stacked headers are the additional headers to column header that will group the similar columns. Define the grouping of columns **Key** value to the `KeyField` property and provide the custom header text name to grouped columns using the `Text` property in `KanbanStackedHeaders`.
+Stacked headers are additional header rows that group related columns under a common category. Group columns by specifying their key values in the [KeyField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_KeyField) property and assign a custom header label using the `Text` property in [KanbanStackedHeaders](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Kanban.SfKanban-1.html#Syncfusion_Blazor_Kanban_SfKanban_1_StackedHeaders).
 
 In the following code, the kanban columns 'InProgress, Review' are grouped under 'Development Phase' category.