vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fix closable dialog focus 

When opening a closable dialog, the focus goes to the close button.

```html
<button aria-label="close" type="button"
    class="p-dialog-titlebar-icon p-dialog-titlebar-close p-link">...</button>
```

This button should not be focused
pull/310/head
Alexandre Jacob 2020-05-09 19:34:51 +02:00
parent 4a861c2577
commit dfa41f905b
2 changed files with 8 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/dialog/Dialog.vue
View File

@ -122,9 +122,9 @@ export default {
}
},
focus() {
let focusable = DomHandler.findSingle(this.$refs.dialog, 'input,button');
if (focusable) {
focusable.focus();
let focusableElements = DomHandler.getFocusableElements(this.$refs.dialog);
if (focusableElements && focusableElements.length > 0) {
focusableElements[0].focus();
}
},
maximize() {

10
src/components/utils/DomHandler.js
View File

@ -401,10 +401,10 @@ export default class DomHandler {
}
static getFocusableElements(element) {
let focusableElements = DomHandler.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
[href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
let focusableElements = DomHandler.find(element, `button:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
[href][clientHeight][clientWidth]:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]):not([aria-label = "close"]),
input:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), select:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
textarea:not([tabindex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]), [tabIndex]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden]),
[contenteditable]:not([tabIndex = "-1"]):not([disabled]):not([style*="display:none"]):not([hidden])`
);
@ -427,4 +427,4 @@ export default class DomHandler {
this.hasClass(element.parentElement, 'p-checkbox') || this.hasClass(element.parentElement, 'p-radiobutton')
);
}
}
}