Skip to content

PivotGrid Demos: Fix 'heading-order' accessibility violations #34357

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aleksei-semikozov merged 3 commits into from
Jul 21, 2026
Merged

PivotGrid Demos: Fix 'heading-order' accessibility violations #34357

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
28e3927
PivotGrid: fix heading-order a11y issues in demos
Jul 16, 2026
d88f495
PivotGrid: fix heading-order a11y issue in OLAPDataSource demo
Jul 16, 2026
28e8e70
PivotGrid: pin demo title letter-spacing to keep Material rendering i…
Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
::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;
letter-spacing: normal;
margin: 28px 0 20px;
}

::ng-deep .export-options {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Angular/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.long-title h3 {
.long-title h2 {
font-family:
'Segoe UI Light',
'Helvetica Neue Light',
Expand All @@ -9,7 +9,8 @@
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
letter-spacing: normal;
margin: 28px 0 20px;
}

.export-options {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.long-title h3 {
.long-title h2 {
font-family:
'Segoe UI Light',
'Helvetica Neue Light',
Expand All @@ -9,7 +9,8 @@
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
letter-spacing: normal;
margin: 28px 0 20px;
}

.export-options {
Expand Down
7 changes: 4 additions & 3 deletions apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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",
Expand All @@ -177,7 +177,8 @@ function onExporting(e: DxPivotGridTypes.ExportingEvent) {
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
letter-spacing: normal;
margin: 28px 0 20px;
}

.export-options {
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/ExcelJsHeaderAndFooter/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
.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;
letter-spacing: normal;
margin: 28px 0 20px;
}

.export-options {
Expand Down
6 changes: 3 additions & 3 deletions apps/demos/Demos/PivotGrid/IntegratedFieldChooser/description.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:

Expand All @@ -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.
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
::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;
letter-spacing: normal;
margin: 28px 0 20px;
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/OLAPDataSource/Angular/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="long-title">
<h3>Sales Statistics</h3>
<h2>Sales Statistics</h2>
</div>
<dx-pivot-grid
[allowSortingBySummary]="true"
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/OLAPDataSource/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/OLAPDataSource/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.long-title h3 {
.long-title h2 {
font-family:
'Segoe UI Light',
'Helvetica Neue Light',
Expand All @@ -9,5 +9,6 @@
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
letter-spacing: normal;
margin: 28px 0 20px;
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/OLAPDataSource/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.long-title h3 {
.long-title h2 {
font-family:
'Segoe UI Light',
'Helvetica Neue Light',
Expand All @@ -9,5 +9,6 @@
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
letter-spacing: normal;
margin: 28px 0 20px;
}
7 changes: 4 additions & 3 deletions apps/demos/Demos/PivotGrid/OLAPDataSource/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down Expand Up @@ -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",
Expand All @@ -61,6 +61,7 @@ const dataSource = new PivotGridDataSource({
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
letter-spacing: normal;
margin: 28px 0 20px;
}
</style>
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/OLAPDataSource/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.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;
letter-spacing: normal;
margin: 28px 0 20px;
}
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
::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;
letter-spacing: normal;
margin: 28px 0 20px;
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Angular/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="long-title">
<h3>Sales Statistics</h3>
<h2>Sales Statistics</h2>
</div>
<dx-pivot-grid
[allowSorting]="true"
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/React/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.long-title h3 {
.long-title h2 {
font-family:
'Segoe UI Light',
'Helvetica Neue Light',
Expand All @@ -9,5 +9,6 @@
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
letter-spacing: normal;
margin: 28px 0 20px;
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/ReactJs/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.long-title h3 {
.long-title h2 {
font-family:
'Segoe UI Light',
'Helvetica Neue Light',
Expand All @@ -9,5 +9,6 @@
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
letter-spacing: normal;
margin: 28px 0 20px;
}
7 changes: 4 additions & 3 deletions apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/Vue/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<div class="long-title">
<h3>Sales Statistics</h3>
<h2>Sales Statistics</h2>
</div>
<DxPivotGrid
:allow-sorting="true"
Expand Down Expand Up @@ -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",
Expand All @@ -64,6 +64,7 @@ const dataSource = new PivotGridDataSource({
font-weight: 200;
font-size: 28px;
text-align: center;
margin-bottom: 20px;
letter-spacing: normal;
margin: 28px 0 20px;
}
</style>
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/RemoteVirtualScrolling/jQuery/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.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;
letter-spacing: normal;
margin: 28px 0 20px;
}
5 changes: 3 additions & 2 deletions apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@
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;
letter-spacing: normal;
margin: 28px 0 20px;
}
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/SimpleArray/Angular/app/app.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand Down
2 changes: 1 addition & 1 deletion apps/demos/Demos/PivotGrid/SimpleArray/React/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
Loading
Loading