Fix HTML issues

This commit is contained in:
redphx 2024-05-17 17:24:10 +07:00
parent d07d6127df
commit aba9340e91
5 changed files with 40 additions and 10 deletions

View File

@ -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 => {

View File

@ -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,

View File

@ -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<HTMLSelectElement>('select', {id: `bx_setting_${settingId}`, tabindex: 0});
$control = CE<HTMLSelectElement>('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

View File

@ -77,7 +77,7 @@ export const createButton = <T=HTMLButtonElement>(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;

View File

@ -26,7 +26,10 @@ export enum SettingElementType {
export class SettingElement {
static #renderOptions(key: string, setting: PreferenceSetting, currentValue: any, onChange: any) {
const $control = CE<HTMLSelectElement>('select', {tabindex: 0}) as HTMLSelectElement;
const $control = CE<HTMLSelectElement>('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<HTMLSelectElement>('select', {multiple: true, tabindex: 0});
const $control = CE<HTMLSelectElement>('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) {