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

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