IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-12-01 21:19:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

Revert "A11Y: select kit close on focus out (#21274)" (#21383)

Browse Source 
This reverts commit 1b2a1c94d4. Noticed
some issues in Safari macOS that need to be addressed.
This commit is contained in:
Penar Musaraj 2023-05-04 09:45:19 -04:00 committed by GitHub
parent c1c017f433
commit 76157c6fb0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 53 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/assets/javascripts/discourse/tests/acceptance/category-edit-test.js
View File

@ -113,12 +113,10 @@ acceptance("Category Edit", function (needs) {
const allowedTagChooser = selectKit("#category-allowed-tags");
await allowedTagChooser.expand();
await allowedTagChooser.selectRowByValue("monkey");
await allowedTagChooser.collapse();
const allowedTagGroupChooser = selectKit("#category-allowed-tag-groups");
await allowedTagGroupChooser.expand();
await allowedTagGroupChooser.selectRowByValue("TagGroup1");
await allowedTagGroupChooser.collapse();
await click("#save-category");
@ -131,7 +129,6 @@ acceptance("Category Edit", function (needs) {
await allowedTagChooser.expand();
await allowedTagChooser.deselectItemByValue("monkey");
await allowedTagChooser.collapse();
await allowedTagGroupChooser.expand();
await allowedTagGroupChooser.deselectItemByValue("TagGroup1");

7
app/assets/javascripts/discourse/tests/acceptance/user-preferences-categories-test.js
View File

@ -39,16 +39,10 @@ acceptance("User Preferences - Categories", function (needs) {
".tracking-controls__regular-categories .category-selector"
);
await trackedCategoriesSelector.collapse();
await regularCategoriesSelector.expand();
await regularCategoriesSelector.deselectItemByValue("4");
await regularCategoriesSelector.collapse();
await trackedCategoriesSelector.expand();
await trackedCategoriesSelector.selectRowByValue("4");
await trackedCategoriesSelector.collapse();
await click(".save-changes");
assert.deepEqual(putRequestData, {
@ -69,7 +63,6 @@ acceptance("User Preferences - Categories", function (needs) {
await categorySelector.expand();
// User has `regular_category_ids` set to [4] in fixtures
await categorySelector.selectRowByValue(4);
await categorySelector.collapse();
await click(".save-changes");
assert.deepEqual(putRequestData, {

12
app/assets/javascripts/discourse/tests/acceptance/user-preferences-tracking-test.js
View File

@ -173,25 +173,17 @@ acceptance("User Preferences - Tracking", function (needs) {
assert.notOk(
trackedCategoriesSelector.rowByValue("4").exists(),
"category that is set to regular is not available for selection under tracked"
"category that is set to regular is not available for selection"
);
const regularCategoriesSelector = selectKit(
".tracking-controls__regular-categories .category-selector"
);
await trackedCategoriesSelector.collapse();
await regularCategoriesSelector.expand();
await regularCategoriesSelector.deselectItemByValue("4");
assert.ok(
regularCategoriesSelector.rowByValue("4").exists(),
"category is no longer selected under regular"
);
await regularCategoriesSelector.collapse();
await trackedCategoriesSelector.expand();
await trackedCategoriesSelector.selectRowByValue("4");
await trackedCategoriesSelector.collapse();
await click(".save-changes");
assert.deepEqual(putRequestData, {

3
app/assets/javascripts/discourse/tests/integration/components/select-kit/mini-tag-chooser-test.js
View File

@ -58,8 +58,9 @@ module(
await this.subject.fillInFilter("baz");
await this.subject.selectRowByValue("monkey");
const error = query(".select-kit-error").innerText;
assert.strictEqual(
query(".select-kit-error").innerText,
error,
I18n.t("select_kit.max_content_reached", {
count: this.siteSettings.max_tags_per_topic,
})

1
app/assets/javascripts/select-kit/addon/components/multi-select.js
View File

@ -75,7 +75,6 @@ export default SelectKitComponent.extend({
},
select(value, item) {
this.selectKit.set("multiSelectInFocus", true);
if (this.selectKit.hasSelection && this.selectKit.options.maximum === 1) {
this.selectKit.deselectByValue(
this.getValue(this.selectedContent.firstObject)

2
app/assets/javascripts/select-kit/addon/components/select-kit.js
View File

@ -94,7 +94,6 @@ export default Component.extend(
noneItem: null,
newItem: null,
filter: null,
multiSelectInFocus: null,
modifyContent: bind(this, this._modifyContentWrapper),
modifySelection: bind(this, this._modifySelectionWrapper),
@ -442,7 +441,6 @@ export default Component.extend(
items = makeArray(items);
if (this.multiSelect) {
this.selectKit.set("multiSelectInFocus", true);
items = items.filter(
(i) =>
i !== this.newItem &&

48
app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js
View File

@ -1,5 +1,5 @@
import Component from "@ember/component";
import { bind } from "discourse-common/utils/decorators";
import { bind } from "@ember/runloop";
import { computed } from "@ember/object";
export default Component.extend({
@ -10,41 +10,55 @@ export default Component.extend({
return false;
}),
rootEventType: "click",
init() {
this._super(...arguments);
this.handleRootMouseDownHandler = bind(this, this.handleRootMouseDown);
},
didInsertElement() {
this._super(...arguments);
this.element.style.position = "relative";
this.element.addEventListener("focusout", this._handleFocusOut, true);
document.addEventListener(
this.rootEventType,
this.handleRootMouseDownHandler,
true
);
},
willDestroyElement() {
this._super(...arguments);
this.element.removeEventListener("focusout", this._handleFocusOut, true);
document.removeEventListener(
this.rootEventType,
this.handleRootMouseDownHandler,
true
);
},
@bind
_handleFocusOut(event) {
handleRootMouseDown(event) {
if (!this.selectKit.isExpanded) {
return;
}
if (!this.selectKit.mainElement()) {
const headerElement = document.querySelector(
`#${this.selectKit.uniqueID}-header`
);
if (headerElement && headerElement.contains(event.target)) {
return;
}
if (this.selectKit.mainElement().contains(event.relatedTarget)) {
if (this.element.contains(event.target)) {
return;
}
// We have to use a custom flag for multi-selects to keep UI visible.
// We can't rely on event.relatedTarget for these cases because,
// when adding/removing items in a multi-select, the DOM element
// has already been removed by this point, and therefore
// event.relatedTarget is going to be null.
if (this.selectKit.multiSelectInFocus) {
this.selectKit.set("multiSelectInFocus", false);
return;
if (this.selectKit.mainElement()) {
this.selectKit.close(event);
}
this.selectKit.close(event);
},
});

5
app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-header.js
View File

@ -122,10 +122,7 @@ export default Component.extend(UtilsMixin, {
event.stopPropagation();
event.preventDefault(); // prevents the space to trigger a scroll page-next
this.selectKit.open(event);
} else if (
event.key === "Escape" ||
(event.shiftKey && event.key === "Tab")
) {
} else if (event.key === "Escape") {
event.stopPropagation();
if (this.selectKit.isExpanded) {
this.selectKit.close(event);

18
app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-row.js
View File

@ -41,6 +41,7 @@ export default Component.extend(UtilsMixin, {
if (!this.site.mobileView) {
this.element.addEventListener("mouseenter", this.handleMouseEnter);
this.element.addEventListener("focus", this.handleMouseEnter);
this.element.addEventListener("blur", this.handleBlur);
}
},
@ -48,8 +49,9 @@ export default Component.extend(UtilsMixin, {
this._super(...arguments);
if (!this.site.mobileView) {
this.element.removeEventListener("mouseenter", this.handleMouseEnter);
this.element.removeEventListener("mouseenter", this.handleBlur);
this.element.removeEventListener("focus", this.handleMouseEnter);
this.element.removeEventListener("blur", this.handleMouseEnter);
}
},
@ -132,6 +134,20 @@ export default Component.extend(UtilsMixin, {
return false;
},
@action
handleBlur(event) {
if (
(!this.isDestroying || !this.isDestroyed) &&
event.target &&
this.selectKit.mainElement()
) {
if (!this.selectKit.mainElement().contains(event.target)) {
this.selectKit.close(event);
}
}
return false;
},
click(event) {
event.preventDefault();
event.stopPropagation();