Integrated latest changes at 12-14-2024 4:30:33 PM

Author: SyncfusionBuild

ej2-react-toc.html

@@ -207,6 +207,7 @@
 <li><a href="/ej2-react/accumulation-chart/chart-print">Print and Export</a></li>
 <li><a href="/ej2-react/accumulation-chart/appearance">Appearance</a></li>
 <li><a href="/ej2-react/accumulation-chart/accessibility">Accessibility</a></li>
+<li><a href="/ej2-react/accumulation-chart/advanced-accessibility-configuration">Advanced Accessibility Configuration</a></li>
 <li><a href="/ej2-react/accumulation-chart/ej1-api-migration">Migration from Essential JS 1</a></li>
 <li>How To
 <ul>
@@ -227,7 +228,7 @@
         <li><a href="/ej2-react/ai-assistview/accessibility">Accessibility</a></li>
         <li><a href="/ej2-react/ai-assistview/methods">Methods</a></li>
         <li><a href="/ej2-react/ai-assistview/events">Events</a></li>
-        <li><a href="https://ej2.syncfusion.com/react/documentation/api/ai-assist-view/">API Reference</a></li>
+        <li><a href="https://ej2.syncfusion.com/react/documentation/api/ai-assistview/">API Reference</a></li>
     </ul>
 </li><li>
 Appbar
@@ -253,6 +254,7 @@
 <li><a href="/ej2-react/auto-complete/localization">Localization</a></li>
 <li><a href="/ej2-react/auto-complete/style">Style and appearance</a></li>
 <li><a href="/ej2-react/auto-complete/accessibility">Accessibility</a></li>
+<li><a href="/ej2-react/auto-complete/resize">Popup Resize</a></li>
 <li>How To
 <ul>
 <li><a href="/ej2-react/auto-complete/how-to/autofill">Autofill supported with AutoComplete</a></li>
@@ -503,6 +505,7 @@
 <li><a href="/ej2-react/chart/chart-appearance">Appearance</a></li>
 <li><a href="/ej2-react/chart/render-methods">Rendering Methods</a></li>
 <li><a href="/ej2-react/chart/accessibility">Accessibility</a></li>
+<li><a href="/ej2-react/chart/advanced-accessibility-configuration">Advanced Accessibility Configuration</a></li>
 <li><a href="/ej2-react/chart/internationalization">Internationalization</a></li>
 <li><a href="/ej2-react/chart/localization">Localization</a></li>
 <li><a href="/ej2-react/chart/ej1-api-migration">Migration from Essential JS 1</a></li>
@@ -642,6 +645,7 @@
 <li><a href="/ej2-react/combo-box/localization">Localization</a></li>
 <li><a href="/ej2-react/combo-box/style">Style and appearance</a></li>
 <li><a href="/ej2-react/combo-box/accessibility">Accessibility</a></li>
+<li><a href="/ej2-react/combo-box/resize">Popup Resize</a></li>
 <li>How To
 <ul>
 <li><a href="/ej2-react/combo-box/how-to/autofill">Autofill supported with ComboBox</a></li>
@@ -1120,6 +1124,7 @@
 <li><a href="/ej2-react/drop-down-list/localization">Localization</a></li>
 <li><a href="/ej2-react/drop-down-list/style">Style and appearance</a></li>
 <li><a href="/ej2-react/drop-down-list/accessibility">Accessibility</a></li>
+<li><a href="/ej2-react/drop-down-list/resize">Popup Resize</a></li>
 <li>How To
 <ul>
 <li><a href="/ej2-react/drop-down-list/how-to/add-item">Add item in between in DropDownList</a></li>
@@ -1547,6 +1552,7 @@
 <li><a href="/ej2-react/image-editor/frame">Frame</a></li>
 <li><a href="/ej2-react/image-editor/z-order">Z-Order</a></li>
 <li><a href="/ej2-react/image-editor/redact">Redact</a></li>
+<li><a href="/ej2-react/image-editor/image-restrictions">Image Restrictions</a></li>
 <li><a href="/ej2-react/image-editor/localization">Localization</a></li>
 <li>How To
     <ul>
