Skip to content

Conversation

taysea
Copy link
Collaborator

@taysea taysea commented Aug 18, 2022

What does this PR do?

  • Fixes Select so that when clear is used, all Select options still render (original issue filed)
  • Improves accessibility behavior of clear button by:
    • Moving ClearButton outside of the options box (clear button is not an option)
    • Improving styling of focused element to apply hover treatment (since focusIndicator={false}) so that keyboard user can track where the active element is
    • Enhanced a11yTitle of Clear Button

To Do:

  • Enhance testing suite to improve "Clear" tests (I have made some enhancements but commented them out due to a timeout error I was receiving)

User should be able to tab to the "Clear Selection" button if it is at the bottom.

In this video, I open the select with "space", use down arrow to move through the options, "enter" to select options", then "tab" to tab through the select options and get to "Clear Selection". I am using VoiceOver on Mac.

clear-bottom.mov

Where should the reviewer start?

SelectContainer

What testing has been done on this PR?

Using Clear story.

How should this be manually tested?

Use Clear story.

Do Jest tests follow these best practices?

  • screen is used for querying.
  • The correct query is used. (Refer to this list of queries)
  • userEvent is used in place of fireEvent. (userEvent was causing timeout, used fireEvent)
  • asFragment() is used for snapshot testing.

Any background context you want to provide?

What are the relevant issues?

Closes #6267

Screenshots (if appropriate)

Do the grommet docs need to be updated?

No.

Should this PR be mentioned in the release notes?

Yes. Fixed clear bug where not all Select options would render.

Is this change backwards compatible or is it a breaking change?

Backwards compatible.

@taysea taysea requested review from halocline and jcfilben August 18, 2022 23:59
Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be nice if once the clear button receives focus to set the activeIndex to -1 so that we don't have the situation shown below where focus is on the clear button but the "Number One" option still has active styling.
Screen Shot 2022-08-19 at 9 48 44 AM

@taysea taysea requested a review from jcfilben August 19, 2022 17:55
Copy link
Collaborator

@jcfilben jcfilben left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! I looked into the tests you added and was getting the same issue where the tests were timing out. I tried switching from userEvent to fireEvent and that seemed to solve the issue. Occasionally I've run across some cases where userEvent doesn't work as expected or affects the timing, so sometimes fireEvent is needed instead

Copy link
Collaborator

@halocline halocline left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good. Just a couple polishing items.

taysea and others added 2 commits August 19, 2022 15:38
Co-authored-by: Matthew Glissmann <mdglissmann@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Select dropdown is not allowing to scroll all the options when clear selection is enabled.
4 participants