Skip to content

Commit 690ff5a

Browse files
marker-daomarker dao ®
marker-dao
and
marker dao ®
authored
HtmlEditor: Improve aria-attributes support in AIDialog and ai toolbar item (DevExpress#29833)
Co-authored-by: marker dao ® <[email protected]>
1 parent 8ec6312 commit 690ff5a

File tree

35 files changed

+128
-10
lines changed

35 files changed

+128
-10
lines changed

‎packages/devextreme/js/__internal/ui/html_editor/modules/m_toolbar.ts‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,12 @@ import {
1515
isDefined, isEmptyObject, isObject, isString,
1616
} from '@js/core/utils/type';
1717
import type { AICommandName, AICustomCommand, AIToolbarItem } from '@js/ui/html_editor';
18+
import type { ContentReadyEvent, ItemClickEvent } from '@js/ui/menu';
1819
import type { Item } from '@js/ui/toolbar';
1920
import Toolbar from '@js/ui/toolbar';
2021
import errors from '@js/ui/widget/ui.errors';
2122
import { capitalize } from '@ts/core/utils/capitalize';
23+
import { DX_MENU_ITEM_CLASS } from '@ts/ui/menu/m_menu';
2224
import Quill from 'devextreme-quill';
2325

2426
import type { CommandsMap } from '../utils/ai';
@@ -481,10 +483,15 @@ if (Quill) {
481483

482484
const options = {
483485
dataSource,
484-
onItemClick: (e): void => {
486+
disabled: isMenuDisabled,
487+
onContentReady: (e: ContentReadyEvent): void => {
488+
const $item = $(e.element).find(`.${DX_MENU_ITEM_CLASS}`).first();
489+
$item.attr('aria-label', localizationMessage.format('dxHtmlEditor-aiToolbarItemAriaLabel'));
490+
},
491+
onItemClick: (e: ItemClickEvent): void => {
485492
const { itemData } = e;
486493

487-
if (itemData.items?.length) {
494+
if (!itemData || itemData.items?.length) {
488495
return;
489496
}
490497

@@ -497,7 +504,6 @@ if (Quill) {
497504

498505
this._formatHandlers[name](aiDialogOptions);
499506
},
500-
disabled: isMenuDisabled,
501507
};
502508

503509
return extend(true, {

‎packages/devextreme/js/__internal/ui/html_editor/ui/aiDialog.ts‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import '@js/ui/drop_down_button';
22

33
import type { AIIntegration, RequestCallbacks } from '@js/common/ai-integration';
44
import localizationMessage from '@js/common/core/localization/message';
5+
import Guid from '@js/core/guid';
56
import type { dxElementWrapper } from '@js/core/renderer';
67
import $ from '@js/core/renderer';
78
import { extend } from '@js/core/utils/extend';
@@ -39,9 +40,9 @@ import BaseDialog from './m_baseDialog';
3940
export const AI_DIALOG_CLASS = 'dx-aidialog';
4041
export const AI_DIALOG_CONTROLS_CLASS = 'dx-aidialog-controls';
4142
export const AI_DIALOG_CONTENT_CLASS = 'dx-aidialog-content';
43+
export const AI_DIALOG_TITLE_CLASS = 'dx-aidialog-title';
4244

4345
const AI_DIALOG_LOAD_INDICATOR_CLASS = 'dx-pending-indicator';
44-
const AI_DIALOG_TITLE_CLASS = 'dx-aidialog-title';
4546
const AI_DIALOG_TITLE_TEXT_CLASS = 'dx-aidialog-title-text';
4647
const ICON_CLASS = 'dx-icon';
4748
const ICON_SPARKLE_CLASS = 'dx-icon-sparkle';
@@ -53,6 +54,7 @@ const AI_DIALOG_COMMANDS_WITH_OPTIONS = ['translate', 'changeStyle', 'changeTone
5354
const POPUP_MIN_WIDTH = 288;
5455
const POPUP_MAX_WIDTH = 460;
5556
const LOADINDICATOR_SIZE = 48;
57+
5658
export const TEXT_AREA_MIN_HEIGHT = 64;
5759
export const TEXT_AREA_MAX_HEIGHT = 128;
5860
export const REPLACE_DROPDOWN_WIDTH = 150;
@@ -244,6 +246,7 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
244246
};
245247

246248
const options = {
249+
inputAttr: { 'aria-label': localizationMessage.format('dxHtmlEditor-aiResultTextAreaAriaLabel') },
247250
minHeight: TEXT_AREA_MIN_HEIGHT,
248251
width: '100%',
249252
readOnly: true,
@@ -335,6 +338,7 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
335338
widget: 'dxDropDownButton',
336339
locateInMenu: 'auto',
337340
options: {
341+
displayExpr: 'text',
338342
text: localizationMessage.format('dxHtmlEditor-aiReplace'),
339343
stylingMode: 'contained',
340344
type: 'default',
@@ -480,6 +484,7 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
480484
this._refreshToolbarItems();
481485
this._refreshLoadIndicator();
482486
this._refreshInformer();
487+
this._refreshDialogAria();
483488
}
484489

485490
private _refreshToolbarItems(): void {
@@ -719,6 +724,15 @@ export default class AIDialog extends BaseDialog<AIDialogResult> {
719724
return visible as boolean;
720725
}
721726

727+
private _refreshDialogAria(): void {
728+
const id = String(new Guid());
729+
const $overlayContent = $(this._popup.content()).parent();
730+
const $title = $overlayContent.find(`.${AI_DIALOG_TITLE_CLASS}`);
731+
732+
$title.attr('id', id);
733+
$overlayContent.attr('aria-labelledby', id);
734+
}
735+
722736
updateAIIntegration(aiIntegration: AIIntegration): void {
723737
this._abort?.();
724738
this._processCommandCompletion(this._getInitialDialogState());

‎packages/devextreme/js/__internal/ui/menu/m_menu.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import Submenu from './m_submenu';
2626
const DX_MENU_CLASS = 'dx-menu';
2727
const DX_MENU_VERTICAL_CLASS = `${DX_MENU_CLASS}-vertical`;
2828
const DX_MENU_HORIZONTAL_CLASS = `${DX_MENU_CLASS}-horizontal`;
29-
const DX_MENU_ITEM_CLASS = `${DX_MENU_CLASS}-item`;
29+
export const DX_MENU_ITEM_CLASS = `${DX_MENU_CLASS}-item`;
3030
const DX_MENU_ITEMS_CONTAINER_CLASS = `${DX_MENU_CLASS}-items-container`;
3131
const DX_MENU_ITEM_EXPANDED_CLASS = `${DX_MENU_ITEM_CLASS}-expanded`;
3232
const DX_CONTEXT_MENU_CLASS = 'dx-context-menu';
@@ -331,7 +331,7 @@ class Menu extends MenuBase {
331331
}
332332

333333
_toggleHamburgerActiveState(state) {
334-
this._hamburger && this._hamburger.$element().toggleClass(DX_STATE_ACTIVE_CLASS, state);
334+
this._hamburger?.$element().toggleClass(DX_STATE_ACTIVE_CLASS, state);
335335
}
336336

337337
_toggleAdaptiveMode(state: boolean): void {
@@ -611,7 +611,7 @@ class Menu extends MenuBase {
611611

612612
each(this._submenus, (index, submenu) => {
613613
const $submenu = submenu._itemContainer();
614-
const isOtherItem = !$submenu.is(targetSubmenu && targetSubmenu._itemContainer());
614+
const isOtherItem = !$submenu.is(targetSubmenu?._itemContainer());
615615
const $selectedItem = $submenu.find(`.${this._selectedItemClass()}`);
616616

617617
if ((isOtherItem && $selectedItem.length) || cleanAllSubmenus) {
@@ -913,7 +913,7 @@ class Menu extends MenuBase {
913913

914914
_itemMouseMoveHandler(e) {
915915
// todo: replace mousemove with hover event
916-
if (e.pointers && e.pointers.length) {
916+
if (e.pointers?.length) {
917917
return;
918918
}
919919

‎packages/devextreme/js/localization/messages/ar.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,8 @@
542542
"dxHtmlEditor-aiTryAgain": "Try again",
543543
"dxHtmlEditor-aiGenerate": "Generate",
544544
"dxHtmlEditor-aiStop": "Stop",
545+
"dxHtmlEditor-aiToolbarItemAriaLabel": "AI Assistant toolbar item",
546+
"dxHtmlEditor-aiResultTextAreaAriaLabel": "AI Assistant result",
545547
"dxHtmlEditor-aiAskPlaceholder": "Ask AI to modify text",
546548

547549
"dxFileManager-newDirectoryName": "دليل بدون عنوان",

‎packages/devextreme/js/localization/messages/bg.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,8 @@
542542
"dxHtmlEditor-aiTryAgain": "Try again",
543543
"dxHtmlEditor-aiGenerate": "Generate",
544544
"dxHtmlEditor-aiStop": "Stop",
545+
"dxHtmlEditor-aiToolbarItemAriaLabel": "AI Assistant toolbar item",
546+
"dxHtmlEditor-aiResultTextAreaAriaLabel": "AI Assistant result",
545547
"dxHtmlEditor-aiAskPlaceholder": "Ask AI to modify text",
546548

547549
"dxFileManager-newDirectoryName": "Untitled directory",

‎packages/devextreme/js/localization/messages/ca.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,8 @@
542542
"dxHtmlEditor-aiTryAgain": "Try again",
543543
"dxHtmlEditor-aiGenerate": "Generate",
544544
"dxHtmlEditor-aiStop": "Stop",
545+
"dxHtmlEditor-aiToolbarItemAriaLabel": "AI Assistant toolbar item",
546+
"dxHtmlEditor-aiResultTextAreaAriaLabel": "AI Assistant result",
545547
"dxHtmlEditor-aiAskPlaceholder": "Ask AI to modify text",
546548

547549
"dxFileManager-newDirectoryName": "Directori sense títol",

‎packages/devextreme/js/localization/messages/cs.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,8 @@
542542
"dxHtmlEditor-aiTryAgain": "Try again",
543543
"dxHtmlEditor-aiGenerate": "Generate",
544544
"dxHtmlEditor-aiStop": "Stop",
545+
"dxHtmlEditor-aiToolbarItemAriaLabel": "AI Assistant toolbar item",
546+
"dxHtmlEditor-aiResultTextAreaAriaLabel": "AI Assistant result",
545547
"dxHtmlEditor-aiAskPlaceholder": "Ask AI to modify text",
546548

547549
"dxFileManager-newDirectoryName": "Nepojmenovaná složka",

‎packages/devextreme/js/localization/messages/da.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,8 @@
542542
"dxHtmlEditor-aiTryAgain": "Try again",
543543
"dxHtmlEditor-aiGenerate": "Generate",
544544
"dxHtmlEditor-aiStop": "Stop",
545+
"dxHtmlEditor-aiToolbarItemAriaLabel": "AI Assistant toolbar item",
546+
"dxHtmlEditor-aiResultTextAreaAriaLabel": "AI Assistant result",
545547
"dxHtmlEditor-aiAskPlaceholder": "Ask AI to modify text",
546548

547549
"dxFileManager-newDirectoryName": "Unavngivet mappe",

‎packages/devextreme/js/localization/messages/de.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,8 @@
542542
"dxHtmlEditor-aiTryAgain": "Try again",
543543
"dxHtmlEditor-aiGenerate": "Generate",
544544
"dxHtmlEditor-aiStop": "Stop",
545+
"dxHtmlEditor-aiToolbarItemAriaLabel": "AI Assistant toolbar item",
546+
"dxHtmlEditor-aiResultTextAreaAriaLabel": "AI Assistant result",
545547
"dxHtmlEditor-aiAskPlaceholder": "Ask AI to modify text",
546548

547549
"dxFileManager-newDirectoryName": "Ohne Titel",

‎packages/devextreme/js/localization/messages/el.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -542,6 +542,8 @@
542542
"dxHtmlEditor-aiTryAgain": "Try again",
543543
"dxHtmlEditor-aiGenerate": "Generate",
544544
"dxHtmlEditor-aiStop": "Stop",
545+
"dxHtmlEditor-aiToolbarItemAriaLabel": "AI Assistant toolbar item",
546+
"dxHtmlEditor-aiResultTextAreaAriaLabel": "AI Assistant result",
545547
"dxHtmlEditor-aiAskPlaceholder": "Ask AI to modify text",
546548

547549
"dxFileManager-newDirectoryName": "Untitled directory",

0 commit comments

Comments
 (0)