Skip to content

List items are not showing selection highlight color #605

@tom-un

Description

@tom-un

Issue

When using keyboard navigation, Lists can be tabbed to and then the arrow keys can be used to move up and down through the items in the list. The return key will press the item.

In previous versions of react-native-macos, the currently selected row in a list would render with the system's accent color. In the current version, no background color changes at all. So although the keyboard gestures work, the user is "flying blind"

Steps to Reproduce

  1. Ensure that keyboard navigation is enabled in System Preferences > Keyboard > Shortcuts > "Use keyboard navigation to move focus between controls"
  2. Run RNTester
  3. Press tab until the List is selected (no visual indicator that it is selected will appear)
  4. Press down arrow a few times
  5. Press Return

Expected Behavior

When the List becomes first responder, the first row in the list should highlight with the system accent color. When pressing the down arrow key, the highlighted row should change.

Actual Behavior

Although rows in the List are invisibly changing selection, there is no visual feedback that this happening.

Reproducible Demo

ezgif com-gif-maker

I found this issue while testing PR #603. FYI: @alloy , @HeyImChris , and @tido64

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions