Skip to content

Commit 04de636

Browse files
baiwusanyu-cbaiwusanyu-c
committed
fix: avoid a11y errors
1 parent b8312c7 commit 04de636

File tree

45 files changed

+164
-140
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+164
-140
lines changed

‎components/Alert/src/index.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -101,7 +101,7 @@
101101
{/if}
102102
</div>
103103
{#if closable}
104-
<div bind:this={closeRef} class={closeCls} aria-hidden="true" on:click={onClose}>
104+
<div bind:this={closeRef} class={closeCls} on:click={onClose}>
105105
<slot name="close">
106106
<KIcon cls="inline-flex" icon={closeIcon} width="16px" height="16px"></KIcon>
107107
</slot>

‎components/AutoComplete/src/index.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@
170170
width={triggerWidth}
171171
placement="bottom"
172172
>
173-
<div class={cname} {...attrs} slot="triggerEl" bind:this={inputSelectRef} aria-hidden="true">
173+
<div class={cname} {...attrs} slot="triggerEl" bind:this={inputSelectRef} >
174174
<KInput
175175
bind:this={inputRef}
176176
on:input={handleInput}

‎components/Backtop/src/index.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
class={cnames}
9292
style:right={backTopStyle.right}
9393
style:bottom={backTopStyle.bottom}
94-
aria-hidden="true"
94+
9595
on:click|stopPropagation={handleClick}
9696
{...$$restProps}
9797
{...attrs}

‎components/Button/src/index.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@
122122
bind:this={btnRef}
123123
style="border-radius: {round ? `${round}` : '4'}px; font-size: {iconSizeInner}px"
124124
class={cnames}
125-
aria-hidden="true"
125+
126126
on:click={handleClick}
127127
{...attrsInner}
128128
{...$$restProps}

‎components/Carousel/__test__/fixture/custom.svelte

+3-3
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
<div
2323
class={itemCls(item, activeIndex)}
2424
role="button"
25-
aria-hidden="true"
25+
2626
on:mouseenter={() => hoverJump(item)}
2727
on:click={() => clickJump(item)}
2828
></div>
@@ -33,7 +33,7 @@
3333
<div slot="arrow" class="flex" let:show let:loop let:onChange let:defaultPageIndex let:count>
3434
<KCarouselArrow {show} {loop} {defaultPageIndex} on:change={onChange} {count}>
3535
<div
36-
aria-hidden="true"
36+
3737
class="ml-10px cursor-pointer"
3838
slot="prev"
3939
let:gotoPrev
@@ -42,7 +42,7 @@
4242
🏀
4343
</div>
4444
<div
45-
aria-hidden="true"
45+
4646
class="mr-10px cursor-pointer"
4747
slot="next"
4848
let:gotoNext

‎components/Carousel/src/arrow.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
out:fly={{ duration: 500, x: -10 }}
6363
in:fly={{ duration: 500, x: -10 }}
6464
class={prevCls}
65-
aria-hidden="true"
65+
6666
on:click={gotoPrev}
6767
>
6868
<KIcon icon="i-carbon-chevron-left" width="16px" height="16px" />
@@ -76,7 +76,7 @@
7676
out:fly={{ duration: 500, x: 10 }}
7777
in:fly={{ duration: 500, x: 10 }}
7878
class={nextCls}
79-
aria-hidden="true"
79+
8080
on:click={gotoNext}
8181
>
8282
<KIcon icon="i-carbon-chevron-right" width="16px" height="16px" />

‎components/Carousel/src/index.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -169,7 +169,7 @@
169169
</script>
170170

171171
<div
172-
aria-hidden="true"
172+
173173
on:mouseenter={handleMouseenter}
174174
on:mouseleave={handleMouseleave}
175175
class={cnames}

‎components/Collapse/src/index.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
</script>
115115

116116
<div class={clsInner} {...attrs}>
117-
<div class={cnames} on:click={showContent} aria-hidden="true">
117+
<div class={cnames} on:click={showContent} >
118118
<slot name="title">
119119
{title}
120120
</slot>

‎components/ColorPicker/src/index.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -317,7 +317,7 @@
317317
<span class={titleCls}>{title}</span>
318318
</slot>
319319
{#if allowClear}
320-
<div class={clearClsx} aria-hidden="true" on:click={handleClear}></div>
320+
<div class={clearClsx} on:click={handleClear}></div>
321321
{/if}
322322
</div>
323323
<div>

‎components/ColorPicker/src/palette.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -138,8 +138,9 @@
138138
</script>
139139

140140
<div
141+
role="toolbar"
142+
tabindex="-1"
141143
class={cnames}
142-
aria-hidden="true"
143144
on:mousedown|preventDefault={handleMousedown}
144145
on:mouseup|preventDefault={handleMouseup}
145146
bind:this={containerElement}
@@ -151,7 +152,6 @@
151152
class={pointerCls}
152153
style:left={dragLeft}
153154
style:top={dragTop}
154-
aria-hidden="true"
155155
bind:this={dragElement}
156156
></div>
157157
</div>

‎components/ColorPicker/src/preset.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -56,15 +56,15 @@
5656
<KCheckboxGroup value={checkValue} on:updateValue={handleCheck}>
5757
{#each normalPresets as preset, index (preset.label + index)}
5858
<div class={containerCls}>
59-
<div class={headCls} on:click={() => handleExpend(index)} aria-hidden="true">
59+
<button class={headCls} on:click={() => handleExpend(index)} >
6060
<KIcon
6161
cls={iconCls}
6262
icon={handleExpendIcon(preset.defaultOpen)}
6363
width="14px"
6464
height="14px"
6565
/>
6666
<span class={labelCls}>{preset.label}</span>
67-
</div>
67+
</button>
6868
{#if preset.defaultOpen}
6969
<div class={colorCls} transition:fade>
7070
{#each preset.colors as color (color)}

‎components/ColorPicker/src/slider.svelte

+3-1
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,9 @@
9090

9191
<svelte:window on:mousemove={drag} on:mouseup={endDrag} />
9292
<div
93-
aria-hidden="true"
93+
role="slider"
94+
tabindex="-1"
95+
aria-valuenow={position * 100}
9496
class={cnames}
9597
{...$$restProps}
9698
{...attrs}

‎components/Contextmenu/src/contextmenu-item.svelte

+6-4
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,10 @@
2929
);
3030
</script>
3131

32-
<li class={cnames} on:click={handleClick} aria-hidden="true" {...$$restProps} {...attrs}>
33-
{#if !divider}
34-
<slot />
35-
{/if}
32+
<li class={cnames} {...$$restProps} {...attrs}>
33+
<button on:click={handleClick} >
34+
{#if !divider}
35+
<slot />
36+
{/if}
37+
</button>
3638
</li>

‎components/Dropdown/src/item.svelte

+2-3
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,8 @@
3131
);
3232
</script>
3333

34-
<div
34+
<button
3535
class={cnames}
36-
aria-hidden="true"
3736
data-testid="k_dropdown__item"
3837
on:click={handleClick}
3938
{...$$restProps}
@@ -42,4 +41,4 @@
4241
{#if !divider}
4342
<slot />
4443
{/if}
45-
</div>
44+
</button>

‎components/Ellipsis/src/index.svelte

+4-5
Original file line numberDiff line numberDiff line change
@@ -54,24 +54,23 @@
5454
// class
5555
const prefixCls = getPrefixCls('ellipsis');
5656
$: cnames = clsx(
57-
prefixCls,
5857
{
59-
[`${prefixCls}--base`]: true
58+
[`${prefixCls}--line-clamp`]: !!lineClamp,
59+
[`${prefixCls}`]: !(lineClamp),
6060
},
6161
cls
6262
);
6363
</script>
6464

6565
<KTooltip {content} placement="top">
66-
<div
66+
<button
6767
class={cnames}
6868
slot="triggerEl"
6969
{...$$restProps}
7070
{...attrs}
71-
aria-hidden="true"
7271
style={styleContent}
7372
on:click={handleExpand}
7473
>
7574
{textInner}
76-
</div>
75+
</button>
7776
</KTooltip>

‎components/Icon/src/index.svelte

-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,6 @@
4646
<span
4747
class={cnames}
4848
role={tag}
49-
aria-hidden="true"
5049
{...$$restProps}
5150
{...attrs}
5251
style:width={widthInner}

‎components/Image/src/index.svelte

+13-13
Original file line numberDiff line numberDiff line change
@@ -141,19 +141,19 @@
141141
</slot>
142142
{:else}
143143
{#if imageSrc !== undefined}
144-
<img
145-
alt={alt || imageSrc}
146-
aria-hidden="true"
147-
{...$$restProps}
148-
{...attrs}
149-
src={imageSrc}
150-
{loading}
151-
style:object-fit={fit}
152-
class={imageKls}
153-
on:click={clickHandler}
154-
on:load={handleLoad}
155-
on:error={handleError}
156-
/>
144+
<button on:click={clickHandler}>
145+
<img
146+
alt={alt || imageSrc}
147+
{...$$restProps}
148+
{...attrs}
149+
src={imageSrc}
150+
{loading}
151+
style:object-fit={fit}
152+
class={imageKls}
153+
on:load={handleLoad}
154+
on:error={handleError}
155+
/>
156+
</button>
157157
{/if}
158158
{#if isLoading}
159159
<div class={wrapperCls}>

‎components/ImageView/src/index.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -148,9 +148,9 @@
148148
<KClientOnly>
149149
<KMask target={document.body} value={show}>
150150
<div class={cnames} {...$$restProps} {...attrs}>
151-
<div class={closeCls} on:click={handleClose} aria-hidden="true">
151+
<button class={closeCls} on:click={handleClose} >
152152
<KIcon width="26px" height="26px" icon="i-carbon-close" />
153-
</div>
153+
</button>
154154

155155
<div class={bodyCls} on:wheel={handleWheel}>
156156
<img

‎components/Indicators/src/index.svelte

+2-4
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,11 @@
3636
<div class={cnames} {...$$restProps} {...attrs}>
3737
<slot {hoverJump} {clickJump} activeIndex={pageIndex} name="item">
3838
{#each arr as item}
39-
<div
40-
role="button"
39+
<button
4140
class={itemCls(item)}
42-
aria-hidden="true"
4341
on:mouseenter={() => hoverJump(item)}
4442
on:click={() => clickJump(item)}
45-
></div>
43+
></button>
4644
{/each}
4745
</slot>
4846
</div>

‎components/Input/src/index.svelte

+6-10
Original file line numberDiff line numberDiff line change
@@ -272,32 +272,28 @@
272272
/>
273273

274274
{#if clearable && !disabledInner && value}
275-
<div class={clearCls} role="button" aria-hidden="true" on:click={onClear}>
275+
<button class={clearCls} on:click={onClear}>
276276
<KIcon btn icon="i-carbon:close-outline" cls="{iconCls} ml-1" />
277-
</div>
277+
</button>
278278
{/if}
279279

280280
{#if isPassword === 'password' && type === 'password'}
281-
<div
282-
role="button"
283-
aria-hidden="true"
281+
<button
284282
on:click={() => {
285283
isPassword = 'text';
286284
}}
287285
>
288286
<KIcon btn icon="i-carbon-view-off" cls="{iconCls} ml-1" />
289-
</div>
287+
</button>
290288
{/if}
291289
{#if isPassword === 'text' && type === 'password'}
292-
<div
293-
role="button"
294-
aria-hidden="true"
290+
<button
295291
on:click={() => {
296292
isPassword = 'password';
297293
}}
298294
>
299295
<KIcon btn icon="i-carbon-view" cls="{iconCls} ml-1" />
300-
</div>
296+
</button>
301297
{/if}
302298

303299
<slot name="suffix">

‎components/InputNumber/src/index.svelte

+4-2
Original file line numberDiff line numberDiff line change
@@ -345,7 +345,8 @@
345345
<div
346346
class={upCls}
347347
on:click={handleUp}
348-
aria-hidden="true"
348+
on:keydown={handleUp}
349+
tabindex="-1"
349350
role="button"
350351
aria-label="decrease number"
351352
>
@@ -354,7 +355,8 @@
354355
<div
355356
class={downCls}
356357
on:click={handleDown}
357-
aria-hidden="true"
358+
on:keydown={handleDown}
359+
tabindex="-1"
358360
role="button"
359361
aria-label="increase number"
360362
>

‎components/Link/src/index.svelte

-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,6 @@
4040
class={cnames}
4141
{...$$restProps}
4242
{...attrs}
43-
aria-hidden="true"
4443
href={hrefInner}
4544
on:click={handleClick}
4645
>

‎components/Mask/src/index.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
export let value: KMaskProps['value'] = false;
1111
export let target: KMaskProps['target'] = null;
1212
13-
export let onClickMask: (event: MouseEvent) => void;
13+
export let onClickMask: ((event: MouseEvent) => void) | undefined = undefined;
1414
1515
let maskRef: null | HTMLElement = null;
1616
let maskWidth = '100%';

‎components/Menu/src/index.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@
124124
</script>
125125

126126
{#if show}
127-
<div class={darkCls} bind:this={menuRef}>
127+
<div class={darkCls} bind:this={menuRef} role="menu">
128128
<ul
129129
class={cnames}
130130
style:border-color={bdBg}

0 commit comments

Comments
 (0)