mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 08:52:34 +00:00
Fixed #2822 - Improve AutoComplete implementation for Accessibility
This commit is contained in:
mertsincan
parent
31148c1a9a
commit
61f50c897e
3 changed files with 980 additions and 418 deletions
|
|
@ -17,6 +17,18 @@ const AutoCompleteProps = [
|
|||
default: "null",
|
||||
description: "Property name or getter function of a suggested object to resolve and display."
|
||||
},
|
||||
{
|
||||
name: "optionLabel",
|
||||
type: "string | function",
|
||||
default: "null",
|
||||
description: "Property name or getter function to use as the label of an option."
|
||||
},
|
||||
{
|
||||
name: "optionDisabled",
|
||||
type: "boolean",
|
||||
default: "null",
|
||||
description: "Property name or getter function to use as the disabled flag of an option, defaults to false when not defined."
|
||||
},
|
||||
{
|
||||
name: "optionGroupLabel",
|
||||
type: "string",
|
||||
|
|
@ -59,18 +71,30 @@ const AutoCompleteProps = [
|
|||
default: "false",
|
||||
description: "Specifies if multiple values can be selected."
|
||||
},
|
||||
{
|
||||
name: "placeholder",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Default text to display when no option is selected."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "When present, it specifies that the component should be disabled."
|
||||
},
|
||||
{
|
||||
name: "dataKey",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "A property to uniquely identify an option."
|
||||
},
|
||||
{
|
||||
name: "minLength",
|
||||
type: "number",
|
||||
default: "1",
|
||||
description: "Minimum number of characters to initiate a search."
|
||||
},
|
||||
{
|
||||
name: "completeOnFocus",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "Whether to run a query when input receives focus."
|
||||
},
|
||||
{
|
||||
name: "delay",
|
||||
type: "number",
|
||||
|
|
@ -83,9 +107,27 @@ const AutoCompleteProps = [
|
|||
default: "body",
|
||||
description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are "body" for document body and "self" for the element itself.'
|
||||
},
|
||||
{
|
||||
name: "forceSelection",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions."
|
||||
},
|
||||
{
|
||||
name: "completeOnFocus",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "Whether to run a query when input receives focus."
|
||||
},
|
||||
{
|
||||
name: "inputId",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Identifier of the underlying input element."
|
||||
},
|
||||
{
|
||||
name: "inputStyle",
|
||||
type: "any",
|
||||
type: "object",
|
||||
default: "null",
|
||||
description: "Inline style of the input field."
|
||||
},
|
||||
|
|
@ -96,22 +138,16 @@ const AutoCompleteProps = [
|
|||
description: "Style class of the input field."
|
||||
},
|
||||
{
|
||||
name: "forceSelection",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "When present, autocomplete clears the manual input if it does not match of the suggestions to force only accepting values from the suggestions."
|
||||
name: "inputProps",
|
||||
type: "object",
|
||||
default: "null",
|
||||
description: "Uses to pass all properties of the HTMLInputElement/HTMLSpanElement to the focusable input element inside the component."
|
||||
},
|
||||
{
|
||||
name: "class",
|
||||
type: "string",
|
||||
name: "panelStyle",
|
||||
type: "object",
|
||||
default: "null",
|
||||
description: "Style class of the component."
|
||||
},
|
||||
{
|
||||
name: "style",
|
||||
type: "any",
|
||||
default: "null",
|
||||
description: "Inline of the component."
|
||||
description: "Inline style of the overlay panel."
|
||||
},
|
||||
{
|
||||
name: "panelClass",
|
||||
|
|
@ -119,6 +155,12 @@ const AutoCompleteProps = [
|
|||
default: "null",
|
||||
description: "Style class of the overlay panel."
|
||||
},
|
||||
{
|
||||
name: "panelProps",
|
||||
type: "object",
|
||||
default: "null",
|
||||
description: "Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component."
|
||||
},
|
||||
{
|
||||
name: "loadingIcon",
|
||||
type: "string",
|
||||
|
|
@ -130,23 +172,99 @@ const AutoCompleteProps = [
|
|||
type: "object",
|
||||
default: "null",
|
||||
description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
|
||||
},
|
||||
{
|
||||
name: "autoOptionFocus",
|
||||
type: "boolean",
|
||||
default: "true",
|
||||
description: "Whether to focus on the first visible or selected element when the overlay panel is shown."
|
||||
},
|
||||
{
|
||||
name: "searchLocale",
|
||||
type: "string",
|
||||
default: "undefined",
|
||||
description: "Locale to use in searching. The default locale is the host environment's current locale."
|
||||
},
|
||||
{
|
||||
name: "searchMessage",
|
||||
type: "string",
|
||||
default: "{0} results are available",
|
||||
description: "Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration."
|
||||
},
|
||||
{
|
||||
name: "selectionMessage",
|
||||
type: "string",
|
||||
default: "{0} items selected",
|
||||
description: "Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration."
|
||||
},
|
||||
{
|
||||
name: "emptySelectionMessage",
|
||||
type: "string",
|
||||
default: "No selected item",
|
||||
description: "Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration."
|
||||
},
|
||||
{
|
||||
name: "emptySearchMessage",
|
||||
type: "string",
|
||||
default: "No results found",
|
||||
description: "Text to display when filtering does not return any results. Defaults to value from PrimeVue locale configuration."
|
||||
},
|
||||
{
|
||||
name: "tabindex",
|
||||
type: "number",
|
||||
default: "0",
|
||||
description: "Index of the element in tabbing order."
|
||||
},
|
||||
{
|
||||
name: "ariaLabel",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Defines a string value that labels an interactive element."
|
||||
},
|
||||
{
|
||||
name: "ariaLabelledby",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Identifier of the underlying input element."
|
||||
}
|
||||
];
|
||||
|
||||
const AutoCompleteEvents = [
|
||||
{
|
||||
name: "complete",
|
||||
description: "Callback to invoke to search for suggestions.",
|
||||
name: "change",
|
||||
description: "Callback to invoke on value change.",
|
||||
arguments: [
|
||||
{
|
||||
name: "originalEvent",
|
||||
name: "event.originalEvent",
|
||||
type: "object",
|
||||
description: "Original event"
|
||||
description: "Browser event"
|
||||
},
|
||||
{
|
||||
name: "query",
|
||||
name: "event.value",
|
||||
type: "string",
|
||||
description: "Value to search with"
|
||||
description: "Selected option value"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "focus",
|
||||
description: "Callback to invoke when component receives focus.",
|
||||
arguments: [
|
||||
{
|
||||
name: "event",
|
||||
type: "object",
|
||||
description: "Browser event"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "blur",
|
||||
description: "Callback to invoke when component loses focus.",
|
||||
arguments: [
|
||||
{
|
||||
name: "event",
|
||||
type: "object",
|
||||
description: "Browser event"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
@ -201,17 +319,45 @@ const AutoCompleteEvents = [
|
|||
{
|
||||
name: "clear",
|
||||
description: "Callback to invoke when input is cleared by the user."
|
||||
},
|
||||
{
|
||||
name: "complete",
|
||||
description: "Callback to invoke to search for suggestions.",
|
||||
arguments: [
|
||||
{
|
||||
name: "originalEvent",
|
||||
type: "object",
|
||||
description: "Original event"
|
||||
},
|
||||
{
|
||||
name: "query",
|
||||
type: "string",
|
||||
description: "Value to search with"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "before-show",
|
||||
description: "Callback to invoke before the overlay is shown."
|
||||
},
|
||||
{
|
||||
name: "before-hide",
|
||||
description: "Callback to invoke before the overlay is hidden."
|
||||
},
|
||||
{
|
||||
name: "show",
|
||||
description: "Callback to invoke when the overlay is shown."
|
||||
},
|
||||
{
|
||||
name: "hide",
|
||||
description: "Callback to invoke when the overlay is hidden."
|
||||
}
|
||||
];
|
||||
|
||||
const AutoCompleteSlots = [
|
||||
{
|
||||
name: "item",
|
||||
description: "Custom content for the item."
|
||||
},
|
||||
{
|
||||
name: "optiongroup",
|
||||
description: "Custom content for the optiongroup item."
|
||||
name: "chip",
|
||||
description: "Custom content for the chip display."
|
||||
},
|
||||
{
|
||||
name: "header",
|
||||
|
|
@ -222,8 +368,16 @@ const AutoCompleteSlots = [
|
|||
description: "Custom content for the component footer."
|
||||
},
|
||||
{
|
||||
name: "chip",
|
||||
description: "Custom content for the chip display."
|
||||
name: "item",
|
||||
description: "Custom content for the item."
|
||||
},
|
||||
{
|
||||
name: "option",
|
||||
description: "Custom content for the item."
|
||||
},
|
||||
{
|
||||
name: "optiongroup",
|
||||
description: "Custom content for the optiongroup item."
|
||||
},
|
||||
{
|
||||
name: "content",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue