Accessible validation with aria-live and aria-describedby | Forem

PHOTO EMBED

Sat Dec 17 2022 10:15:00 GMT+0000 (UTC)

Saved by @metamoni #ruby #rubyonrails

# original code found at
# https://github.com/forem/forem/blob/8cbbc222e9a9c31f8cb8ab5e7b1df08c2109885b/app/views/admin/shared/_destroy_confirmation_modal.html.erb

<p id="confirmation-text-instructions">To confirm this update, type in the sentence: <br />
  <strong>My username is @<%= current_user.username %> and this action is 100% safe and appropriate.</strong>
</p>
<div id="mismatch-warning" class="crayons-notice crayons-notice--warning hidden" aria-live="polite">
  The confirmation text did not match.
</div>
  <input
    aria-label="Type the sentence above to confirm this update"
    aria-describedby="confirmation-text-instructions"
    type="text"
    id="confirmation-text-field"
    class="crayons-textfield flex-1 mr-2"
    placeholder="Confirmation text" />
</div>
content_copyCOPY

https://github.com/forem/forem/blob/8cbbc222e9a9c31f8cb8ab5e7b1df08c2109885b/app/views/admin/shared/_destroy_confirmation_modal.html.erb#L16