Wet-boew: Form validation: Error anchor, label hidden when focus

[shawnthompson]

When you validate a form, you get the list of errors at the top and if you click on a link to bring you to the form field that is related to the error, the focus is in the field but you scroll past the label that's above the field.

Click on this link

Brings you to this field

@stdgit has created a script that scrolls the window up a few pixels/ Could we add something like this in WET?

P.S. @RobJohnston, I checked the open tickets and didn't find one on this issue. Thought you should know!

[RobJohnston]

@shawnthompson , I agree ;-) I don't remember reading this one before and my search of the wet-boew and gcweb repos found nothing.

[duboisp]

I am sure that is possible to add a scrolling feature that scrolls the window up a few pixels.

Some test would need to be done to ensure the focus order (WCAG 2.4.3) remains the same after scrolling.

[shawnthompson]

@StdGit could you paste share your solution with us and we can try to incorporate it into WET?

[StdGit]

Here it is

I did it for all anchor with a #hash but you can do it specifically for the ones with an error class

$(document).on("wb-ready.wb",function () {

    //To display the label after an error
    // Captures click events of all <a> elements with href starting with #
    $(document).on('click', 'a[href^="#"]', function (event) {
        window.setTimeout(function () {
            offsetAnchor();
        }, 0);
    });

    // The function actually applying the offset
    function offsetAnchor() {
        if (location.hash.length !== 0) {
            window.scrollBy(0,-80);
        }
    }

});