mirror of
https://github.com/primefaces/primevue.git
synced 2025-05-09 00:42:36 +00:00
Fixed #2814 - Improve MultiSelect implementation for Accessibility
This commit is contained in:
mertsincan
parent
9155e9e0c7
commit
7f446cf360
4 changed files with 1327 additions and 560 deletions
|
|
@ -47,6 +47,66 @@ const MultiSelectProps = [
|
|||
default: "200px",
|
||||
description: "Height of the viewport, a scrollbar is defined if height of list exceeds this value."
|
||||
},
|
||||
{
|
||||
name: "placeholder",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Label to display when there are no selections."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "When present, it specifies that the component should be disabled."
|
||||
},
|
||||
{
|
||||
name: "inputId",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Identifier of the underlying input element."
|
||||
},
|
||||
{
|
||||
name: "inputProps",
|
||||
type: "object",
|
||||
default: "null",
|
||||
description: "Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component."
|
||||
},
|
||||
{
|
||||
name: "panelStyle",
|
||||
type: "object",
|
||||
default: "null",
|
||||
description: "Inline style of the overlay panel."
|
||||
},
|
||||
{
|
||||
name: "panelClass",
|
||||
type: "string",
|
||||
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."
|
||||
},
|
||||
{
|
||||
name: "filterInputProps",
|
||||
type: "object",
|
||||
default: "null",
|
||||
description: "Uses to pass all properties of the HTMLInputElement to the filter input inside the overlay panel."
|
||||
},
|
||||
{
|
||||
name: "closeButtonProps",
|
||||
type: "object",
|
||||
default: "null",
|
||||
description: "Uses to pass all properties of the HTMLButtonElement to the close button inside the overlay panel."
|
||||
},
|
||||
{
|
||||
name: "dataKey",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "A property to uniquely identify an option."
|
||||
},
|
||||
{
|
||||
name: "filter",
|
||||
type: "boolean",
|
||||
|
|
@ -78,52 +138,10 @@ const MultiSelectProps = [
|
|||
description: "Fields used when filtering the options, defaults to optionLabel."
|
||||
},
|
||||
{
|
||||
name: "placeholder",
|
||||
name: "appendTo",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Label to display when there are no selections."
|
||||
},
|
||||
{
|
||||
name: "disabled",
|
||||
type: "boolean",
|
||||
default: "false",
|
||||
description: "When present, it specifies that the component should be disabled."
|
||||
},
|
||||
{
|
||||
name: "tabindex",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Index of the element in tabbing order."
|
||||
},
|
||||
{
|
||||
name: "inputId",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "Identifier of the underlying input element."
|
||||
},
|
||||
{
|
||||
name: "dataKey",
|
||||
type: "string",
|
||||
default: "null",
|
||||
description: "A property to uniquely identify an option."
|
||||
},
|
||||
{
|
||||
name: "ariaLabelledBy",
|
||||
type: "string",
|
||||
default: "null",
|
||||
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: "emptyFilterMessage",
|
||||
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: "emptyMessage",
|
||||
type: "string",
|
||||
default: "No results found",
|
||||
description: "Text to display when there are no options available. Defaults to value from PrimeVue locale configuration."
|
||||
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: "display",
|
||||
|
|
@ -132,10 +150,16 @@ const MultiSelectProps = [
|
|||
description: 'Defines how the selected items are displayed, valid values are "comma" and "chip".'
|
||||
},
|
||||
{
|
||||
name: "panelClass",
|
||||
name: "selectedItemsLabel",
|
||||
type: "string",
|
||||
default: "{0} items selected",
|
||||
description: "Label to display after exceeding max selected labels."
|
||||
},
|
||||
{
|
||||
name: "maxSelectedLabels",
|
||||
type: "number",
|
||||
default: "null",
|
||||
description: "Style class of the overlay panel."
|
||||
description: "Decides how many selected item labels to show at most."
|
||||
},
|
||||
{
|
||||
name: "selectionLimit",
|
||||
|
|
@ -161,18 +185,6 @@ const MultiSelectProps = [
|
|||
default: "pi pi-spinner pi-spin",
|
||||
description: "Icon to display in loading state."
|
||||
},
|
||||
{
|
||||
name: "maxSelectedLabels",
|
||||
type: "number",
|
||||
default: "null",
|
||||
description: "Decides how many selected item labels to show at most."
|
||||
},
|
||||
{
|
||||
name: "selectedItemsLabel",
|
||||
type: "string",
|
||||
default: "{0} items selected",
|
||||
description: "Label to display after exceeding max selected labels."
|
||||
},
|
||||
{
|
||||
name: "selectAll",
|
||||
type: "boolean",
|
||||
|
|
@ -191,6 +203,60 @@ const MultiSelectProps = [
|
|||
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: "filterMessage",
|
||||
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: "emptyFilterMessage",
|
||||
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: "emptyMessage",
|
||||
type: "string",
|
||||
default: "No results found",
|
||||
description: "Text to display when there are no options available. Defaults to value from PrimeVue locale configuration."
|
||||
},
|
||||
{
|
||||
name: "tabindex",
|
||||
type: "number",
|
||||
default: "null",
|
||||
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 MultiSelectEvents = [
|
||||
|
|
@ -210,6 +276,28 @@ const MultiSelectEvents = [
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
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"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: "before-show",
|
||||
description: "Callback to invoke before the overlay is shown."
|
||||
|
|
@ -261,18 +349,18 @@ const MultiSelectEvents = [
|
|||
];
|
||||
|
||||
const MultiSelectSlots = [
|
||||
{
|
||||
name: "option",
|
||||
description: "Custom content for the item's option"
|
||||
},
|
||||
{
|
||||
name: "optiongroup",
|
||||
description: "Custom content for the item's optiongroup"
|
||||
},
|
||||
{
|
||||
name: "value",
|
||||
description: "Custom content for the item value"
|
||||
},
|
||||
{
|
||||
name: "chip",
|
||||
description: "Custom content for the chip display."
|
||||
},
|
||||
{
|
||||
name: "indicator",
|
||||
description: "Custom content for the dropdown indicator"
|
||||
},
|
||||
{
|
||||
name: "header",
|
||||
description: "Custom content for the component's header"
|
||||
|
|
@ -281,6 +369,14 @@ const MultiSelectSlots = [
|
|||
name: "footer",
|
||||
description: "Custom content for the component's footer"
|
||||
},
|
||||
{
|
||||
name: "option",
|
||||
description: "Custom content for the item's option"
|
||||
},
|
||||
{
|
||||
name: "optiongroup",
|
||||
description: "Custom content for the item's optiongroup"
|
||||
},
|
||||
{
|
||||
name: "emptyfilter",
|
||||
description: "Custom content when there is no filtered data to display"
|
||||
|
|
@ -289,10 +385,6 @@ const MultiSelectSlots = [
|
|||
name: "empty",
|
||||
description: "Custom content when there is no data to display"
|
||||
},
|
||||
{
|
||||
name: "chip",
|
||||
description: "Custom content for the chip display."
|
||||
},
|
||||
{
|
||||
name: "content",
|
||||
description: "Custom content for the virtual scroller"
|
||||
|
|
@ -300,10 +392,6 @@ const MultiSelectSlots = [
|
|||
{
|
||||
name: "loader",
|
||||
description: "Custom content for the virtual scroller loader items"
|
||||
},
|
||||
{
|
||||
name: "indicator",
|
||||
description: "Custom content for the dropdown indicator"
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue