temp/UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

iter(g335): 输入类组件补可访问名

Browse Source
This commit is contained in:
HIsheR
2026-10-27 02:09:25 +08:00
parent dcf3614d5c
commit 19d5e90006
9 changed files with 71 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/skin/ui/src/slider.ts
+5 -5
View File
@@ -13,8 +13,8 @@ export function slider(props: SliderProps): HTMLElement {
const pct = (v: number): number => ((v - min) / (max - min || 1)) * 100; // 分母兜底，避免 min=max 时除零
/*** 建一条原生 range：区间模式靠 CSS 叠在同一格，只有拇指可命中 ***/
const track = (sig: typeof value, onInput: (n: number) => void): HTMLInputElement => {
const input = h('input', { type: 'range', class: 'ua-slider-input', min, max, step, disabled }) as HTMLInputElement;
const track = (sig: typeof value, onInput: (n: number) => void, label: string): HTMLInputElement => {
const input = h('input', { type: 'range', class: 'ua-slider-input', min, max, step, disabled, 'aria-label': label }) as HTMLInputElement; // 原生 range 不自带名字，读屏只念「滑块」
input.addEventListener('input', () => onInput(Number(input.value)));
effect(() => {
const next = String(sig());
@@ -30,7 +30,7 @@ export function slider(props: SliderProps): HTMLElement {
: null;
if (!props.range) { // —— 单值：一条原生轨，行为与旧版完全一致 ——
const input = track(value, (next) => { value(next); props.onChange?.(next); });
const input = track(value, (next) => { value(next); props.onChange?.(next); }, props.ariaLabel ?? '数值');
return h(
'div',
{ class: 'ua-slider' },
@@ -42,8 +42,8 @@ export function slider(props: SliderProps): HTMLElement {
// —— 区间：两条原生轨叠放，rail 打底、seg 画出两拇指之间的已选段 ——
const rail = h('div', { class: 'ua-slider-rail', 'aria-hidden': 'true' });
const seg = h('div', { class: 'ua-slider-seg', 'aria-hidden': 'true' }) as HTMLElement;
const lowIn = track(value, (next) => { value(Math.min(next, high())); props.onRangeChange?.(value(), high()); }); // 下限越过上限就压平
const highIn = track(high, (next) => { high(Math.max(next, value())); props.onRangeChange?.(value(), high()); }); // 上限低于下限就压平
const lowIn = track(value, (next) => { value(Math.min(next, high())); props.onRangeChange?.(value(), high()); }, `${props.ariaLabel ?? '数值'}下限`); // 下限越过上限就压平；区间两端各有名字
const highIn = track(high, (next) => { high(Math.max(next, value())); props.onRangeChange?.(value(), high()); }, `${props.ariaLabel ?? '数值'}上限`); // 上限低于下限就压平
lowIn.classList.add('ua-slider-input-low'); // 供 CSS 区分上下层与拇指命中区
highIn.classList.add('ua-slider-input-high');
effect(() => { seg.style.left = `${pct(value())}%`; seg.style.width = `${pct(high()) - pct(value())}%`; }); // 已选段随两端重算