@@ -1849,6 +1855,7 @@
 <li><a href="/ej2-react/multi-select/localization">Localization</a></li>
 <li><a href="/ej2-react/multi-select/style">Style and appearance</a></li>
 <li><a href="/ej2-react/multi-select/accessibility">Accessibility</a></li>
+<li><a href="/ej2-react/multi-select/resize">Popup Resize</a></li>
 <li>How To
 <ul>
 <li><a href="/ej2-react/multi-select/how-to/icons-support">Show the list items with icons</a></li>
@@ -2372,6 +2379,7 @@ <h1>Summary of Predefined Dialogs component</h1>
 <li><a href="/ej2-react/schedule/state-persistence">State Persistence</a></li>
 <li><a href="/ej2-react/schedule/exporting">Exporting</a></li>
 <li><a href="/ej2-react/schedule/context-menu">Context Menu</a></li>
+<li><a href="/ej2-react/schedule/clipboard">Clipboard</a></li>
 <li><a href="/ej2-react/schedule/dimensions">Scheduler Dimensions</a></li>
 <li><a href="/ej2-react/schedule/recurrence-editor">Recurrence Editor</a></li>
 <li><a href="/ej2-react/schedule/localization">Globalization</a></li>

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

@@ -0,0 +1,74 @@
+---
+layout: post
+title: Accessibility customization | Syncfusion
+description: Learn here all about Accessibility customization in Syncfusion React Accumulation chart component of Syncfusion Essential JS 2 and more.
+control: Accessibility customization 
+platform: ej2-react
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Accessibility customization
+
+The Syncfusion® React Accumulation Chart control is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the React Accumulation Chart control's accessibility customization are briefly explained in this section.
+
+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.
+
+{% tabs %}
+{% highlight ts tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/pie-cs43/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/pie-cs43/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs43" %}
+
+## Series
+
+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.
+
+{% tabs %}
+{% highlight ts tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/pie-cs44/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/pie-cs44/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs44" %}
+
+## 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:
+
+* `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.
+
+{% tabs %}
+{% highlight ts tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/pie-cs45/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/pie-cs45/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs45" %}

ej2-react/accumulation-chart/funnel.md

@@ -21,7 +21,7 @@ To render a funnel series, use the series [`type`](https://ej2.syncfusion.com/re
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/funnel-cs1" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/funnel-cs1" %}
 
 ## Size
 
@@ -41,7 +41,7 @@ The size of the funnel chart can be customized by using the  `width` and `height
 
 {% previewsample "page.domainurl/code-snippet/chart/series/funnel-cs2" %}
 
-## Neck Size
+## Neck size
 
 The funnel's neck size can be customized by using the `neckWidth` and `neckHeight` properties.
 
@@ -95,7 +95,7 @@ Points can be exploded on mouse click by setting the `explode` property to true.
 
 {% previewsample "page.domainurl/code-snippet/chart/series/funnel-cs5" %}
 
-## Smart Data Label
+## Smart data label
 
 It provides the data label smart arrangement of the funnel and pyramid series. The overlap data label will be placed on left side of the funnel/pyramid series.
 
@@ -131,7 +131,7 @@ Individual points can be customized using the `pointRender` event.
 
 {% previewsample "page.domainurl/code-snippet/chart/series/funnel-cs7" %}
 
-## See Also
+## See also
 
 * [Data label](./data-label/)
 * [Grouping](./grouping/)

ej2-react/accumulation-chart/legend.md

@@ -23,12 +23,11 @@ Here, the legend for a point can be collapsed by giving the empty string to the
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs2" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs2" %}
 
->Note: To use the legends feature, inject the `AccumulationLegend` using the module
-into the `services`.
+>Note: To use the legends feature, inject the `AccumulationLegend` using the module into the `services`.
 
-## Position and Alignment
+## Position and alignment
 
 By using the position property, you can position the legend at the `left`, `right`, `top` or `bottom` of the chart. You can also align the legend to `center`, `far` or `near` of the chart using the alignment property.
 
@@ -41,9 +40,9 @@ By using the position property, you can position the legend at the `left`, `
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs3" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs3" %}
 
-## Legend Reverse
+## Legend reverse
 
 You can reverse the order of the legend items by using the [`reverse`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettings/#reverse) property. By default, legend for the first series in the collection will be placed first.
 
@@ -56,9 +55,9 @@ You can reverse the order of the legend items by using the [`reverse`](https://e
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-reverse-cs1" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-reverse-cs1" %}
 
-## Legend Shape
+## Legend shape
 
 To change the legend icon shape, use the `legendShape` property in the `series`. By default, legend icon shape is `seriesType`.
 
@@ -71,9 +70,9 @@ To change the legend icon shape, use the `legendShape` property in the `series
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs4" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs4" %}
 
