Skip to content

Commit

Permalink
added fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@tongsonbarbs
tongsonbarbs committed Oct 10, 2024
1 parent 7c2b585 commit 4b80ece
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 14 deletions.
18 changes: 11 additions & 7 deletions packages/devextreme/js/__internal/filter_builder/m_filter_builder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ class FilterBuilder extends Widget<any> {
.appendTo(this.$element());
}

_addAriaAttributes($element, ariaLabel, role, hasPopup?, hasExpanded?) {
_addAriaAttributes($element, ariaLabel, role, hasPopup?, hasExpanded?, ariaLevel?) {
if (!$element || !$element.length) return;

const attributes = { role };
Expand All @@ -285,13 +285,17 @@ class FilterBuilder extends Widget<any> {
attributes['aria-expanded'] = `${hasExpanded}`;
}

if (isDefined(ariaLevel)) {
attributes['aria-level'] = `${ariaLevel}`;
}

$element.attr(attributes);
}

_createConditionElement(condition, parent) {
_createConditionElement(condition, parent, groupLevel?) {
return $('<div>')
.addClass(FILTER_BUILDER_GROUP_CLASS)
.append(this._createConditionItem(condition, parent));
.append(this._createConditionItem(condition, parent, groupLevel));
}

_createGroupElementByCriteria(criteria, parent?, groupLevel = 0) {
Expand All @@ -305,7 +309,7 @@ class FilterBuilder extends Widget<any> {
this._createGroupElementByCriteria(innerCriteria, criteria, groupLevel + 1)
.appendTo($groupContent);
} else if (isCondition(innerCriteria)) {
this._createConditionElement(innerCriteria, criteria)
this._createConditionElement(innerCriteria, criteria, `${groupLevel + 1}`)
.appendTo($groupContent);
}
}
Expand All @@ -328,7 +332,7 @@ class FilterBuilder extends Widget<any> {
}

this._addAriaAttributes($group, groupLevelAria, 'group');
this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'treeitem');
this._addAriaAttributes($groupItem, messageLocalization.format('dxFilterBuilder-filterAriaGroupItem'), 'treeitem', null, null, `${groupLevel + 1}`);
this._addAriaAttributes($groupContent, '', 'group');
$groupItem.attr('aria-owns', `${$guid}`);

Expand Down Expand Up @@ -561,12 +565,12 @@ class FilterBuilder extends Widget<any> {
return $fieldButton;
}

_createConditionItem(condition, parent) {
_createConditionItem(condition, parent, groupLevel?) {
const $item = $('<div>').addClass(FILTER_BUILDER_GROUP_ITEM_CLASS);
const fields = this._getNormalizedFields();
const field = getField(condition[0], fields);

this._addAriaAttributes($item, '', 'treeitem');
this._addAriaAttributes($item, '', 'treeitem', null, null, groupLevel);

this._createRemoveButton(() => {
removeItem(parent, condition);
Expand Down
37 changes: 30 additions & 7 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets/filterBuilderParts/markupTests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,21 @@ QUnit.test('markup init', function(assert) {
assert.ok(true, 'This test is not actual for mobile devices, dxclick add onclick=\'void(0)\' to every button in mobile');
return;
}
const element = $('#container').dxFilterBuilder();
const guid = element.find('.dx-filterbuilder-group-item').attr('aria-owns');

const $etalon = $(
'<div id="container" class="dx-filterbuilder dx-widget">'
+ '<div class="dx-filterbuilder-group" role="group" aria-label="Level 1">'
+ '<div class="dx-filterbuilder-group-item" role="presentation" aria-label="Group Item">'
+ '<div class="dx-filterbuilder-group-item" role="treeitem" aria-label="Group Item" aria-level="1" aria-owns="' + guid + '">'
+ '<div role="button" title="Operation" aria-haspopup="true" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">And</div>'
+ '<div role="button" aria-label="Add" aria-haspopup="true" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
+ '</div>'
+ '<div class="dx-filterbuilder-group-content"></div>'
+ '<div class="dx-filterbuilder-group-content" id="' + guid + '" role="group"></div>'
+ '</div>'
+ '</div>'
);

const element = $('#container').dxFilterBuilder();
assert.equal(element.html(), $etalon.html());
});

Expand Down Expand Up @@ -53,14 +55,35 @@ QUnit.test('filter Content init by one condition', function(assert) {
assert.ok(true, 'This test is not actual for mobile devices, dxclick add onclick=\'void(0)\' to every button in mobile');
return;
}
const $etalon = $('<div/>').html(
'<div class="dx-filterbuilder-group" role="group" aria-label="Level 2"><div class="dx-filterbuilder-group-item" role="presentation" aria-label="Group Item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove group"></div><div role="button" title="Operation" aria-haspopup="true" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">Or</div><div role="button" aria-label="Add" aria-haspopup="true" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div></div><div class="dx-filterbuilder-group-content"><div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="button" title="Item Field" aria-haspopup="true">Company Name</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="button" title="Item Operation" aria-haspopup="true">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div></div></div></div></div></div>'
);

const element = $('#container').dxFilterBuilder({
fields: fields,
value: [[['CompanyName', '=', 'K&S Music'], 'Or'], 'And']
});
const guid = element.find('.dx-filterbuilder-group[aria-label="Level 2"] .dx-filterbuilder-group-item').attr('aria-owns');

const $etalon = $('<div/>').html(
'<div class="dx-filterbuilder-group" role="group" aria-label="Level 2">'
+ '<div class="dx-filterbuilder-group-item" role="treeitem" aria-label="Group Item" aria-level="2" aria-owns="' + guid + '">'
+ '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove group"></div>'
+ '<div role="button" title="Operation" aria-haspopup="true" class="dx-filterbuilder-text dx-filterbuilder-group-operation" tabindex="0">Or</div>'
+ '<div role="button" aria-label="Add" aria-haspopup="true" class="dx-filterbuilder-action-icon dx-icon-plus dx-filterbuilder-action" tabindex="0"></div>'
+ '</div>'
+ '<div class="dx-filterbuilder-group-content" id="' + guid + '" role="group">'
+ '<div class="dx-filterbuilder-group">'
+ '<div class="dx-filterbuilder-group-item" role="treeitem" aria-level="2">'
+ '<div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div>'
+ '<div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Company Name</div>'
+ '<div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div>'
+ '<div class="dx-filterbuilder-text dx-filterbuilder-item-value">'
+ '<div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
+ '</div>'
);

assert.equal(element.find('.' + FILTER_BUILDER_GROUP_CONTENT_CLASS).html(), $etalon.html());
});

Expand All @@ -70,7 +93,7 @@ QUnit.test('filter Content init by several conditions', function(assert) {
return;
}
const $etalon = $('<div/>').html(
'<div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="button" title="Item Field" aria-haspopup="true">Company Name</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="button" title="Item Operation" aria-haspopup="true">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div></div></div></div><div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="button" title="Item Field" aria-haspopup="true">Zipcode</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="button" title="Item Operation" aria-haspopup="true">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">98027</div></div></div></div>'
'<div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item" role="treeitem" aria-level="1"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Company Name</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">K&amp;S Music</div></div></div></div><div class="dx-filterbuilder-group"><div class="dx-filterbuilder-group-item" role="treeitem" aria-level="1"><div class="dx-filterbuilder-action-icon dx-icon-remove dx-filterbuilder-action" tabindex="0" role="button" aria-label="Remove condition"></div><div class="dx-filterbuilder-text dx-filterbuilder-item-field" tabindex="0" role="combobox" title="Item Field" aria-haspopup="true" aria-expanded="false">Zipcode</div><div class="dx-filterbuilder-text dx-filterbuilder-item-operation" tabindex="0" role="combobox" title="Item Operation" aria-haspopup="true" aria-expanded="false">Equals</div><div class="dx-filterbuilder-text dx-filterbuilder-item-value"><div class="dx-filterbuilder-item-value-text" tabindex="0" role="button" title="Item Value" aria-haspopup="true">98027</div></div></div></div>'
);

const element = $('#container').dxFilterBuilder({
Expand Down

0 comments on commit 4b80ece

Please sign in to comment.