From aba9340e91a1bb91b2f62edaafbd0c11ac5dd2bc Mon Sep 17 00:00:00 2001 From: redphx <96280+redphx@users.noreply.github.com> Date: Fri, 17 May 2024 17:24:10 +0700 Subject: [PATCH] Fix HTML issues --- src/modules/dialog.ts | 2 +- src/modules/mkb/mkb-remapper.ts | 1 + src/modules/ui/global-settings.ts | 16 +++++++++++++--- src/utils/html.ts | 2 +- src/utils/settings.ts | 29 ++++++++++++++++++++++++----- 5 files changed, 40 insertions(+), 10 deletions(-) diff --git a/src/modules/dialog.ts b/src/modules/dialog.ts index b31f6e6..1920822 100644 --- a/src/modules/dialog.ts +++ b/src/modules/dialog.ts @@ -55,7 +55,7 @@ export class Dialog { }), ), this.$content = CE('div', {'class': 'bx-dialog-content'}, content), - !hideCloseButton && ($close = CE('button', {}, t('close'))), + !hideCloseButton && ($close = CE('button', {type: 'button'}, t('close'))), ); $close && $close.addEventListener('click', e => { diff --git a/src/modules/mkb/mkb-remapper.ts b/src/modules/mkb/mkb-remapper.ts index c674369..782617f 100644 --- a/src/modules/mkb/mkb-remapper.ts +++ b/src/modules/mkb/mkb-remapper.ts @@ -426,6 +426,7 @@ export class MkbRemapper { const $fragment = document.createDocumentFragment(); for (let i = 0; i < keysPerButton; i++) { $elm = CE('button', { + type: 'button', 'data-prompt': buttonPrompt, 'data-button-index': buttonIndex, 'data-key-slot': i, diff --git a/src/modules/ui/global-settings.ts b/src/modules/ui/global-settings.ts index 3e14e71..c8c291f 100644 --- a/src/modules/ui/global-settings.ts +++ b/src/modules/ui/global-settings.ts @@ -250,8 +250,9 @@ export function setupSettingsUi() { if (settingId === PrefKey.USER_AGENT_PROFILE) { let defaultUserAgent = (window.navigator as any).orgUserAgent || window.navigator.userAgent; $inpCustomUserAgent = CE('input', { - 'type': 'text', - 'placeholder': defaultUserAgent, + id: `bx_setting_inp_${settingId}`, + type: 'text', + placeholder: defaultUserAgent, 'class': 'bx-settings-custom-user-agent', }); $inpCustomUserAgent.addEventListener('change', e => { @@ -278,7 +279,11 @@ export function setupSettingsUi() { } else if (settingId === PrefKey.SERVER_REGION) { let selectedValue; - $control = CE('select', {id: `bx_setting_${settingId}`, tabindex: 0}); + $control = CE('select', { + id: `bx_setting_${settingId}`, + title: settingLabel, + tabindex: 0, + }); $control.name = $control.id; $control.addEventListener('change', (e: Event) => { @@ -324,7 +329,12 @@ export function setupSettingsUi() { } else { $control = toPrefElement(settingId, onChange); } + } + + if (!!$control.id) { labelAttrs['for'] = $control.id; + } else { + labelAttrs['for'] = `bx_setting_${settingId}`; } // Disable unsupported settings diff --git a/src/utils/html.ts b/src/utils/html.ts index 700bfdd..a055919 100644 --- a/src/utils/html.ts +++ b/src/utils/html.ts @@ -77,7 +77,7 @@ export const createButton = (options: BxButton): T => { $btn.href = options.url; $btn.target = '_blank'; } else { - $btn = CE('button', {'class': 'bx-button'}) as HTMLButtonElement; + $btn = CE('button', {'class': 'bx-button', type: 'button'}) as HTMLButtonElement; } const style = (options.style || 0) as number; diff --git a/src/utils/settings.ts b/src/utils/settings.ts index a7af348..4cb06d8 100644 --- a/src/utils/settings.ts +++ b/src/utils/settings.ts @@ -26,7 +26,10 @@ export enum SettingElementType { export class SettingElement { static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) { - const $control = CE('select', {tabindex: 0}) as HTMLSelectElement; + const $control = CE('select', { + title: setting.label, + tabindex: 0, + }) as HTMLSelectElement; for (let value in setting.options) { const label = setting.options[value]; @@ -50,7 +53,11 @@ export class SettingElement { } static #renderMultipleOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any, params: MultipleOptionsParams={}) { - const $control = CE('select', {multiple: true, tabindex: 0}); + const $control = CE('select', { + title: setting.label, + multiple: true, + tabindex: 0, + }); if (params && params.size) { $control.setAttribute('size', params.size.toString()); } @@ -149,13 +156,22 @@ export class SettingElement { }; const $wrapper = CE('div', {'class': 'bx-number-stepper'}, - $decBtn = CE('button', {'data-type': 'dec', tabindex: -1}, '-') as HTMLButtonElement, + $decBtn = CE('button', { + 'data-type': 'dec', + type: 'button', + tabindex: -1, + }, '-') as HTMLButtonElement, $text = CE('span', {}, renderTextValue(value)) as HTMLSpanElement, - $incBtn = CE('button', {'data-type': 'inc', tabindex: -1}, '+') as HTMLButtonElement, + $incBtn = CE('button', { + 'data-type': 'inc', + type: 'button', + tabindex: -1, + }, '+') as HTMLButtonElement, ); if (!options.disabled && !options.hideSlider) { $range = CE('input', { + id: `bx_setting_${key}`, type: 'range', min: MIN, max: MAX, @@ -290,7 +306,10 @@ export class SettingElement { const method = SettingElement.#METHOD_MAP[type]; // @ts-ignore const $control = method(...Array.from(arguments).slice(1)) as HTMLElement; - $control.id = `bx_setting_${key}`; + + if (type !== SettingElementType.NUMBER_STEPPER) { + $control.id = `bx_setting_${key}`; + } // Add "name" property to "select" elements if (type === SettingElementType.OPTIONS || type === SettingElementType.MULTIPLE_OPTIONS) {