[JENKINS-69214] Radio buttons appear selected, when navigating with tab

[ridemountainpig]

See JENKINS-69214.

Proposed changelog entries

• Fix radio buttons selection state, if you're navigating with tab

Proposed upgrade guidelines

N/A

Submitter checklist

• [x] (If applicable) Jira issue is well described
• [x] Changelog entries and upgrade guidelines are appropriate for the audience affected by the change (users or developer, depending on the change) and are in the imperative mood. Examples
  • Fill-in the Proposed changelog entries section only if there are breaking changes or other changes which may require extra steps from users during the upgrade
• [x] Appropriate autotests or explanation to why this change has no tests
• [ ] New public classes, fields, and methods are annotated with @Restricted or have @since TODO Javadoc, as appropriate.
• [ ] New deprecations are annotated with @Deprecated(since = "TODO") or @Deprecated(forRemoval = true, since = "TODO") if applicable.
• [ ] For dependency updates: links to external changelogs and, if possible, full diffs

Desired reviewers

@mention

Maintainer checklist

Before the changes are marked as ready-for-merge:

• [ ] There are at least 2 approvals for the pull request and no outstanding requests for change
• [ ] Conversations in the pull request are over OR it is explicit that a reviewer does not block the change
• [ ] Changelog entries in the PR title and/or Proposed changelog entries are accurate, human-readable, and in the imperative mood
• [ ] Proper changelog labels are set so that the changelog can be generated automatically
• [ ] If the change needs additional upgrade steps from users, upgrade-guide-needed label is set and there is a Proposed upgrade guidelines section in the PR title. (example)
• [ ] If it would make sense to backport the change to LTS, a Jira issue must exist, be a Bug or Improvement, and be labeled as lts-candidate to be considered (see query).

[daniel-beck]

Thanks for taking care of this!

Could you provide before/after screenshots right here in the PR? To be honest I do not see what was changed with your screenshot.

[ridemountainpig]

Before After

[daniel-beck]

The problem I was reporting is that the "focused but unselected" state looks very similar to "selected", which is confusing: It looks like an element would be selected, even though it is only focused.

With this change they look identical, which is the opposite of what I was asking for.

[ridemountainpig]

Before

https://user-images.githubusercontent.com/92412722/182483422-4b0cb6b3-70a5-4d98-90a4-6926b55b5971.mov

After

https://user-images.githubusercontent.com/92412722/182483004-2c36f9cc-fec8-40ce-9380-1400344730b8.mov

[daniel-beck]

@ridemountainpig That looks very clearly different! Thank you!

@janfaracik or @jenkinsci/sig-ux does that look OK to you? Any consistency issues with other elements perhaps?

[ridemountainpig]

Right as you mentioned it, the change proposed gets a rid of the smooth selection transition:

Is this mean I need to made it become more smooth ?

[ridemountainpig]

Right as you mentioned it, the change proposed gets a rid of the smooth selection transition:

I have let selection transition become more smooth

https://user-images.githubusercontent.com/92412722/182767810-59af6217-53b7-4f8f-90d5-26ad9c135d4c.mov

[NotMyFault]

I have let selection transition become more smooth

This is still different to what it looked like before, and I don't think there's a need to change the existing animation in order to address the issue 🤔

[ridemountainpig]

This is still different to what it looked like before, and I don't think there's a need to change the existing animation in order to address the issue 🤔

So should I need to remove the transition-duration from commit ? By the way, do you have any better way to resolve it ? Because now I have no better idea to resolve this question.

Thanks~

[ridemountainpig]

This is still different to what it looked like before, and I don't think there's a need to change the existing animation in order to address the issue 🤔

I think it look a same with 2.361. When selecting the middle will be white, is because the inset box-shadow had been remove, to avoid it's only focused, not selected.

https://user-images.githubusercontent.com/92412722/183548913-574d964d-bc0c-4122-8a12-087b1ee47ed9.mov

[ridemountainpig]

I think it look a same with 2.361. When selecting the middle will be white, is because the inset box-shadow had been remove, to avoid it's only focused, not selected.

@NotMyFault , @janfaracik , how do you feel ?

[janfaracik]

Hey there, thanks for taking on the bug! I've been away (and still am somewhat) for a while so apologies for my late response -

I've given it a quick demo on Safari/macOS and the animations seems a little buggy:

https://user-images.githubusercontent.com/43062514/183758170-9003cc1f-6919-4d01-af95-1d2eac318fd3.mov

Unrelated: The focus states for the inputs across the board could do with some love really, the updated sidebar items/buttons handle focus a lot nicer than my current implementation, it would be neat to see the inputs adopt something similar.

[ridemountainpig]

@NotMyFault , @janfaracik It seem look more better like this.

https://user-images.githubusercontent.com/92412722/183797237-e8eebd3d-d91d-4d4e-b201-44afdccca88c.mov

Thanks for review~

[ridemountainpig]

@NotMyFault , @janfaracik It seem look more better like this.

2022-08-10.10.27.18.mov

Thanks for review~

Can someone give some comment for this fix ? Thanks~

[ridemountainpig]

Sorry, could I get a review from @jenkinsci/sig-ux and @janfaracik ? Thx~

[timja]

/label ready-for-merge

---

This PR is now ready for merge, after ~24 hours, we will merge it if there's no negative feedback.

Thanks!

[timja]

We have an alternative PR here https://github.com/jenkinsci/jenkins/pull/7017 which fixes both JENKINS-69398 and JENKINS-69214

[ridemountainpig]

We have an alternative PR here https://github.com/jenkinsci/jenkins/pull/7017 which fixes both JENKINS-69398 and JENKINS-69214

@timja I think https://github.com/jenkinsci/jenkins/pull/7017 is base on my revise to add some new things to fix this issue, so I think both PR have contribute to this issue, and both can be merge.

[timja]

We have an alternative PR here #7017 which fixes both JENKINS-69398 and JENKINS-69214

@timja I think #7017 is base on my revise to add some new things to fix this issue, so I think both PR have contribute to this issue, and both can be merge.

They aren't the same fix and won't apply cleanly, given the other PR fixes both issues I prefer that one but huge thanks for looking into this and your contributions are really appreciated!

[ridemountainpig]

They aren't the same fix and won't apply cleanly, given the other PR fixes both issues I prefer that one but huge thanks for looking into this and your contributions are really appreciated!

Thanks for review!