refactor: clean ui modal component (#39654)

1. use "button" element for the modal close button
2. remove "ui modal" width hacks

web_src/js/features/repo-issue-content.ts

@@ -18,14 +18,14 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
     <div class="ui modal content-history-detail-dialog">
       <div class="header flex-left-right">
         <div>${htmlRaw(itemTitleHtml)}</div>
-        <div class="ui dropdown dialog-header-options tw-mr-8 tw-hidden">
+        <div class="ui dropdown dialog-header-options tw-mx-4 tw-hidden">
           ${i18nTextOptions}
           ${svgRaw('octicon-triangle-down', 14, 'dropdown icon')}
           <div class="menu">
             <div class="item tw-text-red" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
           </div>
         </div>
-        ${svgRaw('octicon-x', 16, 'close-modal')}
+        <button type="button" class="close-modal"></button>
       </div>
       <div class="comment-diff-data is-loading"></div>
     </div>

web_src/js/modules/fomantic/modal.ts

@@ -40,10 +40,12 @@ function ariaModalFn(this: JQueryElem, ...args: Parameters<FomanticInitFunction>
   const ret = fomanticModalFn.apply(this, args);
   if (args[0] === 'show' || args[0]?.autoShow) {
     for (const el of this) {
+      el.querySelector('.close-modal')?.setAttribute('aria-label', 'Close');
       // If there is a form in the modal, there might be a "cancel" button before "ok" button (all buttons are "type=submit" by default).
       // In such case, the "Enter" key will trigger the "cancel" button instead of "ok" button, then the dialog will be closed.
       // It breaks the user experience - the "Enter" key should confirm the dialog and submit the form.
       // So, all "cancel" buttons without "[type]" must be marked as "type=button".
+      // Although there are lint rules for "button type", some HTML code is generated in JS/Vue/Go which isn't linted, so we still need this patch.
       for (const button of el.querySelectorAll('form button.cancel:not([type])')) {
         button.setAttribute('type', 'button');
       }

web_src/js/modules/shortcut.ts

@@ -2,7 +2,6 @@ import {registerGlobalInitFunc} from './observer.ts';
 import {createElementFromHTML, hideElem, toggleElem} from '../utils/dom.ts';
 import {showFomanticModal} from './fomantic/modal.ts';
 import {html} from '../utils/html.ts';
-import {svgRaw} from '../svg.ts';
 
 type ShortcutHandler = (el: HTMLElement) => boolean;
 
@@ -76,7 +75,7 @@ function showShortcutHelp() {
       <div id="global-shortcut-help" class="ui small modal" role="dialog" aria-modal="true">
         <div class="header">
           Keyboard Shortcuts
-          ${svgRaw('octicon-x', 16, 'close-modal')}
+          <button type="button" class="close-modal"></button>
         </div>
         <div class="scrolling content">
           <table class="ui very basic compact unstackable table">

web_src/js/utils/dom.ts

@@ -82,14 +82,6 @@ export function queryElems<T extends HTMLElement>(parent: Element | ParentNode,
   return applyElemsCallback<T>(parent.querySelectorAll(selector), fn);
 }
 
-export function onDomReady(cb: () => Promisable<void>) {
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', cb);
-  } else {
-    cb();
-  }
-}
-
 /** checks whether an element is owned by the current document, and whether it is a document fragment or element node
  *  if it is, it means it is a "normal" element managed by us, which can be modified safely. */
 export function isDocumentFragmentOrElementNode(el: Node) {