Integrated latest changes at 12-14-2024 4:30:22 AM

Author: SyncfusionBuild

ej2-vue-toc.html

@@ -161,6 +161,7 @@
 <li><a href="/ej2-vue/accumulation-chart/chart-print">Print and Export</a></li>
 <li><a href="/ej2-vue/accumulation-chart/appearance">Appearance</a></li>
 <li><a href="/ej2-vue/accumulation-chart/accessibility">Accessibility</a></li>
+<li><a href="/ej2-vue/accumulation-chart/advanced-accessibility-configuration">Advanced Accessibility Configuration</a></li>
 <li><a href="https://ej2.syncfusion.com/vue/documentation/api/accumulation-chart/">API Reference</a></li>
 </ul>
 </li><li>
@@ -384,7 +385,7 @@
 <li><a href="/ej2-vue/carousel/styles-and-appearance">Styles and Appearances</a></li>
 <li>How To
     <ul>
-    <li><a href="/ej2-vue/carousel/how-to/load-images-in-webp-format.md">Load images in webp format</a></li>
+    <li><a href="/ej2-vue/carousel/how-to/load-images-in-webp-format">Load images in webp format</a></li>
     </ul>
     </li>
 <li><a href="https://ej2.syncfusion.com/vue/documentation/api/carousel">API Reference</a></li>
@@ -498,6 +499,7 @@
 <li><a href="/ej2-vue/chart/chart-appearance">Appearance</a></li>
 <li><a href="/ej2-vue/chart/render-methods">Rendering Methods</a></li>
 <li><a href="/ej2-vue/chart/accessibility">Accessibility</a></li>
+<li><a href="/ej2-vue/chart/advanced-accessibility-configuration">Advanced Accessibility Configuration</a></li>
 <li><a href="/ej2-vue/chart/internationalization">Internationalization</a></li>
 <li><a href="/ej2-vue/chart/localization">Localization</a></li>
 <li>How To
@@ -656,6 +658,7 @@
 <li><a href="/ej2-vue/context-menu/how-to/underline-a-character-in-the-item-text">Underline a character in the item text</a></li>
 <li><a href="/ej2-vue/context-menu/how-to/open-a-dialog-on-contextmenu-item-click">Open a dialog on ContextMenu item click</a></li>
 <li><a href="/ej2-vue/context-menu/how-to/change-animation-settings">Change animation settings</a></li>
+<li><a href="/ej2-vue/context-menu/how-to/scrollable-context-menu">Render Scrollable Context Menu</a></li>
 </ul>
 </li>
 </ul>
@@ -1079,6 +1082,8 @@
 <li><a href="/ej2-vue/drop-down-button/popup-items">Popup Items</a></li>
 <li><a href="/ej2-vue/drop-down-button/accessibility">Accessibility</a></li>
 <li><a href="/ej2-vue/drop-down-button/style-and-appearance">Styles and Appearances</a></li>
+<li><a href="/ej2-vue/drop-down-button/item-template">Item template</a></li>
+<li><a href="/ej2-vue/drop-down-button/animation">Animation</a></li>
 <li>How To
 <ul>
 <li><a href="/ej2-vue/drop-down-button/how-to/change-caret-icon">Change caret icon</a></li>
@@ -1091,6 +1096,7 @@
 <li><a href="/ej2-vue/drop-down-button/how-to/open-a-dialog-on-popup-item-click">Open a dialog on popup item click</a></li>
 <li><a href="/ej2-vue/drop-down-button/how-to/position-popup-open">Position popup open</a></li>
 <li><a href="/ej2-vue/drop-down-button/how-to/underline-a-character-in-the-item-text">Underline a character in the item text</a></li>
+<li><a href="/ej2-vue/drop-down-button/how-to/customize-popup-width">Customize popup width</a></li>
 </ul>
 </li>
 <li><a href="https://ej2.syncfusion.com/vue/documentation/api/drop-down-button/">API Reference</a></li>
@@ -1804,6 +1810,7 @@
 <li><a href="/ej2-vue/menu/how-to/set-title">Set title for Menu items</a></li>
 <li><a href="/ej2-vue/menu/how-to/rounded-corner">Menu with rounded corner</a></li>
 <li><a href="/ej2-vue/menu/how-to/menu-item-click">Open menu and sub menu on click only</a></li>
+<li><a href="/ej2-vue/menu/how-to/custom-attributes-menu-items">Set custom attributes for Menu items</a></li>
 </ul>
 </li>
 </ul>
@@ -2034,6 +2041,7 @@
 <li><a href="/ej2-vue/pivotview/olap">OLAP</a></li>
 <li><a href="/ej2-vue/pivotview/server-side-pivot-engine">Server-side Engine</a></li>
 <li><a href="/ej2-vue/pivotview/pivot-chart">Pivot Chart</a></li>
