Skip to content

Commit

Permalink
Chat: Support Accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
marker dao ® committed Sep 27, 2024
1 parent c0168c7 commit aa3151d
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 26 deletions.
2 changes: 1 addition & 1 deletion packages/devextreme/js/__internal/ui/chat/messagebox.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
_updateAria(value: string | null): void {
$(this._textArea.$element())
.find(`.${TEXTEDITOR_INPUT_CLASS}`)
.attr('aria-describedby', value);
.attr('aria-labelledby', value);
}

_isValuableTextEntered(): boolean {
Expand Down
27 changes: 19 additions & 8 deletions packages/devextreme/js/__internal/ui/chat/messagelist.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,9 @@ class MessageList extends Widget<Properties> {
super._initMarkup();

this._renderScrollable();

this._renderMessageListContent();

this._attachResizeObserverSubscription();
this._updateAria();

this._suppressResizeHandling = true;
}
Expand Down Expand Up @@ -243,12 +242,6 @@ class MessageList extends Widget<Properties> {
return $(this._scrollable.container()).get(0);
}

_clean(): void {
this._messageGroups = [];

super._clean();
}

_isMessageAddedToEnd(value: Message[], previousValue: Message[]): boolean {
const valueLength = value.length;
const previousValueLength = previousValue.length;
Expand Down Expand Up @@ -286,6 +279,24 @@ class MessageList extends Widget<Properties> {
}
}

_updateAria(): void {
const aria = {
role: 'log',
atomic: 'false',
label: 'Message list',
live: 'polite',
relevant: 'additions',
};

this.setAria(aria);
}

_clean(): void {
this._messageGroups = [];

super._clean();
}

_optionChanged(args: OptionChanged<Properties>): void {
const { name, value, previousValue } = args;

Expand Down
2 changes: 1 addition & 1 deletion packages/devextreme/playground/jquery.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
<script>
$(function() {
$("#button").dxChat({

height: 600,
});
});
</script>
Expand Down
18 changes: 9 additions & 9 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,11 +102,11 @@ QUnit.module('Chat', moduleConfig, () => {
},
].forEach(({ attribute, expectedValue }) => {
QUnit.test(`root element should have correct ${attribute}`, function(assert) {
assert.strictEqual(this.$element.attr(attribute), expectedValue);
assert.strictEqual(this.$element.attr(attribute), expectedValue, `${attribute} is correct`);
});
});

QUnit.test('textarea should not have aria-describedby attribute if there are items', function(assert) {
QUnit.test('textarea should not have aria-labelledby attribute if there are items', function(assert) {
this.reinit({
items: [
{ text: '1' },
Expand All @@ -116,17 +116,17 @@ QUnit.module('Chat', moduleConfig, () => {

const $textArea = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);

assert.strictEqual($textArea.attr('aria-describedby'), undefined);
assert.strictEqual($textArea.attr('aria-labelledby'), undefined);
});

QUnit.test('textarea should have correct aria-describedby attribute if there are not items', function(assert) {
QUnit.test('textarea should have correct aria-labelledby attribute if there are not items', function(assert) {
const $textArea = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
const $emptyView = this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`);

assert.strictEqual($textArea.attr('aria-describedby'), $emptyView.attr('id'));
assert.strictEqual($textArea.attr('aria-labelledby'), $emptyView.attr('id'));
});

QUnit.test('textarea should get rid of aria-describedby attribute if items has been added in runtime', function(assert) {
QUnit.test('textarea should get rid of aria-labelledby attribute if items has been added in runtime', function(assert) {
this.instance.option({
items: [
{ text: '1' },
Expand All @@ -136,10 +136,10 @@ QUnit.module('Chat', moduleConfig, () => {

const $textArea = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);

assert.strictEqual($textArea.attr('aria-describedby'), undefined);
assert.strictEqual($textArea.attr('aria-labelledby'), undefined);
});

QUnit.test('textarea should get aria-describedby attribute if items has been removed in runtime', function(assert) {
QUnit.test('textarea should get aria-labelledby attribute if items has been removed in runtime', function(assert) {
this.reinit({
items: [
{ text: '1' },
Expand All @@ -152,7 +152,7 @@ QUnit.module('Chat', moduleConfig, () => {
const $textArea = this.$element.find(`.${TEXTEDITOR_INPUT_CLASS}`);
const $emptyView = this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`);

assert.strictEqual($textArea.attr('aria-describedby'), $emptyView.attr('id'));
assert.strictEqual($textArea.attr('aria-labelledby'), $emptyView.attr('id'));
});
});
});
Expand Down
43 changes: 36 additions & 7 deletions ...ages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/messageList.markup.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,13 +51,6 @@ QUnit.module('MessageList', moduleConfig, () => {
assert.strictEqual(this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`).length, 1);
});

QUnit.test('container should be have id attribute', function(assert) {
const id = this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`).attr('id');

assert.strictEqual(id !== undefined, true);
assert.strictEqual(id !== '', true);
});

QUnit.test('container should not be rendered if there are messages', function(assert) {
this.reinit({
items: [{}]
Expand Down Expand Up @@ -94,4 +87,40 @@ QUnit.module('MessageList', moduleConfig, () => {
assert.strictEqual($emptyView.find(`.${CHAT_MESSAGELIST_EMPTY_PROMPT_CLASS}`).length, 1);
});
});

QUnit.module('Accessibility', () => {
QUnit.test('container should be have id attribute', function(assert) {
const id = this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`).attr('id');

assert.strictEqual(id !== undefined, true);
assert.strictEqual(id !== '', true);
});

[
{
attribute: 'role',
expectedValue: 'log',
},
{
attribute: 'aria-atomic',
expectedValue: 'false',
},
{
attribute: 'aria-label',
expectedValue: 'Message list',
},
{
attribute: 'aria-live',
expectedValue: 'polite',
},
{
attribute: 'aria-relevant',
expectedValue: 'additions',
},
].forEach(({ attribute, expectedValue }) => {
QUnit.test(`element should have correct attribute ${attribute}`, function(assert) {
assert.strictEqual(this.$element.attr(attribute), expectedValue, `${attribute} is correct`);
});
});
});
});

0 comments on commit aa3151d

Please sign in to comment.