$500 - Audit forms and fix inconsistencies with focus, tab and shift + tab behavior 4/4

[dylanexpensify]

We should audit all our forms and fix any inconsistencies with focus, tab, shift + tab and enter behavior. The expected behavior is as follows:

1. Tab navigates to the next input.
2. Shift + tab navigates to the previous input.
3. Enter submits the form.
4. Space toggles checkboxes/dropdowns.

Note: We should make sure that tabbing cycles through the form in an order that makes sense, usually top to bottom.

Here's a list of forms to be audited:

• Add Personal Bank account flow
• Settings - Change Password
• Settings - Profile
• Login form
• Request a Call modal

[MelvinBot]

Triggered auto assignment to @MitchExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[MelvinBot]

Triggered auto assignment to @MonilBhavsar (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[dylanexpensify]

Note: decision to split this main issue up into smaller issues came from this convo

[MitchExpensify]

How does that change the normal contributor management process @dylanexpensify ? Thanks

[MelvinBot]

@MonilBhavsar, @MitchExpensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[MitchExpensify]

Bumping the above @dylanexpensify

[dylanexpensify]

Ah, we basically decided to break the issues into four smaller issues since we weren't sure about milestones. So now just proceed as normal, posting onto Upwork, adding exported, etc!

[MonilBhavsar]

Is this a part of "New Expensify forms"?

[MitchExpensify]

Upwork Job

[MelvinBot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)

[MelvinBot]

Triggered auto assignment to @pecanoro (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[mdneyazahmad]

Proposal

I will wrap each modal page in FocusTrap component such that when modal opens. It does not focus elements outside of modal. And store the reference of last element clicked to open the modal so that when modal closes it focus on that element. And of course audit and fix inconsistency.

I did it only for the ProfilePage Here is the implementation of FocusTrap Component Wrapper.

import React, {useRef, useEffect} from 'react';
import {View} from 'react-native';
import PropTypes from 'prop-types';
import FocusTrapLib from 'focus-trap-react';

import { useIsFocused } from '@react-navigation/native';

const propTypes = {
    children: PropTypes.node.isRequired,
};


function FocusTrap(props) {
    const isFocused = useIsFocused();
    const lastFocusedElement = useRef(null);

    useEffect(() => {
        if(isFocused) {
            lastFocusedElement.current = document.activeElement;
            return;
        }

        if(lastFocusedElement.current) {
            lastFocusedElement.current.focus();
        }

    }, [isFocused]);

    return (
        <FocusTrapLib active={isFocused}>
            <View>
                {props.children}
            </View>
        </FocusTrapLib>
    );
}

FocusTrap.propTypes = propTypes;
FocusTrap.displayName = 'FocusTrap';

export default FocusTrap;

Result

Screen.Recording.2022-03-10.at.1.13.53.AM.mov

[mdneyazahmad]

This is not the final code there will be some refactoring. This is the base minimum to propose a solution. And also every other components will be refactored the same way.

[pecanoro]

@mdneyazahmad what's the last update on this?

[mdneyazahmad]

@pecanoro waiting on #12370. This will be merged soon, then we can work this issue. Thanks!

[JmillsExpensify]

Still working on the linked PR, though in any case, I don't think this is a focus for WAQ per this Slack thread. Adding a hold as a result.

[pecanoro]

Still on HOLD

[JmillsExpensify]

Taking this off hold.

[JmillsExpensify]

Note: Now that this is off hold, I think we have a decision before us. Do we do anything at all? I actually vote no, we shouldn't. I still don't think keyboard navigation is a priority – including but not limited to tab, shift + tab, etc. – so better to close this issue and move on. Please let me know if I'm missing something!

[luacmartins]

I think that's reasonable to me. The pages in this issue have either already changed (Settings - Profile) or will be changed significantly as part of passwordless (Settings - Change Password, Login form), which would leave us with:

• Request a Call modal - seems to work fine and I didn't see any issues with focus, tab and shift + tab behavior
• Add Personal Bank account flow - most of the flow is handled by Plaid, we only have a dropdown in our App. I didn't see any issues here either.

With that in mind, I think we might be good to close this one out!

[MitchExpensify]

Agree with closing for all the reasons stated above!

[JmillsExpensify]

Thanks for hearing me out!

[mdneyazahmad]

I have been assigned to this issue a long time ago, and have been constantly working on it. As this is a part of a larger issue broken into 4. I am assigned 3 of these including this. There are some challenges to fix the issues, and there have been some discussions in the past that took a long time. There are two PR raised that fixes this issue #8874 and #12370. I think contributor involved in this issue should be paid. Thank you!

[parasharrajat]

Payment for this issue is still pending. There was multiple PR involved for these issues titled Audit forms and fix inconsistencies with focus, tab, and shift + tab behavior. I agree with @mdneyazahmad that a lot of research and time was spent on finding these solutions.

[pecanoro]

@MitchExpensify Can you open an internal discussion about the above in Slack? 🙇‍♀️

[MitchExpensify]

Ok to summarize how this played out to make sure I'm following:

Audit form inconsistencies were broken into four issue:

1. Audit forms and fix inconsistencies with focus, tab and shift + tab behavior 1/4
2. Audit forms and fix inconsistencies with focus, tab and shift + tab behavior 2/4
3. Audit forms and fix inconsistencies with focus, tab and shift + tab behavior 3/4
4. Audit forms and fix inconsistencies with focus, tab and shift + tab behavior 4/4

@mdneyazahmad is assigned to 2, 3, & 4 and received/will be receiving compensation for 2 & 3. With regards to compensation for 4 (this issue): We ultimately decided to do nothing but work was completed (e.g. #8874 and #12370) that fixed inconsistencies flagged in the issue. As such, and for the work throughout being assigned to this issue, we need to agree on a fair figure.

Does that summarize where we're at? Just want to be sure we're on the same page before posting in Slack to land on the fair figure

[mdneyazahmad]

@MitchExpensify first of all all of these issues are of similar nature, maybe there was not require to break into 4, but it was broken into 4 to keep it simple.

1. As these are different issue, I think the price should not be adjusted with others otherwise no need to break.
2. As you can see the amount paid for 2/4 is just 250, but @parasharrajat better knows the effort and time required to complete that issue. Still I did not ask for a raise, because I thought, I can adjust with others.
3. The task required to do in this issue is to audit and fix any inconsistency. I have done the audit in the past. As these issues are similar. It has has to wait for the common PR. I would have started the 1st PR from any issue. But I thought 2/4 was little easy, therefore PR primarily addresses that issue.
4. We can also keep in mind the time this issues take.

I think the original price for this issue is justified. Maybe @parasharrajat has some input.

Thank you

[parasharrajat]

I definitely agree with @mdneyazahmad. Technically, no PR was done for #7917 but it is still priced at 2k. Main work was done for 2 and 4. 3 was put on hold during the PR review.

So I think 500 for C+ in this issue is less. But I am fine with it as it was the price when the job was assigned (based on the process).

[MitchExpensify]

Thank you both! I appreciate that extra context a lot. I've proposed this compensation in Slack and will issue payment accordingly!

[MitchExpensify]

Paid @parasharrajat via bonus on the old Upwork Job contract.

I've invite you, @mdneyazahmad, to the new Upwork posting here for payment seeing as the old one closed. Lemme know when you've accepted! Thanks for your patience

[mdneyazahmad]

@MitchExpensify accepted!

[MitchExpensify]

Awesome! Paid and contract ended. Thanks again everyone!