We’ve added additional WCAG support to improve accessibility.
Pagination Controls Work with Keyboard Enter
We have added support so that when users tab through pagination, they can hit ‘enter’ to activate the controls and go to said control’s page.
Upgrade Implications:
If you wrote a custom pagination component, you will need to update it with the latest changes.
Navigation Incorporates aria-current
We have added aria-current="page" to the current tab since the link to the current page is indicated visually.
Upgrade Implications:
If you wrote a custom template for the navigation component, you will need to update it with the latest changes.
Updated Hover Color on Search Bar
The hover color of the search bar has been updated so that the clear button and search bar icon have clear focus states. In the answers-variables.scss file, the variable --yxt-searchbar-button-background-color was updated to #e9e9e9.
Upgrade Implications:
If you want this update, you’ll need to set the --yxt-searchbar-button-background-color-hover variable in answers.scss to #e9e9e9 instead of white.
Improved Screen Reader Support for the Search Bar
We have added additional WCAG support to the search bar for screen readers:
- When someone focuses on the search bar, the screen reader will say: “When autocomplete results are available, use up and down arrows to review and enter to select.”
- Screen readers should also read out the number of autocomplete options available, such as “five autocomplete suggestions”.
Upgrade Implications:
If you wrote a custom template for the search bar component (or autocomplete or filtersearch), you’ll need to update it with the latest changes.
AutoComplete aria-live Label Present on Page Load
We have moved aria-live wrappers to be present on page load for screen readers to announce the number of results even with empty content.
Upgrade Implications:
If you wrote a custom template for the search bar component (or autocomplete or filtersearch), you’ll need to update it with the latest changes.
AutoComplete Incorporates aria-activedescendant
We have added WCAG support so that as the user traverses autocomplete options, the id of the currently highlighted option is referenced by aria-activedescendant on the text field.
Upgrade Implications:
If you wrote a custom template for the search bar component (or autocomplete or filtersearch) , you’ll need to update it with the latest changes.