vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

aria-labelledby and aria-label props added

pull/2809/head
Tuğçe Küçükoğlu 2022-07-27 11:47:12 +03:00
parent ae30c8ffa8
commit 96f6fc9d82
13 changed files with 107 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
api-generator/components/chips.js
View File

@ -52,18 +52,6 @@ const ChipsProps = [
type: "any",
default: "null",
description: "Inline style of the input field."
},
{
name: "'aria-labelledby'",
type: "string",
default: "null",
description: "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
},
{
name: "'aria-label'",
type: "string",
default: "null",
description: "Establishes a string value that labels the component."
}
];

11
src/components/calendar/Calendar.d.ts vendored
View File

@ -263,13 +263,18 @@ export interface CalendarProps {
*
*/
inputProps?: object | undefined;
/**
* Unique identifier of the element.
*/
/**
*
*/
panelProps?: object | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
'aria-labelledby'?: string | undefined;
/**
* Establishes a string value that labels the component.
*/
'aria-label'?: string | undefined;
}
export interface CalendarSlots {

10
src/components/calendar/Calendar.vue
View File

@ -1,7 +1,7 @@
<template>
<span ref="container" :id="id" :class="containerClass">
<input :ref="inputRef" v-if="!inline" type="text" role="combobox" :id="inputId" :class="['p-inputtext p-component', inputClass]" :style="inputStyle"
aria-autocomplete="none" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId" inputmode="none"
aria-autocomplete="none" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" inputmode="none"
@input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :readonly="!manualInput" v-bind="inputProps">
<CalendarButton v-if="showIcon" :icon="icon" class="p-datepicker-trigger" :disabled="disabled" @click="onButtonClick" type="button" :aria-label="$primevue.config.locale.chooseDate" aria-haspopup="dialog" :aria-expanded="overlayVisible" :aria-controls="panelId"/>
<Portal :appendTo="appendTo" :disabled="inline">
@ -325,6 +325,14 @@ export default {
readonly: {
type: Boolean,
default: false
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
navigationState: null,

9
src/components/cascadeselect/CascadeSelect.d.ts vendored
View File

@ -109,6 +109,15 @@ export interface CascadeSelectProps {
*
*/
panelProps?: object | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
'aria-labelledby'?: string | undefined;
/**
* Establishes a string value that labels the component.
*/
'aria-label'?: string | undefined;
}
export interface CascadeSelectSlots {

12
src/components/cascadeselect/CascadeSelect.vue
View File

@ -1,8 +1,8 @@
<template>
<div ref="container" :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="focusInput" role="combobox" type="text" :id="inputId" :class="inputClass" :style="inputStyle" readonly :disabled="disabled" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" :tabindex="tabindex"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="listId" v-bind="inputProps" />
<input ref="focusInput" role="combobox" type="text" :id="inputId" :class="inputClass" :style="inputStyle" readonly :disabled="disabled" :tabindex="tabindex" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
aria-haspopup="listbox" :aria-expanded="overlayVisible" :aria-controls="listId" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" v-bind="inputProps" />
</div>
<span :class="labelClass">
<slot name="value" :value="modelValue" :placeholder="placeholder">
@ -75,6 +75,14 @@ export default {
inputProps: null,
panelClass: null,
panelProps: null,
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
outsideClickListener: null,
scrollHandler: null,

8
src/components/inputnumber/InputNumber.d.ts vendored
View File

@ -153,6 +153,14 @@ export interface InputNumberProps {
*
*/
inputProps?: object | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
'aria-labelledby'?: string | undefined;
/**
* Establishes a string value that labels the component.
*/
'aria-label'?: string | undefined;
}
export interface InputNumberSlots {

12
src/components/inputnumber/InputNumber.vue
View File

@ -1,6 +1,6 @@
<template>
<span :class="containerClass">
<INInputText ref="input" class="p-inputnumber-input" role="spinbutton" :id="inputId" :class="inputClass" :style="inputStyle" :value="formattedValue" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="modelValue" :readonly="readonly"
<INInputText ref="input" class="p-inputnumber-input" role="spinbutton" :id="inputId" :class="inputClass" :style="inputStyle" :value="formattedValue" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="modelValue" :readonly="readonly" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
@input="onUserInput" @keydown="onInputKeyDown" @keypress="onInputKeyPress" @paste="onPaste" @click="onInputClick" @focus="onInputFocus" @blur="onInputBlur" v-bind="inputProps"/>
<span class="p-inputnumber-button-group" v-if="showButtons && buttonLayout === 'stacked'">
<INButton :class="upButtonClass" :icon="incrementButtonIcon" v-on="upButtonListeners" :disabled="disabled" v-bind="incrementButtonProps" />
@ -120,7 +120,15 @@ export default {
inputStyle: null,
inputProps: null,
incrementButtonProps: null,
decrementButtonProps: null
decrementButtonProps: null,
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
numberFormat: null,
_numeral: null,

8
src/components/inputswitch/InputSwitch.d.ts vendored
View File

@ -29,6 +29,14 @@ export interface InputSwitchProps {
*
*/
inputProps?: object | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
'aria-labelledby'?: string | undefined;
/**
* Establishes a string value that labels the component.
*/
'aria-label'?: string | undefined;
}
export interface InputSwitchSlots {

12
src/components/inputswitch/InputSwitch.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input :id="inputId" ref="input" type="checkbox" role="switch" :class="inputClass" :style="inputStyle" :checked="checked" :disabled="disabled"
<input :id="inputId" ref="input" type="checkbox" role="switch" :class="inputClass" :style="inputStyle" :checked="checked" :disabled="disabled" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel"
@focus="onFocus($event)" @blur="onBlur($event)" v-bind="inputProps">
</div>
<span class="p-inputswitch-slider"></span>
@ -32,7 +32,15 @@ export default {
inputId: null,
inputClass: null,
inputStyle: null,
inputProps: null
inputProps: null,
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
data() {
return {

8
src/components/password/Password.d.ts vendored
View File

@ -75,6 +75,14 @@ export interface PasswordProps extends InputHTMLAttributes {
* Style class of the overlay panel.
*/
panelClass?: any | undefined;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
'aria-labelledby'?: string | undefined;
/**
* Establishes a string value that labels the component.
*/
'aria-label'?: string | undefined;
}
export interface PasswordSlots {

12
src/components/password/Password.vue
View File

@ -1,6 +1,6 @@
<template>
<div :class="containerClass">
<PInputText ref="input" :id="inputId" :type="inputType" :class="inputClass" :style="inputStyle" :value="modelValue" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="inputProps" />
<PInputText ref="input" :id="inputId" :type="inputType" :class="inputClass" :style="inputStyle" :value="modelValue" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @input="onInput" @focus="onFocus" @blur="onBlur" @keyup="onKeyUp" v-bind="inputProps" />
<i v-if="toggleMask" :class="toggleIconClass" @click="onMaskToggle" />
<span class="p-hidden-accessible" aria-live="polite">
{{infoText}}
@ -88,7 +88,15 @@ export default {
},
inputClass: null,
inputStyle: null,
inputProps: null
inputProps: null,
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
data() {
return {

8
src/components/radiobutton/RadioButton.d.ts vendored
View File

@ -17,6 +17,14 @@ export interface RadioButtonProps {
* Inline style of the component.
*/
style?: any;
/**
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
*/
'aria-labelledby'?: string | undefined;
/**
* Establishes a string value that labels the component.
*/
'aria-label'?: string | undefined;
}
export interface RadioButtonSlots {

10
src/components/radiobutton/RadioButton.vue
View File

@ -1,7 +1,7 @@
<template>
<div :class="containerClass" @click="onClick($event)">
<div class="p-hidden-accessible">
<input ref="input" type="radio" :id="inputId" :name="name" :checked="checked" :disabled="disabled" :value="value" @focus="onFocus" @blur="onBlur" v-bind="inputProps">
<input ref="input" type="radio" :id="inputId" :name="name" :checked="checked" :disabled="disabled" :value="value" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @focus="onFocus" @blur="onBlur" v-bind="inputProps">
</div>
<div ref="box" :class="['p-radiobutton-box', {'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused}]">
<div class="p-radiobutton-icon"></div>
@ -34,6 +34,14 @@ export default {
type: String,
default: null
},
'aria-labelledby': {
type: String,
default: null
},
'aria-label': {
type: String,
default: null
}
},
data() {
return {