Refine hover / focus styles for title field’s comment button

[thibaudcolas]

As of Wagtail 4, our title field now has a border that only reveals on hover. It also has a "Add comment" button revealed on hover. Both elements are currently out of sync – if the user hovers / focuses the comment button, the border doesn’t show:

It would be nice if those were always in sync, similarly to what #9164 did for the choosers.

Looking at the styles,

wagtail/client/scss/components/forms/_title.scss

Lines 35 to 37 in 66ea563

	&:not(:hover, :focus, [aria-invalid='true']) {
	border-color: transparent;
	}

I believe this would need to change to applying the styles based on hover / focus within the parent element. Something like (untested):

// Styles for the title field when at the top of the page.
// It’s the first panel when comments are disabled, second if enabled.
.w-panel.title:nth-child(1),
.w-panel.title:nth-child(2) {
  .w-panel__header {
    @apply w-sr-only;

    .w-panel__anchor,
    .w-panel__toggle {
      @apply w-hidden;
    }
  }

  input,
  textarea,
  .Draftail-Editor .public-DraftEditor-content {
    @apply w-h1;
    color: $color-input-text;
    // Slightly out-dented so the field’s is horizontally aligned.
    padding-inline-start: theme('spacing[1.5]');
    margin-inline-start: calc(-1 * theme('spacing[1.5]'));

    &:not([aria-invalid='true']) {
      border-color: transparent;
    }
  }

    &:not(:hover, :focus-within) :is(input, textarea, .Draftail-Editor .public-DraftEditor-content) {
      border-color: transparent;
    }
}

We’d need to make sure this looks correct when hovering/focusing title fields with errors, and tweak if needed.

[alvinokafor]

Hi @thibaudcolas, I am an outreachy intern an di would love to take this issue up

[osujipius]

Hi.. @alvinokafor I am currently working on this

[thibaudcolas]

@osujipius in the future make sure to claim a task before someone else does! And @alvinokafor, no need to ask, just say you’re taking it on and let us know how you get on.

[Buduzz]

Hi @thibaudcolas, has any PR been created for this issue? If no, I would like to jump on it and get it done as soon as possible

[lb-]

Is anyone actively working on this issue?

@alvinokafor @osujipius or @Buduzz

[Julietadeboye]

Hi LB, I'll work on this issue. Thanks

[lb-]

Thanks @Julietadeboye - assigned to you for now.

[Julietadeboye]

This issue seems to have been fixed already