Integrated latest changes at 12-19-2024 4:30:12 PM

Author: SyncfusionBuild

ej2-react/accumulation-chart/advanced-accessibility-configuration.md

@@ -14,13 +14,13 @@ The Syncfusion® React Accumulation Chart control is structured to visualize dat
 
 The accumulation chart control has a number of characteristics that enable accessibility features to be customized, including:
 
-* `accessibilityDescription` - Provides a text description for the accumulation chart, improving support for screen readers.
-* `accessibilityRole` - Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately.
-* `focusable` - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation.
-* `focusBorderColor` - Sets the color of the focus border, enhancing visibility when the accumulation chart is focused.
-* `focusBorderMargin` - Defines the margin around the focus border.
-* `focusBorderWidth` - Specifies the width of the focus border.
-* `tabIndex` - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation.
+* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the accumulation chart, improving support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the accumulation chart, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Allows the accumulation chart to receive focus, making it accessible via keyboard navigation.
+* [`focusBorderColor`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#focusbordercolor) - Sets the color of the focus border, enhancing visibility when the accumulation chart is focused.
+* [`focusBorderMargin`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#focusbordermargin) - Defines the margin around the focus border.
+* [`focusBorderWidth`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#focusborderwidth) - Specifies the width of the focus border.
+* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order for the accumulation chart element, enabling efficient keyboard navigation.
 
 {% tabs %}
 {% highlight ts tabtitle="index.jsx" %}
@@ -37,10 +37,10 @@ The accumulation chart control has a number of characteristics that enable acces
 
 The [`series`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#series) supports the customization of accessibility for data points, allowing key characteristics to be adjusted for enhanced accessibility, such as:
 
-* `accessibilityDescription` - Provides a text description for the series root element, enhancing support for screen readers.
-* `accessibilityRole` - Specifies the role of the series, helping screen readers to identify the element appropriately.
-* `focusable` - Allows the series to receive focus, making it accessible via keyboard navigation.
-* `tabIndex` - Specifies the tab order of the series element, enabling efficient keyboard navigation.
+* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the series root element, enhancing support for screen readers.
+* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the series, helping screen readers to identify the element appropriately.
+* [`focusable`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Allows the series to receive focus, making it accessible via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the series element, enabling efficient keyboard navigation.
 
 {% tabs %}
 {% highlight ts tabtitle="index.jsx" %}
@@ -55,12 +55,12 @@ The [`series`](https://ej2.syncfusion.com/react/documentation/api/accumulation-c
 
 ## Legend
 
-The [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#legendsettings) provide information about the series shown in the accumulation chart. The following `accessibility` properties in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#legendsettings) can be used to alter the accessibility of the accumulation chart's legend:
+The [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#legendsettings) provide information about the series shown in the accumulation chart. The following [`accessibility`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettingsModel/#accessibility) properties in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#legendsettings) can be used to alter the accessibility of the accumulation chart's legend:
 
-* `accessibilityDescription` - Provides a text description for the legend root element, enhancing support for screen readers..
-* `accessibilityRole` - Specifies the role of the legend items to screen readers, providing appropriate context.
-* `focusable` - Specifies whether legend items are focusable via keyboard navigation.
-* `tabIndex` - Specifies the tab order of the legend element, enabling efficient keyboard navigation.
+* [`accessibilityDescription`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#accessibilitydescription) - Provides a text description for the legend root element, enhancing support for screen readers..
+* [`accessibilityRole`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#accessibilityrole) - Specifies the role of the legend items to screen readers, providing appropriate context.
+* [`focusable`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#focusable) - Specifies whether legend items are focusable via keyboard navigation.
+* [`tabIndex`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/accessibilityModel/#tabindex) - Specifies the tab order of the legend element, enabling efficient keyboard navigation.
 
 {% tabs %}
 {% highlight ts tabtitle="index.jsx" %}

ej2-react/accumulation-chart/legend.md

@@ -194,7 +194,7 @@ The [`itemPadding`](https://ej2.syncfusion.com/react/documentation/api/accumulat
 
 ## Legend layout
 
-The `layout` property in `legendSettings` allows you to display the legend either horizontally or vertically. By default, the `layout` is set to **Auto**. The `maximumColumns` property in `legendSettings` defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the `fixedWidth` property in `legendSettings` ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.
+The [`layout`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettingsModel/#layout) property in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#legendsettings) allows you to display the legend either horizontally or vertically. By default, the [`layout`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettingsModel/#layout) is set to **Auto**. The [`maximumColumns`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettingsModel/#maximumcolumns) property in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#legendsettings) defines the maximum number of columns that can be displayed within the available space when using the auto layout. Additionally, enabling the [`fixedWidth`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettingsModel/#fixedwidth) property in [`legendSettings`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart#legendsettings) ensures that all legend items are displayed with equal widths. The width of each item is determined by the maximum width among the legend items.
 
 {% tabs %}
 {% highlight ts tabtitle="index.jsx" %}

ej2-react/accumulation-chart/tool-tip.md

@@ -132,7 +132,7 @@ Using [`tooltipRender`](https://ej2.syncfusion.com/react/documentation/api/accum
 
 ## Enable highlight
 
-By setting the `enableHighlight` property to **true**, the hovered pie slice is highlighted, while the remaining slices are dimmed, enhancing focus and clarity.
+By setting the [`enableHighlight`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/tooltipSettingsModel/#enablehighlight) property to **true**, the hovered pie slice is highlighted, while the remaining slices are dimmed, enhancing focus and clarity.
 
 {% tabs %}
 {% highlight ts tabtitle="index.jsx" %}

ej2-react/avatar/getting-started.md

@@ -14,7 +14,7 @@ This section explains how to create a simple **Avatar** using Styles in the Reac
 
 ## Dependencies
 
-The Avatar Component is pure CSS component so no specific dependencies to render the avatar.
+The Avatar Component is a pure CSS component so no specific dependencies to render the avatar.
 
 ## Installation and configuration
 

ej2-react/avatar/how-to/avatar-customization.md

@@ -21,6 +21,9 @@ The avatar comes with default background color (Grey). This can be easily custom
 {% highlight ts tabtitle="index.tsx" %}
 {% include code-snippet/avatar/color-cs1/app/index.tsx %}
 {% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/avatar/color-cs1/index.html %}
+{% endhighlight %}
 {% highlight ts tabtitle="index.css" %}
 {% include code-snippet/avatar/color-cs1/index.css %}
 {% endhighlight %}
@@ -39,6 +42,9 @@ Even though the avatar comes with five predefined sizes, sometimes it's not enou
 {% highlight ts tabtitle="index.tsx" %}
 {% include code-snippet/avatar/custom-size-cs1/app/index.tsx %}
 {% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/avatar/custom-size-cs1/index.html %}
+{% endhighlight %}
 {% highlight ts tabtitle="index.css" %}
 {% include code-snippet/avatar/custom-size-cs1/index.css %}
 {% endhighlight %}
@@ -57,6 +63,9 @@ Avatars can be used with a wide variety of media formats like SVG, font-icons, i
 {% highlight ts tabtitle="index.tsx" %}
 {% include code-snippet/avatar/media-formats-cs1/app/index.tsx %}
 {% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/avatar/media-formats-cs1/index.html %}
+{% endhighlight %}
 {% highlight ts tabtitle="index.css" %}
 {% include code-snippet/avatar/media-formats-cs1/index.css %}
 {% endhighlight %}
@@ -66,7 +75,7 @@ Avatars can be used with a wide variety of media formats like SVG, font-icons, i
 
 ## Dynamic avatar rendering from datasource
 
-We can render avatar component dynamically from a data-source. In this sample we have rendered the avatar component
+We can render the avatar component dynamically from a data-source. In this sample we have rendered the avatar component
 using a data-source which contains the image source in different sizes dynamically. This is applicable also for data-source from the server or remote data or AJAX. We have also rendered the avatar using `CSS` property `background-image` and using image tag.
 
 {% tabs %}
@@ -76,6 +85,9 @@ using a data-source which contains the image source in different sizes dynamical
 {% highlight ts tabtitle="index.tsx" %}
 {% include code-snippet/avatar/react-avatar-cs1/app/index.tsx %}
 {% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/avatar/react-avatar-cs1/index.html %}
+{% endhighlight %}
 {% highlight ts tabtitle="index.css" %}
 {% include code-snippet/avatar/react-avatar-cs1/index.css %}
 {% endhighlight %}

ej2-react/avatar/how-to/integrate-avatar-into-badge.md

@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Integrate avatar into badge in React Avatar component
 
-The badge is dependent and supportive component, and it can be used with avatar to create a notification avatar.
+The badge is a dependent and supportive component, and it can be used with an avatar to create a notification avatar.
 The default avatar (.`e-avatar`) and circle avatar (.`e-avatar-circle`) have been used with notification badges (.`e-badge-notification`) in the following sample.
 
 {% tabs %}
@@ -20,6 +20,9 @@ The default avatar (.`e-avatar`) and circle avatar (.`e-avatar-circle`) have bee
 {% highlight ts tabtitle="index.tsx" %}
 {% include code-snippet/avatar/badge-cs1/app/index.tsx %}
 {% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/avatar/badge-cs1/index.html %}
+{% endhighlight %}
 {% highlight ts tabtitle="index.css" %}
 {% include code-snippet/avatar/badge-cs1/index.css %}
 {% endhighlight %}

ej2-react/avatar/how-to/integrate-avatar-into-listview.md

@@ -10,7 +10,7 @@ domainurl: ##DomainURL##
 
 # Integrate avatar into listview in React Avatar component
 
-Avatar is integrated into the listview to create contacts applications. The `xsmall` size avatar is used to match the size of the list item. Letters and images are also used as avatar content.
+The Avatar component is integrated into the listview to create contacts applications. The `xsmall` size avatar is used to match the size of the list item. Letters and images are also used as avatar content.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -19,6 +19,9 @@ Avatar is integrated into the listview to create contacts applications. The `xsm
 {% highlight ts tabtitle="index.tsx" %}
 {% include code-snippet/avatar/listview-cs1/app/index.tsx %}
 {% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/avatar/listview-cs1/index.html %}
+{% endhighlight %}
 {% highlight ts tabtitle="index.css" %}
 {% include code-snippet/avatar/listview-cs1/index.css %}
 {% endhighlight %}

ej2-react/avatar/index.md

@@ -16,4 +16,4 @@ Avatars are icons or figures representing a particular person, used in popular m
 
 * **[Types](./types#avatar-types)** - Provided 2 types of Avatar.
 
-* **[Sizes](./types#avatar-size)** - Supports different sizes to adapt the various application scenario.
+* **[Sizes](./types#avatar-size)** - Supports different sizes to adapt to various application scenarios.

ej2-react/avatar/types.md

@@ -19,10 +19,10 @@ The Essential JS 2 Avatar has the following predefined sizes that can be used wi
 | Class Name         | Description
 | :-------------:    |:-------------:
 | e-avatar-xlarge    | Displays xlarge size avatar.
-| e-avatar-large     | Displays apply large size avatar.
-| e-avatar           | Displays apply default size avatar.
-| e-avatar-small     | Displays apply small size avatar.
-| e-avatar-xsmall    | Displays apply xsmall size avatar.
+| e-avatar-large     | Displays large size avatar.
+| e-avatar           | Displays default size avatar.
+| e-avatar-small     | Displays small size avatar.
+| e-avatar-xsmall    | Displays xsmall size avatar.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -31,6 +31,9 @@ The Essential JS 2 Avatar has the following predefined sizes that can be used wi
 {% highlight ts tabtitle="index.tsx" %}
 {% include code-snippet/avatar/size-cs1/app/index.tsx %}
 {% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/avatar/size-cs1/index.html %}
+{% endhighlight %}
 {% highlight ts tabtitle="index.css" %}
 {% include code-snippet/avatar/size-cs1/index.css %}
 {% endhighlight %}
@@ -57,6 +60,9 @@ class `.e-avatar` to the target element.
 {% highlight ts tabtitle="index.tsx" %}
 {% include code-snippet/avatar/default-cs1/app/index.tsx %}
 {% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/avatar/default-cs1/index.html %}
+{% endhighlight %}
 {% highlight ts tabtitle="index.css" %}
 {% include code-snippet/avatar/default-cs1/index.css %}
 {% endhighlight %}
@@ -75,6 +81,9 @@ The circle avatar style can be applied by adding the modifier class `.e-avatar-c
 {% highlight ts tabtitle="index.tsx" %}
 {% include code-snippet/avatar/circle-cs1/app/index.tsx %}
 {% endhighlight %}
+{% highlight html tabtitle="index.html" %}
+{% include code-snippet/avatar/circle-cs1/index.html %}
+{% endhighlight %}
 {% highlight ts tabtitle="index.css" %}
 {% include code-snippet/avatar/circle-cs1/index.css %}
 {% endhighlight %}