+<li><a href="/ej2-vue/pivotview/classic-layout">Classic Layout</a></li>
 <li><a href="/ej2-vue/pivotview/drill-down">Drill Down/Up</a></li>
 <li>Data Shaping
 <ul>
@@ -2657,6 +2665,7 @@
 <li><a href="/ej2-vue/switch/how-to/set-disabled-state">Set disabled state</a></li>
 <li><a href="/ej2-vue/switch/how-to/submit-name-and-value-in-form">Submit name and value in form</a></li>
 <li><a href="/ej2-vue/switch/how-to/change-switch-state-using-toggle-method">Change switch state using toggle method</a></li>
+<li><a href="/ej2-vue/switch/how-to/prevent-state-change">Prevent State Change</a></li>
 </ul>
 </li>
 <li><a href="https://ej2.syncfusion.com/vue/documentation/api/switch">API Reference</a></li>
@@ -2667,6 +2676,7 @@
 <li><a href="/ej2-vue/tab/getting-started">Getting Started</a></li>
 <li><a href="/ej2-vue/tab/getting-started-vue-3">Getting Started with Vue 3 using Composition API</a></li>
 <li><a href="/ej2-vue/tab/adaptive">Responsive Modes</a></li>
+<li><a href="/ej2-vue/tab/content-render-modes">Content Render Modes</a></li>
 <li><a href="/ej2-vue/tab/header">Header</a></li>
 <li><a href="/ej2-vue/tab/localization">Localization</a></li>
 <li><a href="/ej2-vue/tab/orientation">Orientation</a></li>

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

@@ -0,0 +1,74 @@
+---
+layout: post
+title: Accessibility customization in Syncfusion Vue Pie chart component.
+description: Learn here all about Accessibility customization in Syncfusion Vue Accumulation chart component of Syncfusion Essential JS 2 and more.
+control: Accessibility customization
+platform: ej2-vue
+documentation: ug
+domainurl: ##DomainURL##
+---
+
+# Accessibility customization
+
+The Syncfusion® ##Platform_Name## 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 ##Platform_Name## 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 html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/pie-chart/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/pie-chart/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/pie-chart" %}
+
+## Series
+
+The `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 html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/series/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/series/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/series" %}
+
+## Legend
+
+The `legendSettings` provide information about the series shown in the accumulation chart. The following `accessibility` properties in `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 html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/legend/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/accessibility/legend/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/chart/accessibility/legend" %}

ej2-vue/accumulation-chart/legend.md

@@ -187,4 +187,19 @@ The [`itemPadding`](https://ej2.syncfusion.com/vue/documentation/api/accumulatio
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs19" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs19" %}
+
+## 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 html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs41/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs41/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs41" %}

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

@@ -128,4 +128,19 @@ By default, tooltip shows information of x and y value in points. You can show m
 {% endhighlight %}
 {% endtabs %}
 
-{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs33" %}
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs33" %}
+
+## 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.
+
+{% tabs %}
+{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs42/app-composition.vue %}
+{% endhighlight %}
+{% highlight html tabtitle="Options API (~/src/App.vue)" %}
+{% include code-snippet/chart/series/pie-cs42/app.vue %}
+{% endhighlight %}
+{% endtabs %}
+        
+{% previewsample "page.domainurl/code-snippet/chart/series/pie-cs42" %}

ej2-vue/avatar/vue-3-getting-started.md

@@ -165,7 +165,7 @@ Here is the summarized code for the above steps in the **src/App.vue** file:
 
  /* Add your custom avatar image. */
  .e-avatar {
-     background-image: url(https://ej2.syncfusion.com/vue/documentation/samples/avatar/media-formats-cs1/pic01.png);
+     background-image: url(https://ej2.syncfusion.com/demos/src/grid/images/2.png);
      margin: 2px;
  }
  </style>

ej2-vue/carousel/accessibility.md

@@ -54,7 +54,9 @@ The Carousel component is designed by considering [WAI-ARIA](https://www.w3.org/
 
 ## Keyboard interaction
 
-By default, keyboard navigation is enabled. This component implements keyboard navigation support by following the WAI-ARIA practices. Once focused on the active Carousel element, you can use the following key combination for interacting with the Carousel.
+All Carousel actions can be controlled using keyboard keys through the [`allowKeyboardInteraction`](https://ej2.syncfusion.com/vue/documentation/api/carousel/#allowkeyboardinteraction) property, which is enabled by default. If you wish to disable the default keyboard interactions, you can set this property to `false`. This is particularly useful if the carousel contains input elements, as pressing the arrow keys might cause the carousel to move unexpectedly. By disabling keyboard interaction, the carousel remains static, allowing the user to focus on the input fields without any interruptions.
+
+This control implements keyboard navigation support by following WAI-ARIA practices. Once focused on the active Carousel element, you can use the following key combinations to interact with the Carousel.
 
 | Key                | Description                                                     |
 | ------------------ | --------------------------------------------------------------- |