/** * @file * Adds default classes to buttons for styling purposes. */ (function ($, { tabbable, isTabbable }) { $.widget('ui.dialog', $.ui.dialog, { options: { buttonClass: 'button', buttonPrimaryClass: 'button--primary', }, _createButtons() { const opts = this.options; let primaryIndex; let index; const il = opts.buttons.length; for (index = 0; index < il; index++) { if ( opts.buttons[index].primary && opts.buttons[index].primary === true ) { primaryIndex = index; delete opts.buttons[index].primary; break; } } this._super(); const $buttons = this.uiButtonSet.children().addClass(opts.buttonClass); if (typeof primaryIndex !== 'undefined') { $buttons.eq(index).addClass(opts.buttonPrimaryClass); } }, // Override jQuery UI's `_focusTabbable()` so finding tabbable elements uses // the core/tabbable library instead of jQuery UI's `:tabbable` selector. _focusTabbable() { // Set focus to the first match: // 1. An element that was focused previously. let hasFocus = this._focusedElement ? this._focusedElement.get(0) : null; // 2. First element inside the dialog matching [autofocus]. if (!hasFocus) { hasFocus = this.element.find('[autofocus]').get(0); } // 3. Tabbable element inside the content element. // 4. Tabbable element inside the buttonpane. if (!hasFocus) { const $elements = [this.element, this.uiDialogButtonPane]; for (let i = 0; i < $elements.length; i++) { const element = $elements[i].get(0); if (element) { const elementTabbable = tabbable(element); hasFocus = elementTabbable.length ? elementTabbable[0] : null; } if (hasFocus) { break; } } } // 5. The close button. if (!hasFocus) { const closeBtn = this.uiDialogTitlebarClose.get(0); hasFocus = closeBtn && isTabbable(closeBtn) ? closeBtn : null; } // 6. The dialog itself. if (!hasFocus) { hasFocus = this.uiDialog.get(0); } $(hasFocus).eq(0).trigger('focus'); }, }); })(jQuery, window.tabbable);