Make WordPress Core

Opened 5 years ago

Closed 5 years ago

Last modified 5 years ago

#48927 closed defect (bug) (fixed)

Aesthetic Issues with Language Select on Install introduced in 5.3.1 RC1

Reported by: garrett-eclipse's profile garrett-eclipse Owned by: audrasjb's profile audrasjb
Milestone: 5.3.1 Priority: normal
Severity: normal Version: 5.4
Component: Upgrade/Install Keywords: has-screenshots has-patch commit
Focuses: ui, accessibility, css, administration Cc:

Description

Hello,

Testing 5.3.1 RC1 today I noticed on install the language expanded select has changed aesthetically and I believe it to be unintentional.
Original Slack Question - https://wordpress.slack.com/archives/C02RQBWTW/p1576000796409900

From my screen to be attached.

  1. Should an expanded select like this have the chevron (down arrow)? I don’t believe so as it’s not a dropdown select.
  2. When in focus all options get the blue focus colour which I found a little odd. Should they. Or would it be better to just have the border change and only change the options to blue when they’re hovered or selected.

Installing a clean 5.3 I can confirm this isn't present there so was introduced during the 5.3.1 cycle.

Cheers

Attachments (7)

Screen Shot 2019-12-10 at 9.46.50 AM.png (136.1 KB) - added by garrett-eclipse 5 years ago.
Expanded Language select on 5.3.1 RC1 - See focus colour affects all options and select chevron (down arrow) is present.
Screen Shot 2019-12-10 at 10.31.26 AM.png (128.5 KB) - added by garrett-eclipse 5 years ago.
For comparison the same expanded language select on 5.3
48927.chevron.diff (398 bytes) - added by garrett-eclipse 5 years ago.
Remove the dropdown chevron by updating .language-chooser select to use background instead of background-color
48927.focus.diff (352 bytes) - added by garrett-eclipse 5 years ago.
Override the select focus on the language-chooser to avoid all entires changing colour
48927.focus.hover.diff (456 bytes) - added by garrett-eclipse 5 years ago.
Move the focus on the select to individual options and introduce hover.
48927.everything.diff (652 bytes) - added by garrett-eclipse 5 years ago.
Combined patch removing the chevrons and moving focus to the options as well as adding hover to the options
Capture d’écran 2019-12-11 à 21.29.41.png (55.0 KB) - added by audrasjb 5 years ago.
48927.everything.diff

Download all attachments as: .zip

Change History (13)

@garrett-eclipse
5 years ago

Expanded Language select on 5.3.1 RC1 - See focus colour affects all options and select chevron (down arrow) is present.

@garrett-eclipse
5 years ago

For comparison the same expanded language select on 5.3

#1 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 5.3.1

@garrett-eclipse
5 years ago

Remove the dropdown chevron by updating .language-chooser select to use background instead of background-color

@garrett-eclipse
5 years ago

Override the select focus on the language-chooser to avoid all entires changing colour

@garrett-eclipse
5 years ago

Move the focus on the select to individual options and introduce hover.

@garrett-eclipse
5 years ago

Combined patch removing the chevrons and moving focus to the options as well as adding hover to the options

#2 @garrett-eclipse
5 years ago

  • Keywords has-patch needs-testing 2nd-opinion added

I've uploaded a few patches to address these issues.

  1. 48927.chevron.diff - Simply removes the chevron by updating the .language-choose select css to use background instead of just background-color.
  2. 48927.focus.diff - This only disables the focus on the select so all options dont' change colour on select focus.
  3. 48927.focus.hover.diff - Similar to # 2 this disables the focus on the entire select, but it moves it down to the individual options and adds a hover to the individual options.
  4. 48927.everything.diff - This is a combination of # 1 and # 3 and removes the chevron, select focus colour and moves focus and a hover to the select options.

*At minimum I would like to see # 1 implemented.

#3 @audrasjb
5 years ago

  • Owner set to audrasjb
  • Status changed from new to reviewing

#4 @audrasjb
5 years ago

  • Keywords commit added; needs-testing 2nd-opinion removed
  • Status changed from reviewing to accepted

Thanks @garrett-eclipse for the ticket and the few patch!

I tested 48927.everything.diff and it's a green light on my side (see screenshot below).

Adding commit keyword for 48927.everything.diff. This is a pretty simple patch, worth merging it to 5.3.1.

Thanks,
Jb

@audrasjb
5 years ago

48927.everything.diff

#5 @SergeyBiryukov
5 years ago

  • Resolution set to fixed
  • Status changed from accepted to closed

In 46887:

Upgrade/Install: Improve the appearance of language selection on install:

  • Remove a stray chevron.
  • Improve focus and hover styles.

Props garrett-eclipse, audrasjb.
Fixes #48927.

#6 @SergeyBiryukov
5 years ago

In 46888:

Upgrade/Install: Improve the appearance of language selection on install:

  • Remove a stray chevron.
  • Improve focus and hover styles.

Props garrett-eclipse, audrasjb.
Merges [46887] to the 5.3 branch.
Fixes #48927.

Note: See TracTickets for help on using tickets.