983104: Updated the UG Documentation for mention.

Author: Ashwini-SF5049

blazor/mention/accessibility.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Accessibility in Blazor Mention Component
 
-Web accessibility makes web content and web applications more accessible for people with disabilities. Blazor Mention component provides built-in compliance with `WAI-ARIA` specifications. The `WAI-ARIA` support is achieved using the attributes such as `aria-selected` and `aria-activedescendent`.
+Web accessibility ensures that web content and applications are usable by people with disabilities. The Blazor Mention component includes built-in support for WAI-ARIA specifications to improve accessibility for assistive technologies. Key attributes such as `aria-selected` and `aria-activedescendant` are applied to communicate state and focus.
 
-The [Blazor Mention](https://www.syncfusion.com/blazor-components/blazor-mention) 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 Mention](https://www.syncfusion.com/blazor-components/blazor-mention) 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 Mention component is outlined below.
 
@@ -20,11 +20,11 @@ The accessibility compliance for the Blazor Mention component is outlined below.
 | [WCAG 2.2 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Section 508 Support](../common/accessibility#accessibility-standards) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Screen Reader Support](../common/accessibility#screen-reader-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Right-To-Left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [Right-to-left Support](../common/accessibility#right-to-left-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Color Contrast](../common/accessibility#color-contrast) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Mobile Device Support](../common/accessibility#mobile-device-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 | [Keyboard Navigation Support](../common/accessibility#keyboard-navigation-support) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
-| [Axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
+| [axe-core Accessibility Validation](../common/accessibility#ensuring-accessibility) | <img src="https://cdn.syncfusion.com/content/images/documentation/full.png" alt="Yes"> |
 
 <style>
     .post .post-content img {
@@ -56,17 +56,16 @@ Here are some of the `ARIA attributes` that might be used to denote the state of
 
 ## Keyboard interaction
 
-You can use the following key shortcuts to access the Blazor Mention without interruptions. It allows users to quickly perform actions or navigate through an application using keyboard input.
+Use the following key shortcuts to access the Blazor Mention component without interruptions. These shortcuts allow users to navigate and select items using only the keyboard.
 
 | Windows | Mac | Actions |
 | --- | --- | --- |
-| <kbd>↓</kbd> | <kbd>↓</kbd> | Focus the first item in the Mention list. Otherwise, focus the item next to the currently focused item. |
-| <kbd>↑</kbd> | <kbd>↑</kbd> | Focus the item previous to the currently focused one. |
-| <kbd>Esc(Escape)</kbd> | <kbd>Esc(Escape)</kbd> | Closes the popup list when it is in an open state. |
-| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item, and when it is in an open state the popup list closes. |
+| <kbd>↓</kbd> | <kbd>↓</kbd> | Focuses the first item in the Mention list; otherwise, focuses the next item. |
+| <kbd>↑</kbd> | <kbd>↑</kbd> | Focuses the previous item in the Mention list. |
+| <kbd>Esc (Escape)</kbd> | <kbd>Esc (Escape)</kbd> | Closes the popup list if it is open. |
+| <kbd>Enter</kbd> | <kbd>Enter</kbd> | Selects the focused item and closes the popup list if it is open. |
 | <kbd>Tab</kbd> | <kbd>Tab</kbd> | Focuses on the next tab index element on the page when the popup is closed. Otherwise, inserts the selected popup list item and closes the popup list. |
 
-
 {% highlight razor %}
 
 {% include_relative code-snippet/accessibility.razor %}
@@ -75,9 +74,9 @@ You can use the following key shortcuts to access the Blazor Mention without int
 
 ## Ensuring accessibility
 
-The Blazor Mention component's accessibility levels are ensured through an [axe-core](https://www.npmjs.com/package/axe-core) software tool during automated testing.
+The Blazor Mention component’s accessibility is validated using the [axe-core](https://www.npmjs.com/package/axe-core) testing tool during automated testing.
 
-The accessibility compliance of the Mention component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/mention) in a new window to evaluate the accessibility of the Mention component with accessibility tools.
+The accessibility compliance of the Mention component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/mention) in a new window to evaluate the Mention component with accessibility tools.
 
 ## See also
 

blazor/mention/customization.md

@@ -9,17 +9,19 @@ documentation: ug
 
 # Customization in Blazor Mention Component
 
+This page covers common customization options for the Blazor Mention component, including displaying the mention character, appending suffix text, configuring the popup list size, changing the trigger character, and controlling leading space behavior.
+
 ## Show or hide mention character
 
-To show the mentioned character along with the text when displaying the selected mention item in the target element, you can set the [ShowMentionChar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_ShowMentionChar) property of the Mention component to `true`. This can be useful in cases where you want to clearly differentiate between the selected mention item and the rest of the text in the Mention component.
+To display the mention character alongside the selected item in the target element, set the [ShowMentionChar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_ShowMentionChar) property to `true`. This helps distinguish the selected mention from surrounding text. The default value is `false`.
 
 {% highlight razor %}
 
 {% include_relative code-snippet/show-mention-char.razor %}
 
 {% endhighlight %}
 
-![Blazor Mention with show or hide mention character](./images/blazor-mention-show-mention-char.png)
+![Blazor Mention showing the mention character with selected item](./images/blazor-mention-show-mention-char.png)
 
 ## Adding the suffix character after selection
 
@@ -33,38 +35,42 @@ The [SuffixText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDow
 
 ## Configure the popup list
 
-You can customize the suggestion list's width and height using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_PopupWidth) properties. These properties can accept values in pixels, percentage, or as a number. If a number value is specified, it will be treated as a pixel value.
+Customize the suggestion list size using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_PopupHeight) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_PopupWidth) properties. Values can be provided as:
+- A string with CSS units (for example, `"300px"`, `"50%"`)
+- A number (interpreted as pixels)
 
-By default, the popup list width value is set to `auto`. Depending on the mentioned suggestion data list, the width value is automatically adjusted. The popup list height value is set to `300px`.
+Defaults:
+- `PopupWidth`: `auto` (adjusts based on content)
+- `PopupHeight`: `300px`
 
 {% highlight razor %}
 
 {% include_relative code-snippet/popup-list.razor %}
 
 {% endhighlight %}
 
-![Blazor Mention with popup list](./images/blazor-mention-popup-list.png)
+![Blazor Mention with configured popup width and height](./images/blazor-mention-popup-list.png)
 
 ## Trigger character
 
-The [MentionChar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_MentionChar) property in the Mention component allows you to specify the character that will trigger the suggestion list to display in the target area. By default, the `@` character is used as the trigger character, but you can customize it to any other character by setting the `MentionChar` property.
+Change the character that triggers the suggestion list using the [MentionChar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_MentionChar) property. By default, the trigger character is `@`, but it can be set to any character.
 
 {% highlight razor %}
 
 {% include_relative code-snippet/trigger-char.razor %}
 
 {% endhighlight %}
 
-![Blazor Mention with trigger character](./images/blazor-mention-trigger-char.png)
+![Blazor Mention using a custom trigger character](./images/blazor-mention-trigger-char.png)
 
 ## Leading Space Requirement
 
-You can control whether a space is required before the mention character using the [RequireLeadingSpace](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#properties) property in the Mention component. When set to `true` , a space must precede the mention character to trigger the suggestion popup. When set to `false`, the mention character can trigger suggestions without requiring a leading space.
+Control whether a space is required before the mention character using the [RequireLeadingSpace](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#properties) property in the Mention component. When set to `true` , a space must precede the mention character to trigger the suggestion popup. When set to `false`, the mention character can trigger suggestions without requiring a leading space.
 
 {% highlight razor %}
 
 {% include_relative code-snippet/require-leading-space.razor %}
 
 {% endhighlight %}
 
-![Blazor Mention with leading space configuration](./images/require_leading_space.gif)
+![Blazor Mention configured with leading space requirement](./images/require_leading_space.gif)

blazor/mention/disabled-items.md

@@ -9,9 +9,9 @@ documentation: ug
 
 # Disabled Items in Blazor Mention Component
 
-The [Mention](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html) provides options for individual items to be either in an enabled or disabled state for specific scenarios. The category of each list item can be mapped through the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MentionFieldSettings.html#Syncfusion_Blazor_DropDowns_MentionFieldSettings_Disabled) field in the data table. Once an item is disabled, it cannot be selected as a value for the component. To configure the disabled item columns, use the `MentionFieldSettings.Disabled` property.
+The [Mention](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html) component supports disabling individual suggestion items for specific scenarios. Map the disabled state from your data model using the [MentionFieldSettings.Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.MentionFieldSettings.html#Syncfusion_Blazor_DropDowns_MentionFieldSettings_Disabled) field. Disabled items are not selectable and are skipped during keyboard navigation.
 
-In the following sample, State are grouped according on its category using `Disabled` field.
+In the following sample, certain states are disabled by setting the `Disabled` field in the data source.
 
 {% highlight cshtml %}
 

blazor/mention/filtering-data.md

@@ -9,15 +9,15 @@ documentation: ug
 
 # Filtering data in Blazor Mention Component
 
-The Mention component has built-in support for filtering data items, which allows you to easily narrow down the list of mention suggestions based on user input. The filter operation begins as soon as the user starts typing characters in the Mention element, and it is designed to quickly and efficiently search through the available data items to find matches based on the entered characters.
+The Mention component includes built-in filtering to narrow the suggestion list based on user input. Filtering begins when the user types after the mention character and matches items from the data source against the entered text.
 
 ## Limit the minimum filter character
 
-The [MinLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_MinLength) property that allows you to control the minimum length of user input required to initiate the search action. By default, the `MinLength` property is set to `0`, which means that the suggestion list will open as soon as the user inputs the mention character.
+The [MinLength](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_MinLength) property allows controlling the minimum number of characters required to start searching. By default, `MinLength` is `0`, which opens the suggestion list as soon as the mention character is entered.
 
-For example, if you set `MinLength` to `3`, the suggestion list will only open when the user has entered at least three characters.
+For example, when `MinLength` is set to `3`, suggestions appear only after at least three characters are typed.
 
-In the following example, the remote request does not fetch the search data until the search key contains three characters.
+In the following example, the remote request does not fetch data until the search key contains three characters.
 
 {% highlight razor %}
 
@@ -27,11 +27,11 @@ In the following example, the remote request does not fetch the search data unti
 
 ## Change the filter type
 
-The [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_FilterType) property allows you to specify the type of filter to use when filtering data items. By default, the `FilterType` property is set to `Contains`, which means that the Mention component will search for items that contain the entered search string as a substring. The `FilterType` property supports below three different filter types.
+The [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_FilterType) property specifies the type of string comparison for filtering. By default, `FilterType` is `Contains`, which finds items containing the search text. The component supports the following filter types (see the [FilterType enum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.FilterType.html)):
 
-* `StartsWith` - This filter type searches for items that start with the entered characters.
-* `Contains` - This filter type searches for items that contain the entered characters as a substring.
-* `EndsWith` - This filter type searches for items that end with the entered characters.
+* `StartsWith` - Finds items that start with the entered characters.
+* `Contains` - Finds items that contain the entered characters as a substring.
+* `EndsWith` - Finds items that end with the entered characters.
 
 {% highlight razor %}
 
@@ -41,29 +41,29 @@ The [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDow
 
 ## Allow spacing between search
 
-The [AllowSpaces](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_AllowSpaces) property is used to control whether spaces are allowed in the middle of the mention or not. If `AllowSpaces` is set to `true`, the Mention component will allow spaces in the middle of the mention and the data source will be filtered accordingly. If `AllowSpaces` is set to `false`, the Mention component will not allow spaces in the middle of the mention and the data source will not be filtered on space key press.
-
-> By default, the `AllowSpaces` property is disabled, and the space ends the Mention component search.
+The [AllowSpaces](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_AllowSpaces) property controls whether spaces are allowed within the search term after the mention character.
+- When `true`, typing a space continues filtering (for example, “John Sm” matches “John Smith”).
+- When `false` (default), pressing space ends the mention search and the list is not filtered on space key press.
 
 {% highlight razor %}
 
 {% include_relative code-snippet/allow-space.razor %}
 
 {% endhighlight %}
 
-![Blazor Mention with allow space between search](./images/blazor-mention-allow-space.png)
+![Blazor Mention allowing spaces in the search query](./images/blazor-mention-allow-space.png)
 
 ## Customize the suggestion item count
 
-The [SuggestionCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_SuggestionCount) property allows you to specify the number of list items that should be displayed in the suggestion list. By default, the `SuggestionCount` property is set to `25`, which means that the Mention component will display up to `25` list items in the suggestion list. The `SuggestionCount` property can be set to any integer value.
+The [SuggestionCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_SuggestionCount) property sets the maximum number of items displayed in the suggestion list. By default, `SuggestionCount` is `25`. Set it to any integer value to increase or reduce the number of visible suggestions.
 
 {% highlight razor %}
 
 {% include_relative code-snippet/suggestion-list-count.razor %}
 
 {% endhighlight %}
 
-![Blazor Mention with suggestion item count](./images/blazor-mention-suggestion-list.png)
+![Blazor Mention showing a limited number of suggestions](./images/blazor-mention-suggestion-list.png)
 
 ## See also