Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve MultiSelect implementation for Accessibility #2814

Closed
12 tasks done
mertsincan opened this issue Jul 29, 2022 · 0 comments
Closed
12 tasks done

Improve MultiSelect implementation for Accessibility #2814

mertsincan opened this issue Jul 29, 2022 · 0 comments
Assignees
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA Type: Breaking Change Issue contains a breaking change related to a specific component Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Milestone

Comments

@mertsincan
Copy link
Member

mertsincan commented Jul 29, 2022

MultiSelect's codebase has been completely overhauled and is now closer to spec. In addition, some extra changes were made to the design based on user feedback.
Similar to;
https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html
https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html

Added Properties:

  • inputProps: Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component
  • panelStyle: Inline style of the overlay panel
  • panelProps: Uses to pass all properties of the HTMLDivElement to the overlay panel inside the component.
  • filterInputProps: Uses to pass all properties of the HTMLInputElement to the filter input inside the component.
  • closeButtonProps: Uses to pass all properties of the HTMLButtonElement to the clear button inside the overlay panel.
  • autoOptionFocus: Whether to focus on the first visible or selected element when the overlay panel is shown.
  • filterMessage: Text to be displayed in hidden accessible field when filtering returns any results. Defaults to value from PrimeVue locale configuration.
  • selectionMessage: Text to be displayed in hidden accessible field when options are selected. Defaults to value from PrimeVue locale configuration.
  • emptySelectionMessage: Text to be displayed in hidden accessible field when any option is not selected. Defaults to value from PrimeVue locale configuration
  • ariaLabel: Defines a string value that labels an interactive element.
  • ariaLabelledby: Identifier of the underlying input element.

Removed Properties:

  • ariaLabelledBy: Use ariaLabelledby instead
@mertsincan mertsincan added Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add Type: Breaking Change Issue contains a breaking change related to a specific component Component: Accessibility Issue or pull request is related to WCAG or ARIA labels Jul 29, 2022
@mertsincan mertsincan added this to the 3.15.1 milestone Jul 29, 2022
@mertsincan mertsincan self-assigned this Jul 29, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Accessibility Issue or pull request is related to WCAG or ARIA Type: Breaking Change Issue contains a breaking change related to a specific component Type: Enhancement Issue contains an enhancement related to a specific component. Additional functionality has been add
Projects
None yet
Development

No branches or pull requests

1 participant