QA testing of Olivero - Desktop browser: Firefox

Full Video Walkthrough (I must have hit some recording length limit, because the video just stopped on me mid recording. There are two issues that aren’t captured on the video that I’ve posted screenshots for.)

• Styleguide: Messages do not display the icons that differentiate status/warning/error messages. These icons DO appear on the CD tools page.
  • Link to page
  • Link to video
• Styleguide: One details element displays with nearly browser default styles. I’m assuming this is because this details element doesn’t contain a summary
  • Link to page
  • Link to video
• Styleguide: Mark new/updated don’t appear to be any different from regular text or links
  • Link to page
  • Link to video
• Form Styles: Machine Name field appears like normal text field. Is this how it should be?
  • Link to page
  • Link to video
• Form Styles: Password strength indicator is frequently longer than the password text input.
  • Link to page
  • Link to screenshot
• Form Styles: Fieldsets with errors don't seem any different than normal fieldsets
  • Link to page
  • Link to video
• Form Styles: Signature field is probably difficult to use on a phone at the small breakpoint. The field is roughly 50% covered by the reset button
  • Link to page
  • Link to screenshot
• Buttons: Danger and Default styles are identical. Should they be visually distinct? Also, Disabled buttons still have hover styles and are clickable if they are <a> elements
  • Link to page
  • Link to video
• Nested Comments: Between 700px and 1000px, top-level comment avatars overflow the viewport on the left side
  • Link to page
  • Link to video

@andy-blum is there still work to be done on this issue? Or is it ready for review?

@any-blum thanks for your tests! Here some remarks:

1.

Styleguide: Messages do not display the icons that differentiate status/warning/error messages. These icons DO appear on the CD tools page

This is how contrib module `styleguide` renders messages. Status messages of this module misses status_headings setting for the messages, that's why icons not rendered (they are taking into account this setting)

This is how it supposed to be:

And this is styleguide module:

So we are fine here, i guess.

2.

One details element displays with nearly browser default styles. I’m assuming this is because this details element doesn’t contain a summary

You are totally right. And i almost sure we can skip it aswell

3.

Styleguide: Mark new/updated don’t appear to be any different from regular text or links

Honestly i have no idea where it is used and should we manage it actually or not.

4.

Form Styles: Machine Name field appears like normal text field. Is this how it should be?

It's OK aswell, because this example is hardcoded from `form_style` module. Just an ex.

5.

Form Styles: Password strength indicator is frequently longer than the password text input.

Interesting point. I don't find any related code from our CSS and also i didn't find design for it on the latest figma. Probably we should investigate it and fix. Can be separate issue.

6.

Form Styles: Fieldsets with errors don't seem any different than normal fieldsets

No any error classnames for those fieldsets. Means on front side there is no way to detect error states. This is definitely a problem of `form_style` module. Not related to us.

7.

Form Styles: Signature field is probably difficult to use on a phone at the small breakpoint. The field is roughly 50% covered by the reset button

In your comment you have posted link to the page, but i can't find `Signature` field there. Is it mistake?

8.

Buttons: Danger and Default styles are identical. Should they be visually distinct? Also, Disabled buttons still have hover styles and are clickable if they are <a> elements

Probably a good catch, and i almost sure we can try to provide danger styles. About `disabled` state - i can't reproduce it anymore locally against 9.3.x branch. This bug was fixed here https://www.drupal.org/project/drupal/issues/3211616

9.

Nested Comments: Between 700px and 1000px, top-level comment avatars overflow the viewport on the left side

I almost sure it will be fixed here https://www.drupal.org/project/drupal/issues/3210703#comment-14213216. It needs review by the way ;)

I made some tests and noticed following bugs:

1. https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/form/example... -> Values like "123" in not fully visible

2. https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/form/example... ->

2.1

2.2 Fields are too long

3. https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/form/example... -> progress bar is not hidden

4. https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/table -> Titles and content are not centered

5. https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/form/example... ->

5.1 icons are displaced

5.2 margin is missing

@KondratievaS Please only test the items in the testing script. Most of what you note above is caused by inline styles from the webform module or is external to the theme.

@mherchel it's not clear about the state of issue, as I see/got #10 reports that everything works as expected except a few found issues (not clear why webform modules is installed)

If the webform screw elements let's file there a follow-up to it

Filed webform's issue #3249505: Fix new core's Olivero theme across multiple browsers

as there's no core's bugs I find it ready

Looks like the testing here was comprehensive, even if some of it was done with webform, so let's go ahead and mark this fixed.

Hello,

I just found that one, the text in the search input is barely readable in the mobile menu, so definitely not accessible.
Tested on Chrome and it is better.

Tested on:
Ubuntu 20.04
Firefox: 99.0