Scheduler a11y: remove tables from a11y tree (#28343)

Author: pomahtri

apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (fluent.blue.light).png

@@ -27,3 +27,21 @@ test('Scheduler should have right aria attributes', async (t) => {
     currentView: 'month',
   });
 });
+
+test('Scheduler table elements have right aria attributes', async (t) => {
+  const scheduler = new Scheduler('#container');
+
+  const tables = scheduler.element.find('table');
+  await t.expect(tables.count).eql(4);
+
+  for (let i = 0; i < await tables.count; i += 1) {
+    await t.expect(
+      tables.nth(i).getAttribute('aria-hidden'),
+    ).eql('true');
+  }
+}).before(async () => {
+  await createWidget('dxScheduler', {
+    dataSource: [],
+    currentView: 'month',
+  });
+});

apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click (material.blue.light).png

@@ -62,6 +62,7 @@ export class Table extends BaseInfernoComponent<TableProps> {
         ref={tableRef}
         className={className}
         style={normalizeStyles(resultStyles)}
+        aria-hidden
       >
         <tbody>
         {

apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_cell_click.png

@@ -139,16 +139,16 @@ class SchedulerAgenda extends WorkSpace {
 
   _initWorkSpaceUnits() {
     this._initGroupTable();
-    this._$timePanel = $('<table>').addClass(TIME_PANEL_CLASS);
-    this._$dateTable = $('<table>').addClass(DATE_TABLE_CLASS);
+    this._$timePanel = $('<table>').attr('aria-hidden', true).addClass(TIME_PANEL_CLASS);
+    this._$dateTable = $('<table>').attr('aria-hidden', true).addClass(DATE_TABLE_CLASS);
     this._$dateTableScrollableContent = $('<div>').addClass('dx-scheduler-date-table-scrollable-content');
     this._$dateTableContainer = $('<div>').addClass('dx-scheduler-date-table-container');
   }
 
   _initGroupTable() {
     const groups = this.option('groups');
     if (groups && groups.length) {
-      this._$groupTable = $('<table>').addClass(GROUP_TABLE_CLASS);
+      this._$groupTable = $('<table>').attr('aria-hidden', true).addClass(GROUP_TABLE_CLASS);
     }
   }
 

apps/demos/testing/widgets/scheduler/etalons/scheduler_contextMenu_header_click (fluent.blue.light).png

@@ -526,7 +526,7 @@ class SchedulerWorkSpace extends WidgetObserver {
   }
 
   _focusInHandler(e) {
-    if ($(e.target).is(this._focusTarget() as any) && this._isCellClick !== false) {
+    if ($(e.target).is(this._focusTarget() as any) && this._isCellClick) {
       delete this._isCellClick;
       delete this._contextMenuHandled;
       // @ts-expect-error
@@ -2536,10 +2536,10 @@ class SchedulerWorkSpace extends WidgetObserver {
   _initWorkSpaceUnits() {
     this._$headerPanelContainer = $('<div>').addClass('dx-scheduler-header-panel-container');
     this._$headerTablesContainer = $('<div>').addClass('dx-scheduler-header-tables-container');
-    this._$headerPanel = $('<table>');
+    this._$headerPanel = $('<table>').attr('aria-hidden', true);
     this._$thead = $('<thead>').appendTo(this._$headerPanel);
     this._$headerPanelEmptyCell = $('<div>').addClass('dx-scheduler-header-panel-empty-cell');
-    this._$allDayTable = $('<table>');
+    this._$allDayTable = $('<table>').attr('aria-hidden', true);
 
     this._$fixedContainer = $('<div>').addClass(FIXED_CONTAINER_CLASS);
     this._$allDayContainer = $('<div>').addClass(ALL_DAY_CONTAINER_CLASS);
@@ -2554,8 +2554,8 @@ class SchedulerWorkSpace extends WidgetObserver {
       this._createAllDayPanelElements();
     }
 
-    this._$timePanel = $('<table>').addClass(TIME_PANEL_CLASS);
-    this._$dateTable = $('<table>');
+    this._$timePanel = $('<table>').addClass(TIME_PANEL_CLASS).attr('aria-hidden', true);
+    this._$dateTable = $('<table>').attr('aria-hidden', true);
     this._$dateTableContainer = $('<div>').addClass('dx-scheduler-date-table-container');
     this._$groupTable = $('<div>').addClass(WORKSPACE_VERTICAL_GROUP_TABLE_CLASS);
   }
@@ -2918,7 +2918,7 @@ class SchedulerWorkSpace extends WidgetObserver {
 
         this._allDayTitles.push($allDayTitle);
 
-        this._$allDayTable = $('<table>');
+        this._$allDayTable = $('<table>').attr('aria-hidden', true);
         this._allDayTables.push(this._$allDayTable);
 
         this._$allDayPanel = $('<div>')
@@ -2933,7 +2933,7 @@ class SchedulerWorkSpace extends WidgetObserver {
         .text(messageLocalization.format('dxScheduler-allDay'))
         .appendTo(this.$element());
 
-      this._$allDayTable = $('<table>');
+      this._$allDayTable = $('<table>').attr('aria-hidden', true);
 
       this._$allDayPanel = $('<div>')
         .addClass(ALL_DAY_PANEL_CLASS)