-## Legend Size
+## Legend size
 
 The legend size can be changed by using the `width` and `height` properties of the `legendSettings`.
 
@@ -86,9 +85,9 @@ The legend size can be changed by using the `width` and `height` properties of t
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs5" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs5" %}
 
-## Legend Item Size
+## Legend item size
 
 You can customize the size of the legend items by using the `shapeHeight` and `shapeWidth` properties.
 
@@ -101,9 +100,9 @@ You can customize the size of the legend items by using the `shapeHeight` and `s
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs6" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs6" %}
 
-## Paging for Legend
+## Paging for legend
 
 Paging will be enabled by default, when the legend items exceeds the legend bounds. You can view the each legend item by navigating between the pages using the navigation buttons.
 
@@ -116,9 +115,9 @@ Paging will be enabled by default, when the legend items exceeds the legend boun
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs7" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs7" %}
 
-## Legend Text Wrap
+## Legend text wrap
 
 When the legend text exceeds the container, the text can be wrapped by using `textWrap` Property. End user can also wrap the legend text based on the `maximumLabelWidth` property.
 
@@ -131,12 +130,11 @@ When the legend text exceeds the container, the text can be wrapped by using `te
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs8" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs8" %}
 
-## Enable Animation
+## Enable animation
 
-You can customize the animation while clicking legend by setting enableAnimation as true or false using
-`enableAnimation` property in Accumulation Chart.
+You can customize the animation while clicking legend by setting enableAnimation as true or false using `enableAnimation` property in Accumulation Chart.
 
 {% tabs %}
 {% highlight js tabtitle="index.jsx" %}
@@ -147,9 +145,9 @@ You can customize the animation while clicking legend by setting enableAnimation
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs9" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs9" %}
 
-## Legend Title
+## Legend title
 
 You can set title for legend using `title` property in `legendSettings`. You can also customize the `fontStyle`, `size`, `fontWeight`, `color`, `textAlignment`, `fontFamily`, `opacity` and `textOverflow` of legend title. `titlePosition` is used to set the legend position in `Top`, `Left` and `Right` position. `maximumTitleWidth` is used to set the width of the legend title. By default, it will be `100px`.
 
@@ -162,9 +160,9 @@ You can set title for legend using `title` property in `legendSettings`. You can
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs10" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs10" %}
 
-## Arrow Page Navigation
+## Arrow page navigation
 
 By default, the page number will be enabled while legend paging. Now, you can disable that page number and also you can get left and right arrows for page navigation. You have to set `false` value to `enablePages` to get this support.
 
@@ -177,9 +175,9 @@ By default, the page number will be enabled while legend paging. Now, you can di
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs11" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs11" %}
 
-## Legend Item Padding
+## Legend item padding
 
 The [`itemPadding`](https://ej2.syncfusion.com/react/documentation/api/accumulation-chart/legendSettings/#itempadding) property can be used to adjust the space between the legend items.
 
@@ -192,4 +190,19 @@ The [`itemPadding`](https://ej2.syncfusion.com/react/documentation/api/accumulat
 {% endhighlight %}
 {% endtabs %}
 
- {% previewsample "page.domainurl/code-snippet/chart/series/legend-cs12" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/legend-cs12" %}
+
+## 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.
+
+{% tabs %}
+{% highlight ts tabtitle="index.jsx" %}
+{% include code-snippet/chart/series/pie-cs42/app/index.jsx %}
+{% endhighlight %}
+{% highlight ts tabtitle="index.tsx" %}
+{% include code-snippet/chart/series/pie-cs42/app/index.tsx %}
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs42" %}