Accessibility improve when show error text

[enriqueprieto]

Improve in _showError

1. Generate dinamic id to errorTextElement from field.input by id.
2. Set in field.input, aria-describedby attribute with id error value.
3. Set in field.input, aria-valid attribute with true value.
4. Set in errorTextElement, id attribute with id error value.
5. Set in errorTextElement, role attribute with alert value.

// file src/pristine.js
...
function _showError() {
        ...
        const { input } = field;
        const inputId = input.id || Math.floor(new Date().valueOf() * Math.random());
        const errorId = `error-${inputId}`;

        if(errorClassElement){
                ...
                input.setAttribute('aria-describedby', errorId);
                input.setAttribute('aria-invalid', 'true');
        }

        if(errorTextElement){
                errorTextElement.setAttribute('id', errorId);
                errorTextElement.setAttribute('role', 'alert');
                ...
        }
}
...

With improves above on _showError method, born a requeriment to refactor _removeError method, the mission is remove attributes added on field.input and errorTextElement.

Refactor in _removeError

1. Remove attribute aria-describedby from field.input.
2. Remove attribute aria-invali from field.input.
3. Remove attribute id from errorTextElement.
4. Remove attribute role from errorTextElement.

// file src/pristine.js
...
function _removeError() {
        ...
        const { input } = field;

        if(errorClassElement){
                ...
                input.removeAttribute('aria-describedby');
                input.removeAttribute('aria-invalid');
        }

        if(errorTextElement){
                errorTextElement.removeAttribute('id');
                errorTextElement.removeAttribute('role');
                ...
        }
        ...
}
...

[muhroots]

Awesome!! This really improves accessibility.

[lucas-azambuja]

Nice!

[shayanpaul]

Hello, @sha256, Will it be possible to merge this pull request so that this great client side validation plugin can have the accessibility feature. Its a humble request to you. It will be a great help as we are using this library

[shayanpaul]

@enriqueprieto will it possible to resolve the conflicts of this branch in case @sha256 decide to merge this.

[sha256]

Merged and published to npm. Thank you @enriqueprieto and @shayanpaul

[enriqueprieto]

Thank you @sha256 and @shayanpaul