From 28e392755db51a6d49574ce3421a839ab28677f1 Mon Sep 17 00:00:00 2001
From: Aleksey Semikozov <aleksei.semikozov@devexpress.com>
Date: Thu, 16 Jul 2026 13:50:38 -0300
Subject: [PATCH 1/3] PivotGrid: fix heading-order a11y issues in demos

---
 .../ExcelJsHeaderAndFooter/Angular/app/app.component.css    | 4 ++--
 .../ExcelJsHeaderAndFooter/Angular/app/app.component.html   | 2 +-
 .../Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx    | 2 +-
 .../Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css | 4 ++--
 .../Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js   | 2 +-
 .../PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css     | 4 ++--
 .../Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue      | 6 +++---
 .../PivotGrid/ExcelJsHeaderAndFooter/jQuery/index.html      | 2 +-
 .../PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css      | 4 ++--
 .../Demos/PivotGrid/IntegratedFieldChooser/description.md   | 6 +++---
 .../RemoteVirtualScrolling/Angular/app/app.component.css    | 4 ++--
 .../RemoteVirtualScrolling/Angular/app/app.component.html   | 2 +-
 .../Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx    | 2 +-
 .../Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css | 4 ++--
 .../Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js   | 2 +-
 .../PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css     | 4 ++--
 .../Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue      | 6 +++---
 .../PivotGrid/RemoteVirtualScrolling/jQuery/index.html      | 2 +-
 .../PivotGrid/RemoteVirtualScrolling/jQuery/styles.css      | 4 ++--
 .../PivotGrid/SimpleArray/Angular/app/app.component.css     | 4 ++--
 .../PivotGrid/SimpleArray/Angular/app/app.component.html    | 2 +-
 apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx        | 2 +-
 apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css     | 4 ++--
 apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js       | 2 +-
 apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css   | 4 ++--
 apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue          | 6 +++---
 apps/demos/Demos/PivotGrid/SimpleArray/jQuery/index.html    | 2 +-
 apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css    | 4 ++--
 apps/demos/Demos/PivotGrid/WebAPIService/description.md     | 2 +-
 29 files changed, 49 insertions(+), 49 deletions(-)

diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
index 6abb895b9812..de5748dddaed 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
@@ -1,9 +1,9 @@
-::ng-deep .long-title h3 {
+::ng-deep .long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
 
 ::ng-deep .export-options {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.html b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.html
index 818e6e1c0da1..2b06465240df 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.html
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="long-title"><h3>Sales Amount by Region</h3></div>
+<div class="long-title"><h2>Sales Amount by Region</h2></div>
 <dx-pivot-grid
   [allowSortingBySummary]="true"
   [allowSorting]="true"
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx
index 356d83815196..24f826e20a7c 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx
@@ -109,7 +109,7 @@ const App = () => {
   return (
     <>
       <div className="long-title">
-        <h3>Sales Amount by Region</h3>
+        <h2>Sales Amount by Region</h2>
       </div>
       <PivotGrid
         dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
index f5624cdae77c..7fae97ef913d 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,7 +9,7 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
 
 .export-options {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js
index 843d58a2c71c..e6bda9f95635 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js
@@ -109,7 +109,7 @@ const App = () => {
   return (
     <>
       <div className="long-title">
-        <h3>Sales Amount by Region</h3>
+        <h2>Sales Amount by Region</h2>
       </div>
       <PivotGrid
         dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
index f5624cdae77c..7fae97ef913d 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,7 +9,7 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
 
 .export-options {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
index 9b70462cf194..9f73a497ee7e 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="long-title">
-      <h3>Sales Amount by Region</h3>
+      <h2>Sales Amount by Region</h2>
     </div>
     <DxPivotGrid
       :height="440"
@@ -166,7 +166,7 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
 // We recommend that you use the official 'file-saver' package in your applications.
 </script>
 <style scoped>
-.long-title h3 {
+.long-title h2 {
   font-family:
     "Segoe UI Light",
     "Helvetica Neue Light",
@@ -177,7 +177,7 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
 
 .export-options {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/index.html b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/index.html
index 51fb9b394691..e9df81dc5d7f 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/index.html
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/index.html
@@ -34,7 +34,7 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div class="long-title"><h3>Sales Amount by Region</h3></div>
+      <div class="long-title"><h2>Sales Amount by Region</h2></div>
       <div id="sales"></div>
       <div class="export-options">
         <div class="caption">Export Options</div>
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
index e6e5471e0611..9ea5dc864a6d 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
@@ -1,9 +1,9 @@
-.long-title h3 {
+.long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
 
 .export-options {
diff --git a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/description.md b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/description.md
index 3768297866d6..b266f4fd4747 100644
--- a/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/description.md
+++ b/apps/demos/Demos/PivotGrid/IntegratedFieldChooser/description.md
@@ -1,11 +1,11 @@
 The field chooser allows users to manage pivot grid fields. You can configure the field chooser integrated into the PivotGrid or [use it as a standalone component](https://js.devexpress.com/Demos/WidgetsGallery/Demo/PivotGrid/StandaloneFieldChooser/). This example demonstrates the integrated field chooser. To open the field chooser window, click the icon in the top-left corner or right-click a row or column header and select Show Field Chooser from the context menu.
 <!--split-->
 
-### Enable the Integrated Field Chooser
+## Enable the Integrated Field Chooser
 
 The integrated field chooser is configured in the [fieldChooser](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldChooser/) object. To enable the field chooser, set the object's [enabled](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldChooser/#enabled) property to **true**. This setting adds the Field Chooser icon to the PivotGrid and the Show Field Chooser command to the context menu.
 
-### Organize Fields
+## Organize Fields
 
 The field chooser window displays five field sections:
 
@@ -25,6 +25,6 @@ Users can drag and drop fields between the sections. When users move a field to
 
 After a user finishes moving fields between sections, the changes can either be applied immediately or after the user clicks OK. Use the **fieldChooser**.[applyChangesMode](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldChooser/#applyChangesMode) property to set the desired mode. In this demo, you can change this property at runtime.
 
-### Enable Search
+## Enable Search
 
 Users can search in the All Fields section if you enable the **fieldChooser**.[allowSearch](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldChooser/#allowSearch) property as shown in this demo. In addition, you can specify the [searchTimeout](/Documentation/ApiReference/UI_Components/dxPivotGrid/Configuration/fieldChooser/#searchTimeout) property to delay the search.
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css
index 425a7c194104..0007f19048d2 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css
@@ -1,7 +1,7 @@
-::ng-deep .long-title h3 {
+::ng-deep .long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.html b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.html
index 088debaacd72..dabfe3075314 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.html
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.html
@@ -1,5 +1,5 @@
 <div class="long-title">
-  <h3>Sales Statistics</h3>
+  <h2>Sales Statistics</h2>
 </div>
 <dx-pivot-grid
   [allowSorting]="true"
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx
index 858ddb2c27d4..4483867dcc1b 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx
@@ -14,7 +14,7 @@ import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <PivotGrid
       dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css
index 7f4bc0fd737d..5e5c1d34e9e0 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,5 +9,5 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js
index 518aafe5bee5..244126900a43 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js
@@ -12,7 +12,7 @@ import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <PivotGrid
       dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css
index 7f4bc0fd737d..5e5c1d34e9e0 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,5 +9,5 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue
index bcd6b07fc607..7e4bc8f9c2c2 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <DxPivotGrid
       :allow-sorting="true"
@@ -53,7 +53,7 @@ const dataSource = new PivotGridDataSource({
 });
 </script>
 <style scoped>
-.long-title h3 {
+.long-title h2 {
   font-family:
     "Segoe UI Light",
     "Helvetica Neue Light",
@@ -64,6 +64,6 @@ const dataSource = new PivotGridDataSource({
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
 </style>
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/index.html b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/index.html
index 579dd9de6a9e..31da4d9483b4 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/index.html
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/index.html
@@ -13,7 +13,7 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div class="long-title"><h3>Sales Statistics</h3></div>
+      <div class="long-title"><h2>Sales Statistics</h2></div>
       <div id="sales"></div>
     </div>
   </body>
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css
index 76a9a652082b..ef9487a57c66 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css
@@ -1,7 +1,7 @@
-.long-title h3 {
+.long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css
index 5581ad0e6f2f..89d50051fff3 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css
@@ -2,10 +2,10 @@
   margin-top: 80px;
 }
 
-::ng-deep .long-title h3 {
+::ng-deep .long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.html b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.html
index 768e4d9ba7da..b053c0c8cea4 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.html
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.html
@@ -1,4 +1,4 @@
-<div class="long-title"><h3>Sales Amount by Region</h3></div>
+<div class="long-title"><h2>Sales Amount by Region</h2></div>
 <dx-pivot-grid
   id="sales"
   [allowSortingBySummary]="true"
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx b/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx
index b794c84a6634..e6d497d4e457 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx
@@ -9,7 +9,7 @@ import type { Sale } from './data.ts';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Amount by Region</h3>
+      <h2>Sales Amount by Region</h2>
     </div>
     <PivotGrid
       id="sales"
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css b/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css
index 20e1c814e6c0..9623edb807a7 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css
@@ -2,7 +2,7 @@
   margin-top: 80px;
 }
 
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -13,5 +13,5 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js
index a36fc6e7e654..e55283ea15dc 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/App.js
@@ -6,7 +6,7 @@ import { sales } from './data.js';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Amount by Region</h3>
+      <h2>Sales Amount by Region</h2>
     </div>
     <PivotGrid
       id="sales"
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css
index 20e1c814e6c0..9623edb807a7 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css
@@ -2,7 +2,7 @@
   margin-top: 80px;
 }
 
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -13,5 +13,5 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue b/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue
index c25f004047e1..c5830f24d696 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="long-title">
-      <h3>Sales Amount by Region</h3>
+      <h2>Sales Amount by Region</h2>
     </div>
     <DxPivotGrid
       id="sales"
@@ -63,7 +63,7 @@ const dataSource = new PivotGridDataSource({
   margin-top: 80px;
 }
 
-.long-title h3 {
+.long-title h2 {
   font-family:
     "Segoe UI Light",
     "Helvetica Neue Light",
@@ -74,6 +74,6 @@ const dataSource = new PivotGridDataSource({
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
 </style>
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/index.html b/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/index.html
index 69520b151be2..c2c73cb71f60 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/index.html
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/index.html
@@ -14,7 +14,7 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div class="long-title"><h3>Sales Amount by Region</h3></div>
+      <div class="long-title"><h2>Sales Amount by Region</h2></div>
       <div id="sales"></div>
     </div>
   </body>
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css b/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css
index c60b2b50aeff..d0b41e43de72 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css
@@ -2,10 +2,10 @@
   margin-top: 80px;
 }
 
-.long-title h3 {
+.long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/WebAPIService/description.md b/apps/demos/Demos/PivotGrid/WebAPIService/description.md
index 1aa071a42acb..b552c3f64c54 100644
--- a/apps/demos/Demos/PivotGrid/WebAPIService/description.md
+++ b/apps/demos/Demos/PivotGrid/WebAPIService/description.md
@@ -5,7 +5,7 @@ To configure access to a Web API service from the client, use the <a href="https
 You should also set the [remoteOperations](/Documentation/ApiReference/Data_Layer/PivotGridDataSource/Configuration/#remoteOperations) property to **true** to notify the PivotGrid that data is aggregated on the server.
 <!--split-->
 
-### A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core
+## A 1-Click Solution for CRUD Web API Services with Role-based Access Control via EF Core
 
 If you target .NET for your backend API, be sure to check out [Web API Service](https://docs.devexpress.com/eXpressAppFramework/403394/backend-web-api-service?utm_source=js.devexpress.com&utm_medium=referral&utm_campaign=xaf&utm_content=data-layer-odatastore) and register your [free copy today](https://www.devexpress.com/security-api-free?utm_source=js.devexpress.com&utm_medium=referral&utm_campaign=xaf&utm_content=data-layer-odatastore). The Template Kit scaffolds an OData v4 Web API Service (.NET 8+) with integrated authorization & CRUD operations powered by EF Core ORM. You can use OAuth2, JWT or custom authentication strategies alongside tools like Postman or Swagger (OpenAPI) for API testing.
 The built-in Web API Service also filters out secured server data based on permissions granted to users. Advanced/enterprise functions include audit trail, endpoints to download reports, file attachments, check validation, obtain localized captions, etc.

From d88f4958b627244c029df8a08411cbfd1283e8ba Mon Sep 17 00:00:00 2001
From: Aleksey Semikozov <aleksei.semikozov@devexpress.com>
Date: Thu, 16 Jul 2026 14:04:24 -0300
Subject: [PATCH 2/3] PivotGrid: fix heading-order a11y issue in OLAPDataSource
 demo

---
 .../PivotGrid/OLAPDataSource/Angular/app/app.component.css  | 4 ++--
 .../PivotGrid/OLAPDataSource/Angular/app/app.component.html | 2 +-
 apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx     | 2 +-
 apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css  | 4 ++--
 apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js    | 2 +-
 .../demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css | 4 ++--
 apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue       | 6 +++---
 apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/index.html | 2 +-
 apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css | 4 ++--
 9 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css
index 425a7c194104..0007f19048d2 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css
@@ -1,7 +1,7 @@
-::ng-deep .long-title h3 {
+::ng-deep .long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.html b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.html
index cb92785d38ed..7170fdacd315 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.html
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.html
@@ -1,5 +1,5 @@
 <div class="long-title">
-  <h3>Sales Statistics</h3>
+  <h2>Sales Statistics</h2>
 </div>
 <dx-pivot-grid
   [allowSortingBySummary]="true"
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx
index 0e9626f81eb0..3ff95b4ebc2e 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx
@@ -10,7 +10,7 @@ import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <PivotGrid
       dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css
index 7f4bc0fd737d..5e5c1d34e9e0 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,5 +9,5 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js
index e60324d41a8e..2a9604515db2 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js
@@ -6,7 +6,7 @@ import XmlaStore from 'devextreme/ui/pivot_grid/xmla_store';
 const App = () => (
   <>
     <div className="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <PivotGrid
       dataSource={dataSource}
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css
index 7f4bc0fd737d..5e5c1d34e9e0 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css
@@ -1,4 +1,4 @@
-.long-title h3 {
+.long-title h2 {
   font-family:
     'Segoe UI Light',
     'Helvetica Neue Light',
@@ -9,5 +9,5 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue b/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue
index 28f5dab91e64..d1da19d48375 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="long-title">
-      <h3>Sales Statistics</h3>
+      <h2>Sales Statistics</h2>
     </div>
     <DxPivotGrid
       :allow-sorting-by-summary="true"
@@ -50,7 +50,7 @@ const dataSource = new PivotGridDataSource({
 });
 </script>
 <style scoped>
-.long-title h3 {
+.long-title h2 {
   font-family:
     "Segoe UI Light",
     "Helvetica Neue Light",
@@ -61,6 +61,6 @@ const dataSource = new PivotGridDataSource({
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }
 </style>
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/index.html b/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/index.html
index 579dd9de6a9e..31da4d9483b4 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/index.html
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/index.html
@@ -13,7 +13,7 @@
   </head>
   <body class="dx-viewport">
     <div class="demo-container">
-      <div class="long-title"><h3>Sales Statistics</h3></div>
+      <div class="long-title"><h2>Sales Statistics</h2></div>
       <div id="sales"></div>
     </div>
   </body>
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css
index 76a9a652082b..ef9487a57c66 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css
@@ -1,7 +1,7 @@
-.long-title h3 {
+.long-title h2 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;
   text-align: center;
-  margin-bottom: 20px;
+  margin: 28px 0 20px;
 }

From 28e8e70d8115112f49a30f1e6ac6e0621dae67dd Mon Sep 17 00:00:00 2001
From: Aleksey Semikozov <aleksei.semikozov@devexpress.com>
Date: Fri, 17 Jul 2026 07:33:19 -0300
Subject: [PATCH 3/3] PivotGrid: pin demo title letter-spacing to keep Material
 rendering intact

---
 .../ExcelJsHeaderAndFooter/Angular/app/app.component.css         | 1 +
 .../Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css      | 1 +
 .../Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css    | 1 +
 apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue    | 1 +
 .../Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css     | 1 +
 .../Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css | 1 +
 apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css       | 1 +
 apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css     | 1 +
 apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue            | 1 +
 apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css      | 1 +
 .../RemoteVirtualScrolling/Angular/app/app.component.css         | 1 +
 .../Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css      | 1 +
 .../Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css    | 1 +
 apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue    | 1 +
 .../Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css     | 1 +
 .../Demos/PivotGrid/SimpleArray/Angular/app/app.component.css    | 1 +
 apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css          | 1 +
 apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css        | 1 +
 apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue               | 1 +
 apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css         | 1 +
 20 files changed, 20 insertions(+)

diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
index de5748dddaed..5cad027332c0 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
@@ -3,6 +3,7 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
 
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
index 7fae97ef913d..a5e7eca56222 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
@@ -9,6 +9,7 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
 
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
index 7fae97ef913d..a5e7eca56222 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
@@ -9,6 +9,7 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
 
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
index 9f73a497ee7e..cef25f8ce30b 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
@@ -177,6 +177,7 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
 
diff --git a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
index 9ea5dc864a6d..d790e0752f28 100644
--- a/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
@@ -3,6 +3,7 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
 
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css
index 0007f19048d2..8ed8ed08d99a 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css
@@ -3,5 +3,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css
index 5e5c1d34e9e0..3f9497f90861 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css
@@ -9,5 +9,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css
index 5e5c1d34e9e0..3f9497f90861 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css
@@ -9,5 +9,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue b/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue
index d1da19d48375..15864abcb7ac 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue
@@ -61,6 +61,7 @@ const dataSource = new PivotGridDataSource({
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
 </style>
diff --git a/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css b/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css
index ef9487a57c66..a70c8010e608 100644
--- a/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css
@@ -3,5 +3,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css
index 0007f19048d2..8ed8ed08d99a 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css
@@ -3,5 +3,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css
index 5e5c1d34e9e0..3f9497f90861 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css
@@ -9,5 +9,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css
index 5e5c1d34e9e0..3f9497f90861 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css
@@ -9,5 +9,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue
index 7e4bc8f9c2c2..edf6225edfce 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue
@@ -64,6 +64,7 @@ const dataSource = new PivotGridDataSource({
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
 </style>
diff --git a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css
index ef9487a57c66..a70c8010e608 100644
--- a/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css
@@ -3,5 +3,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css
index 89d50051fff3..37a814ed9c07 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css
@@ -7,5 +7,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css b/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css
index 9623edb807a7..ca894395617c 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/React/styles.css
@@ -13,5 +13,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css
index 9623edb807a7..ca894395617c 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/ReactJs/styles.css
@@ -13,5 +13,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue b/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue
index c5830f24d696..dfd6acadace2 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/Vue/App.vue
@@ -74,6 +74,7 @@ const dataSource = new PivotGridDataSource({
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }
 </style>
diff --git a/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css b/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css
index d0b41e43de72..6deb4e731fb8 100644
--- a/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css
+++ b/apps/demos/Demos/PivotGrid/SimpleArray/jQuery/styles.css
@@ -7,5 +7,6 @@
   font-weight: 200;
   font-size: 28px;
   text-align: center;
+  letter-spacing: normal;
   margin: 28px 0 20px;
 }