Focal Point offsets not accessible by keyboard

I think this is correct...

oops ... wrong patch

The patch in #4 doesn't work, because .focusable only works it's on the same element as .visually-hidden. See this selector in System module and Stable theme (in hidden.module.css):

.visually-hidden.focusable:focus {}.

The problem is you want to hide the input AND the label (and maybe some #description), but only the input is a focusable element. To make this work with just CSS you'd need to employ something like div.form-type-focalpoint:focus-within label, div.form-type-focalpoint:focus-within:input {} but you'd need a focus-within polyfill for IE and Edge.

You could make it work with some JS. Add focus and blur handlers to the focalpoint input, to toggle the visually-hidden class on the outer div.js-form-item wrapper.

Or, don't bother hiding the focal point input at all....

Wouldn't this work? I appreciate your guidance with this since I (clearly) have no idea what I'm doing :)

No, #6 doesn't work. When tabbing though the form, I experience a tab stop between the filename link and the remove button, but the focal point input doesn't appear. You have a visually-hidden class on the parent div.form-item, so you're effectively showing/hiding something inside the overflow of a 1px wrapper div.

In any case.visually-hidden.focusable:focus {} is of no use here, as it will only reveal the element which has focus. In this case, there's a set of 3 elements (label, input, description) which need to be hidden/revealed together.

Try something like this:

$(this).closest('.form-item').addClass('visually-hidden'); // initialize
$(this).on('focus', function() {
  // remove visually-hidden class from the .form-item wrapper
});
$(this).on('blur', function() {
  // add visually-hidden class to the .form-item wrapper
});

I rerolled the patch against dev and add focus and blur events.

I wasn't paying too much attention to changes to the file FocalPointEffectBase.php in the patch in comment #6, but I don't see the link between the code and this issue.

I've tested the patch in #11 and it seems to work fine while tabbing through the form; also it maintains the doubleclick functionality and the focal point field is still displayed to all users when there is a form error on that field. I think this looks good to go, but given my lack of expertise in this area I'd love to have another review.

Patch #11 seems to work (chrome, firefox, edge) :
- The input appears well while tabbing after the name of the image.
- Double click always works.
- Input appears well after an error.

I'll take that as RTBC

Fixing the accessibility tag.