#a11y-color: "Add New" buttons on edit screens do not have CSS :focus states

[adamsoucie]

There are no CSS focus states/pseudo selectors on the "Add New" buttons on edit screens.

Currently working on a patch to just extend the current hover states to also trigger on :focus.

Keeping this issue separate from #34864 because ultimately the color could be a new design decision, but extending :hover to :focus would be continuing an already established design decision.

[adamsoucie]

Extends the current :hover state to :focus on .wrap .page-title-action

[Cheffheid]

Patch works for me. New focus state for these buttons looks like the hover style.

[michaelarestad]

I think this likely will be addressed at the same time as #34864. I wouldn't use the same styles as the hovers in favor of just using a nice box shadow and maybe a border highlight. I'd like to propose a subtle border in #34864.

[michaelarestad]

In 35791:

Administration: Improve color contrast of 'Add New' buttons.

This also includes improved focus styles for 'Add New'.

fixes #34876, #34864.

[adamsoucie]

After continued discussions with the a11y team, we disagree with the decision and feel it is far simpler to echo the :hover to :focus. What is the logic against mirroring :hover, when :hover, it can be argued, is actually an extension of :focus?

@mor10's comments on 34864 come into play here as well. The text change is way too subtle (as is the case throughout the admin's :focus states). There needs to be a very clear visual shift (as we do with :hover).

[michaelarestad]

The text change is way too subtle (as is the case throughout the admin's :focus states).

There is only a text change on this particular "button." On the main button styles, there is no change. On links, there is a very subtle color change. I would rather this change similar to the link, if any.

What is the logic against mirroring :hover, when :hover, it can be argued, is actually an extension of :focus?

Good question! @mor10 and I did a little debate on this in person last night. There is a subtle difference in context between hover and focus. Hover is definitely an extension of focus, but there is an added separate context in hover versus focus. Hover is something used to show where the cursor is and that an element is indeed interactive.

The biggest visual change needs to happen on focus for sure. I think a subtle difference between hover and focus is totally fine. In this case, I think the current drastic change for hover is pretty extreme since it basically inverts everything (super extreme and unlike any other element in WordPress).

My current recommendation would be to drastically reduce the visual impact of the hover state, but want to explore that in another ticket. I think this link, its design, and its location could be improved. I think my changes do resolve this ticket pretty nicely without going too far with design changes yet. Another route would be to go further away from button styles and go toward standard link styles, though I think those aren't as nice looking and might not stand out as much as they should.

@adamsoucie Any objections to closing this and instead creating a ticket to do a more wholistic design/location iteration of the link?

[adamsoucie]

@michaelarestad None at all. I was able to speak with @mor10 yesterday about how this is actually a larger issue we need to address and would love to work on it with you. Glad we could resolve this! I look forward to the continued collaboration!

Is there already a ticket for the wide-spread update, or does one need to be created?

[michaelarestad]

Is there already a ticket for the wide-spread update, or does one need to be created?

@adamsoucie There is no ticket yet that I'm aware of.

[adamsoucie]

@michaelarestad @mor10 Happy to create one. Let's find some time soon to come up with a plan :)

[afercia]

For reference: discussion about the focus style continues on #34904 and #34957.