Merge branch '26_1' into gulp/remove-gulp-from-app-demos

Author: GoodDayForSurf

e2e/testcafe-devextreme/tests/common/pivotGrid/kbn/fieldChooser.ts

@@ -37,3 +37,46 @@ const PIVOT_GRID_SELECTOR = '#container';
     fieldPanel: fieldPanelOptions,
   }, PIVOT_GRID_SELECTOR));
 });
+
+test('Field chooser button should have correct aria attributes', async (t) => {
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+
+  await t
+    .expect(pivotGrid.getFieldChooserButton().getAttribute('aria-haspopup'))
+    .eql('dialog');
+
+  await t
+    .expect(pivotGrid.getFieldChooserButton().getAttribute('aria-label'))
+    .eql('Show Field Chooser');
+}).before(async () => createWidget('dxPivotGrid', {
+  allowFiltering: true,
+  showBorders: true,
+  height: 470,
+  fieldChooser: {
+    enabled: true,
+  },
+}, PIVOT_GRID_SELECTOR));
+
+test('Field chooser button should be focused after field chooser popup is closed', async (t) => {
+  const pivotGrid = new PivotGrid(PIVOT_GRID_SELECTOR);
+
+  await t
+    .pressKey('tab')
+    .pressKey('enter')
+    .expect(pivotGrid.getFieldChooserPopup().isVisible())
+    .ok();
+
+  await t
+    .pressKey('esc')
+    .expect(pivotGrid.getFieldChooserPopup().isVisible())
+    .notOk()
+    .expect(pivotGrid.getFieldChooserButton().focused)
+    .ok();
+}).before(async () => createWidget('dxPivotGrid', {
+  allowFiltering: true,
+  showBorders: true,
+  height: 470,
+  fieldChooser: {
+    enabled: true,
+  },
+}, PIVOT_GRID_SELECTOR));

packages/devextreme/js/__internal/grids/pivot_grid/m_widget.ts

@@ -4,6 +4,7 @@ import { addNamespace } from '@js/common/core/events/utils/index';
 import localizationMessage from '@js/common/core/localization/message';
 import registerComponent from '@js/core/component_registrator';
 import { getPublicElement } from '@js/core/element';
+import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { deferRender, deferUpdate, noop } from '@js/core/utils/common';
 import { Deferred, when } from '@js/core/utils/deferred';
@@ -161,6 +162,8 @@ class PivotGrid extends Widget {
 
   _createActionByOption: any;
 
+  $fieldChooserButton?: dxElementWrapper;
+
   _getDefaultOptions() {
     return extend(super._getDefaultOptions(), {
 
@@ -644,6 +647,10 @@ class PivotGrid extends Widget {
         const fieldChooser = e.component.$content().dxPivotGridFieldChooser('instance');
         fieldChooser.resetTreeView();
         fieldChooser.cancelChanges();
+
+        if (that.$fieldChooserButton) {
+          (that.$fieldChooserButton.get(0) as HTMLElement).focus();
+        }
       },
     };
 
@@ -981,20 +988,24 @@ class PivotGrid extends Widget {
     $toolbarContainer.prependTo($targetContainer);
 
     if (this.option('fieldChooser.enabled')) {
-      const $buttonElement = $(DIV)
+      this.$fieldChooserButton = $(DIV)
         .appendTo($toolbarContainer)
         .addClass('dx-pivotgrid-field-chooser-button');
       const buttonOptions: Properties = {
         icon: 'columnchooser',
         // @ts-expect-error ts-error
         hint: this.option('texts.showFieldChooser'),
+        elementAttr: {
+          'aria-label': this.option('texts.showFieldChooser'),
+          'aria-haspopup': 'dialog',
+        },
         stylingMode: buttonStylingMode,
         onClick: () => {
           this.getFieldChooserPopup().show();
         },
       };
 
-      this._createComponent($buttonElement, Button, buttonOptions);
+      this._createComponent(this.$fieldChooserButton, Button, buttonOptions);
     }
 
     if (this.option('export.enabled')) {

pnpm-lock.yaml

@@ -52,7 +52,7 @@ catalog:
   "@eslint/js": 9.39.4
   eslint: 9.39.4
   eslint-config-airbnb-typescript: 18.0.0
-  eslint-config-devextreme: 1.1.10
+  eslint-config-devextreme: 1.1.11
   eslint-plugin-i18n: 2.4.0
   eslint-plugin-import: 2.32.0
   eslint-plugin-jsx-a11y: 6.10.2
@@ -112,3 +112,7 @@ allowBuilds:
   nx: true
   puppeteer: true
   unrs-resolver: true
+
+minimumReleaseAgeExclude:
+  - "eslint-config-devextreme"
+