Focus styles for buttons

[cehfisher]

Making a stand-alone ticket to tackle this accessibility issue.

From @fuzzbomb:

Still need focus styles for buttons, currently, rely on color change only. (Can't recall whether the styles sheets are suppressing user agent defaults or not.)

Work has started on this with possibly too great a hover/focus change. Might want to wind this one in and keep the green/white but have a darker border. Or if folks like this (and I'm having second thoughts) then great.

From @kjays:

Work has started on this with possibly too great a hover/focus change. Might want to wind this one in and keep the green/white but have a darker border. Or if folks like this (and I'm having second thoughts) then great.

[cehfisher]

I am seeing focus styles for buttons, but I think the issue is when a link is used instead of a true class.

Ex. page where this is happening: http://umami:8888/web/recipes The pink "button" is actually a link (using ). Ideally, this would use a

tag and then you a new pink button class with proper focus styles, etc, would need to be created. In terms of accessibility is always preferred.

I think some HMTL was stripped out of your comment, so I can't exactly make sense of what you meant.

The pink "button" is actually a link

It behaves as a link, so <a> is the correct element - that part is working fine. Do you think we should keep the "button" styling or make it more like the "View Recipe >" link style? There might be some button styling classes we can re-use.

I see a focus style on this link. In Firefox, it's the 1px dotted outline, so it's not a very obvious focus style. in Chromium it's the blue outline, and against the wooden table image, it's even harder to see than the Firefox one!

[markconroy]

I have that banner button/link set like this now:

default:

hover/focus:

Is that enough for this issue to close?

[cehfisher]

Was the mark-up changed to and a new pink button class added? If not, this is a band-aid fix. Let me know if you want me to send in a PR for this or if you want to address at a later point.

[markconroy]

Hi Carrie,

I didn't change the markup, I just added a hover/focus state css to .block-banner-block .field--name-field-content-link a. There is no button class there, it's just styling the (entity reference field) field.

I'm happy to take your lead on suggestions.

[cehfisher]

This is one of those "best case scenario" type of fixes. Your fix is a great start, but much more we could do in the future. I'd say either close this ticket and we can reopen at at later date, or add a tag indicating that this ticket is a future improvement.

[markconroy]

I'll close for now, as issues are moving to Drupal.org.

[fuzzbomb]

Follow-up on d.o

https://www.drupal.org/project/drupal/issues/2938194