Open izarutskaya opened 2 weeks ago
Triggered auto assignment to @puneetlath (Bug
), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.
We think this issue might be related to the #vip-vsb.
Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key
The option is included in disabledOptionsIndexes
if item.isDisabledCheckbox
is true but that doesn't makes sense because the item can be still clickable/selectable only checkbox should be disabled.
https://github.com/Expensify/App/blob/0f39e4370ccd84ccf7e1647b42cb505a69a2e9a3/src/components/SelectionList/BaseSelectionList.tsx#L134-L136
Remove item.isDisabledCheckbox
check.
We can highlight the admin member in group participants page with Tab key or when clicking it to open the detail and go back.
In group member/participant, the checkbox will be disabled if it's the current user, which means the item itself is still enabled, only the checkbox is disabled. https://github.com/Expensify/App/blob/0f39e4370ccd84ccf7e1647b42cb505a69a2e9a3/src/pages/ReportParticipantsPage.tsx#L94
So, we can use TAB key to focus on the item, and isItemFocused
will be true because it's not disabled.
https://github.com/Expensify/App/blob/0f39e4370ccd84ccf7e1647b42cb505a69a2e9a3/src/components/SelectionList/BaseSelectionList.tsx#L341-L342
But we can't focus on it with the arrow key because it's included in the disabledOptionsIndexes. https://github.com/Expensify/App/blob/0f39e4370ccd84ccf7e1647b42cb505a69a2e9a3/src/components/SelectionList/BaseSelectionList.tsx#L134-L136 https://github.com/Expensify/App/blob/0f39e4370ccd84ccf7e1647b42cb505a69a2e9a3/src/components/SelectionList/BaseSelectionList.tsx#L230-L233
If the expectation is to allow the user to focus on the item that only has a checkbox disabled with the arrow key, then we can either
disabledIndexes: flattenedSections.disabledOptionsIndexes.filter((index) => !flattenedSections.allOptions[index].isDisabledCheckbox),
if (!!section.isDisabled || item.isDisabled || item.isDisabledCheckbox) {
disabledOptionsIndexes.push(disabledIndex);
if (!item.isDisabledCheckbox) {
disabledArrowKeyOptionsIndexes.push(disabledIndex);
}
}
We need to keep the disabledOptionsIndexes
as is, otherwise, the select all button will be enabled even if the only member left is the admin.
If the expectation is to prevent the disabled checkbox item from being focused/highlighted, then we need to add it to the disabled condition here. https://github.com/Expensify/App/blob/0f39e4370ccd84ccf7e1647b42cb505a69a2e9a3/src/components/SelectionList/BaseSelectionList.tsx#L341-L342
const isItemFocused = (!isDisabled && !item.isDisabledCheckbox) && ...
but it will still be able to have the blue outline focus (when we use TAB) because the pressable is not disabled.
Job added to Upwork: https://www.upwork.com/jobs/~012cce511dc289f3d0
Triggered auto assignment to Contributor-plus team member for initial proposal review - @Santhosh-Sellavel (External
)
Group chat - Inconsistency with highlight of group admin row by cursor, up & down and Tab key
The BaseSelectionList
component doesn't allow the keyboard to navigate through items with a disabled checkbox
If we remove the item.isDisabledCheckbox
here the disabledOptionsIndexes will be missing one item and that will cause many regressions like when all members removed, and only admin on the list, the Select all checkbox will not be disabled.
We can add a new prop to BaseSelectionList
like shouldAllowAllKeyboardNavigation
default to false
and pass it to the page ReportParticipantsPage
When the new prop is true, we tell the useArrowKeyFocusManager
here to navigate throw all elements
const [focusedIndex, setFocusedIndex] = useArrowKeyFocusManager({
initialFocusedIndex: flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey),
maxIndex: Math.min(flattenedSections.allOptions.length - 1, CONST.MAX_OPTIONS_SELECTOR_PAGE_LENGTH * currentPage - 1),
- disabledIndexes: flattenedSections.disabledOptionsIndexes,
+ disabledIndexes: shouldAllowAllKeyboardNavigation ? [] : flattenedSections.disabledOptionsIndexes,
isActive: true,
// ...
});
In our example, we should allow the user to be able to navigate through all items, because even if some items are disabled, the user can go through the details page to see more details about their profile.
By adding this new props, we get rid of complexity and conflicts and we simply allow the keyboard to navigate throw all items.
Asked for volunteers to pick this up here
Unassigned myself due to less bandwidth
I will take over this one as C+
π£ @DylanDylann π An offer has been automatically sent to your Upwork account for the Contributor role π Thanks for contributing to the Expensify app!
Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review π§βπ» Keep in mind: Code of Conduct | Contributing π
Putting the Help Wanted
label back on. @DylanDylann is taking the C+ role, so we're still looking for a contributor.
Before evaluating proposals, we need to confirm the expectation first with @Expensify/design
In here, If we click enter, the detail member will open On the other hand, If we click the tab key one more time, the checkbox will be focused
Here, if we click enter, the checkbox will be selected
IMO, the current behavior is correct
Here, If we click enter, the detail member will open. If we click the down/up key one more time, the App will focus on the next member border (If the next member border is admin, we will skip it and go to the next item)
https://github.com/Expensify/App/assets/141406735/1844219c-bb62-4a53-8bdb-9f0b661cb7e1
IMO, with the current behavior, when clicking up/down key we shouldn't skip the admin member because we allow user to open the detail page of the admin
Tab navigation will be handled here https://github.com/Expensify/App/issues/36476 I think we should focus on arrow keys.
IMO, with the current behavior, when clicking up/down key we shouldn't skip the admin member because we allow user to open the detail page of the admin
I agree with this. I would expect to be able to arrow through the list and hit enter to open each member's profile.
@Krishna2323 Your proposal will make the select all button break
@dragnoir When we pass an empty array to disabledIndexes, we miss the disabled item (section.isDisabled || item.isDisabled
)
I like @bernhardoj's solution 2. Let's go with them
πππ C+ reviewed
Current assignee @puneetlath is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.
π£ @bernhardoj π An offer has been automatically sent to your Upwork account for the Contributor role π Thanks for contributing to the Expensify app!
Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review π§βπ» Keep in mind: Code of Conduct | Contributing π
PR is ready
cc: @DylanDylann
If you havenβt already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!
Version Number: 1.4.70-0 Reproducible in staging?: Y Reproducible in production?: Y Logs: https://stackoverflow.com/c/expensify/questions/4856 Issue reported by: Applause-Internal team
Action Performed:
Expected Result:
There should be consistency in whether group admin row can be highlighted.
Actual Result:
In Step 4, group admin cannot be selected and highlighted by keyboard up and down key. In Step 7, when clicking on the group admin with cursor, the group admin is selected and highlighted. In Step 9, with Tab key, group admin can be selected and highlighted.
Workaround:
Unknown
Platforms:
Which of our officially supported platforms is this issue occurring on?
Screenshots/Videos
https://github.com/Expensify/App/assets/115492554/9514b9db-16f3-46a8-bed9-080ac3daa111
View all open jobs on GitHub
Upwork Automation - Do Not Edit
Issue Owner
Current Issue Owner: @Santhosh-Sellavel