Follow-up to #2983568: Audit and improve focus styles across the Umami theme for logged out users, filed so we can get all the other successful improvements from that issue committed.

Problem/Motivation

There's still an issue with the focus outline around the search box on the search page. The button breaks out of the surrounding outline, so it doesn't look like a complete ring.

Screenshot of the search field with focus.

This problem is just for the search input on the main content of the search page. The search box in the header region doesn't suffer from this.

Proposed resolution

Fix.

Remaining tasks

Fix.
CommentFileSizeAuthor
#15 umami-search-box-focus.png7.56 KBmstrelan
#6 umami-search-page-input-focus-outline-gap-3016670-6.png4.45 KBpawandubey
#4 broken-focus-outline-on-search-input-on-search-page-3016670-3.patch791 bytes-J-o-n-n-y-
umami-search-page-input-focus-outline-gap.png62.75 KBandrewmacpherson

Comments

andrewmacpherson created an issue. See original summary.

-J-o-n-n-y-’s picture

-J-o-n-n-y- commented

Looking at this as part of #uoe-d8-contribution

andrewmacpherson’s picture

andrewmacpherson commented
Title: Broken focus outline on search input on search page in Umami. » [PP-1] Broken focus outline on search input on search page in Umami.
Status: Active » Postponed

@-j-o-n-n-y- thanks for picking this up. It's probably best to leave this issue until after we have committed #2983568: Audit and improve focus styles across the Umami theme for logged out users. You won't actually see the issue unless the patch there is applied first.

I've marked this postponed until we've committed the main issue, and I'll set it back to active when at the right time. This isn't quite our usual way of working, though. The other issue is an epic patch which is very close to landing, and we deferred this so it wouldn't hold up all the other awesome wins there. Sorry for the confusion.

-J-o-n-n-y-’s picture

-J-o-n-n-y- commented
Status: Postponed » Needs review
StatusFileSize
new broken-focus-outline-on-search-input-on-search-page-3016670-3.patch791 bytes

@andrewmacpherson Didn't see your comment until I'd created a patch - I did see the issue in core without any patches applied. I've attached a patch which fixes the issue, will leave it with you whether to take any further at this point :)

Have updated the search-results.css file with a fix for the search input and button that is included in the #edit-basic form element at the bottom of the page. The input field width was too large and the search button had a negative margin which wasn't needed. Styling of the lower search field now matches that of the top.

andrewmacpherson’s picture

andrewmacpherson commented

OK thanks. Leaving it at needs review, someone may get around to it later in the week. The Umami demo team have weekly meetings on a Tuesday afternoon (UK time). If you want to say hi, they also coordinate in the #out-of-the-box channel in the Drupal Slack.

pawandubey’s picture

pawandubey commented
Status: Needs review » Active
StatusFileSize
new umami-search-page-input-focus-outline-gap-3016670-6.png4.45 KB

@-j-o-n-n-y-

I am not able to replicate this issue anymore as per the below image:

I think this issue is fixed in latest 8.7.x dev version. Please review the same and let us know if any findings.

Version: 8.7.x-dev » 8.8.x-dev

Drupal 8.7.0-alpha1 will be released the week of March 11, 2019, which means new developments and disruptive changes should now be targeted against the 8.8.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.0-alpha1 will be released the week of October 14th, 2019, which means new developments and disruptive changes should now be targeted against the 8.9.x-dev branch. (Any changes to 8.9.x will also be committed to 9.0.x in preparation for Drupal 9’s release, but some changes like significant feature additions will be deferred to 9.1.x.). For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

mstrelan’s picture

mstrelan commented
Status: Active » Closed (outdated)
Issue tags: +Bug Smash Initiative
StatusFileSize
new umami-search-box-focus.png7.56 KB

The screenshot in #6 demonstrates the outline for the search button rather than the search input. Nevertheless the issue appears to be resolved now. Screenshot below from Drupal 9.5.

Umami search box

Closing as outdated.