[HOLD for payment 2024-10-25] [Hold for Payment 2024-10-23][$125] Web - Blue border appears on a radio button when pressing a keyboard

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.38-0
Reproducible in staging?: Y
Reproducible in production?: Y
Email or phone of affected tester (no customers): [email protected]
Issue reported by: Applause Internal Team

Action Performed:

1. Navigate to staging.new.expensify.com and sign in using an expensifail account
2. Create a workspace
3. Start adding a bank account via plaid
4. On "choose an account" page select a radio button that is not currently selected
5. Press the space bar on your keyboard

Expected Result:

No blue border is visible

Actual Result:

Blue border gets shown on the radio button

Workaround:

Unknown

Platforms:

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6608851_1726748749178.bandicam_2024-09-19_15-19-32-447.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021839026052320413685
• Upwork Job ID: 1839026052320413685
• Last Price Increase: 2024-10-11

Issue Owner

Current Issue Owner: @OfstadC / @abekkala

[melvin-bot]

Triggered auto assignment to @abekkala (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.

[IuliiaHerets]

@abekkala FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Blue border gets shown on the radio button

What is the root cause of that problem?

The component RadioButton doesn't have noOutline property

The same problem occurs when we click on the text next to the radio button.

What changes do you think we should make in order to solve the problem?

Add styles.noOutline style to the following places:

App/src/components/RadioButton.tsx

Lines 32 to 39 in d009d8e

	<PressableWithFeedback
	disabled={disabled}
	onPress={onPress}
	hoverDimmingValue={1}
	pressDimmingValue={1}
	accessibilityLabel={accessibilityLabel}
	role={CONST.ROLE.RADIO}
	>

App/src/components/RadioButtonWithLabel.tsx

Lines 52 to 61 in d009d8e

	<PressableWithFeedback
	tabIndex={-1}
	accessible={false}
	onPress={onPress}
	style={[styles.flexRow, styles.flexWrap, styles.flexShrink1, styles.alignItemsCenter]}
	wrapperStyle={[styles.flex1, styles.ml3, styles.pr2]}
	// disable hover style when disabled
	hoverDimmingValue={0.8}
	pressDimmingValue={0.5}
	>

What alternative solutions did you explore? (Optional)

[melvin-bot]

@abekkala Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[bernhardoj]

Edited by proposal-police: This proposal was edited at 2024-09-24 05:40:28 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

A blue outline appear in the radio button when using keyboard.

What is the root cause of that problem?

It's expected that the blue outline will show when using a keyboard, but I think the issue here is with the styling of the outline. Instead of circle, the outline is a square. We have similar issue like this before in #32400 on a different page/component.

In our case, the border style of the radio button is applied to the View inside the pressable.

App/src/components/RadioButton.tsx

Lines 31 to 40 in a7a408f

	return (
	<PressableWithFeedback
	disabled={disabled}
	onPress={onPress}
	hoverDimmingValue={1}
	pressDimmingValue={1}
	accessibilityLabel={accessibilityLabel}
	role={CONST.ROLE.RADIO}
	>
	<View style={[styles.radioButtonContainer, hasError && styles.borderColorDanger, disabled && styles.cursorDisabled]}>

So, when we focus on the pressable, the square outline is shown because it's not styled to be a circle.

What changes do you think we should make in order to solve the problem?

We can move the whole style from the View to the pressable and just remove the View. This will fix the issue with the RadioButton component.

However, I still see this issue with another component, specifically in the start chat page.

It was previously fixed in #32400, but the page doesn't use OptionRow component anymore, so we need to re-fix it using the same solution from #35028. We can even go further by creating a new component called SelectCircleButton to make the fix DRY and replace all usage of PressableWithFeedback+SelectCircle with SelectCircleButton.

[melvin-bot]

@abekkala Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021839026052320413685

[melvin-bot]

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

[abekkala]

@ntdiary we already have a couple proposals for review! 🎉

[ntdiary]

I personally think it's fine to show the blue border, as it aligns with WCAG, and Space usually indicates activating the current option. Form MDN:

Also, there are many other places in our app where a blue border is displayed when using the keyboard

demo.mp4

We can change the border shape to circle if need, as @bernhardoj suggested.
cc @Expensify/design to see if they have any different inputs. :)

[dannymcclain]

I personally think it's fine to show the blue border, as it aligns with WCAG, and Space usually indicates activating the current option.

I agree with this. I wouldn't mind if we changed the shape to a circle but honestly I don't feel super strongly. Let's see if @dubielzyk-expensify has any strong feelings.

[dubielzyk-expensify]

Yeah agree. This is standard accessibility practise from what I'm aware of, so I'm fine with the blue border

[abekkala]

ah ok - so if design is fine with the blue border I'll close this one!

[bernhardoj]

@abekkala I think we agreed that the blue border is expected, but maybe we want to change it from square to circle.

Before:

After:

We previously fixed this kind of issue in #32400

cc: @dannymcclain @dubielzyk-expensify

[dubielzyk-expensify]

Yeah the Before looks a bit weird there. If we could fix that, that would be nice

[dannymcclain]

I agree—the after in your post looks much better.

[bernhardoj]

@abekkala hi, can you check the comments above, please?

[abekkala]

Reopening so that this change can be made (square to circle)

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[abekkala]

@OfstadC I'm going ooo until Oct 20 - assigning a BZ buddy to look over this until I return.

STATUS: @ntdiary has just selected a proposal for fix. @luacmartins will review to confirm that it's the best for fix

Removed Bug label again as this is not linked to a project, just a design fix

[luacmartins]

Agree with #49501 (comment). Let's keep the components separate for now.

[melvin-bot]

Upwork job price has been updated to $125

[bernhardoj]

PR is ready

cc: @ntdiary

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.50-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix the radio button focus outline isn't circle #50681

If no regressions arise, payment will be issued on 2024-10-25. 🎊

For reference, here are some details about the assignees on this issue:

• @ntdiary requires payment through NewDot Manual Requests
• @bernhardoj requires payment through NewDot Manual Requests

[abekkala]

I'm back from ooo - unassigning @OfstadC

[abekkala]

PAYMENT SUMMARY FOR OCT 25

• Fix: @bernhardoj [$125, if no regressions] payment via NewDot
• PR Review: @ntdiary [$125, if no regressions] payment via NewDot
  Please complete checklist

[abekkala]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ntdiary] The PR that introduced the bug has been identified. Link to the PR:
• [@ntdiary] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@ntdiary] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@ntdiary] Determine if we should create a regression test for this bug.
  [@ntdiary] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@abekkala] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[bernhardoj]

Requested in ND.

[ntdiary]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@ntdiary] The PR that introduced the bug has been identified. Link to the PR: N/A
• [@ntdiary] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: N/A
• [@ntdiary] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: No need
• [@ntdiary] Determine if we should create a regression test for this bug. No need
  [@ntdiary] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again. No need
• [@abekkala] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

This is a simple Radio UI improvement, not an issue introduced by another PR, and I’m inclined not to create a regression test for this issue. :)

[JmillsExpensify]

$125 approved for @bernhardoj

[abekkala]

Closing as last cont. payment will be for @ntdiary [$125] via NewDot