props fix

pull/2721/head
Tuğçe Küçükoğlu 2022-06-29 17:13:48 +03:00
parent 5b62a009cd
commit a7677ef31f
4 changed files with 9 additions and 21 deletions

View File

@ -48,13 +48,13 @@ const SliderProps = [
description: "Index of the element in tabbing order." description: "Index of the element in tabbing order."
}, },
{ {
name: "ariaLabelledBy", name: "aria-labelledby",
type: "string", type: "string",
default: "null", default: "null",
description: "Establishes relationships between the component and label(s) where its value should be one or more element IDs." description: "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
}, },
{ {
name: "ariaLabel", name: "aria-label",
type: "string", type: "string",
default: "null", default: "null",
description: "Used to define a string that labels the element." description: "Used to define a string that labels the element."

View File

@ -55,7 +55,7 @@ export interface SliderProps {
/** /**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs. * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/ */
ariaLabelledBy?: string | undefined; ariaLabelledby?: string | undefined;
/** /**
* Used to define a string that labels the element. * Used to define a string that labels the element.
*/ */

View File

@ -2,11 +2,11 @@
<div :class="containerClass" @click="onBarClick"> <div :class="containerClass" @click="onBarClick">
<span class="p-slider-range" :style="rangeStyle"></span> <span class="p-slider-range" :style="rangeStyle"></span>
<span v-if="!range" class="p-slider-handle" :style="handleStyle" @touchstart="onDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event)" @keydown="onKeyDown($event)" :tabindex="tabindex" <span v-if="!range" class="p-slider-handle" :style="handleStyle" @touchstart="onDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event)" @keydown="onKeyDown($event)" :tabindex="tabindex"
role="slider" :aria-valuemin="min" :aria-valuenow="modelValue" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy" :aria-label="ariaLabel" :aria-orientation="orientation"></span> role="slider" :aria-valuemin="min" :aria-valuenow="modelValue" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
<span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @touchstart="onDragStart($event, 0)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 0)" @keydown="onKeyDown($event)" :tabindex="tabindex" <span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @touchstart="onDragStart($event, 0)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 0)" @keydown="onKeyDown($event)" :tabindex="tabindex"
role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[0] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy" :aria-label="ariaLabel" :aria-orientation="orientation"></span> role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[0] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
<span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @touchstart="onDragStart($event, 1)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 1)" @keydown="onKeyDown($event, 1)" :tabindex="tabindex" <span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @touchstart="onDragStart($event, 1)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 1)" @keydown="onKeyDown($event, 1)" :tabindex="tabindex"
role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[1] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy" :aria-label="ariaLabel" :aria-orientation="orientation"></span> role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[1] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
</div> </div>
</template> </template>
@ -44,13 +44,13 @@ export default {
}, },
tabindex: { tabindex: {
type: Number, type: Number,
default: null default: 0
}, },
ariaLabelledBy: { 'aria-labelledby': {
type: String, type: String,
default: null default: null
}, },
ariaLabel: { 'aria-label': {
type: String, type: String,
default: null default: null
} }

View File

@ -120,18 +120,6 @@ export default {
<td>number</td> <td>number</td>
<td>null</td> <td>null</td>
<td>Index of the element in tabbing order.</td> <td>Index of the element in tabbing order.</td>
</tr>
<tr>
<td>ariaLabelledBy</td>
<td>string</td>
<td>null</td>
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
</tr>
<tr>
<td>ariaLabel</td>
<td>string</td>
<td>null</td>
<td>Used to define a string that labels the element.</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>