Prevent aria-describedby attribute being added to hidden inputs

[ahukkanen]

🎩 What? Why?

While fixing another bug (#10020) we discovered that the aria-* attributes are no longer valid HTML on hidden inputs.

This requires us to add some extra exclusions to the HTML validation process until foundation/foundation-sites#12496 is resolved.

But meanwhile investigating this issue, I also found one potential similar issue in the core character counter which I am fixing in this PR. The problem appears only if you initiate the character counter for hidden inputs, which is essentially what we are doing e.g. here for the WYSIWYG editors:

decidim/decidim-core/app/packs/src/decidim/index.js

Line 78 in 2fa06d4

$("input[type='text'], textarea, .editor>input[type='hidden']").each((_i, elem) => {

decidim/decidim-core/app/packs/src/decidim/redesigned_index.js

Line 142 in 2fa06d4

$("input[type='text'], textarea, .editor>input[type='hidden']").each((_i, elem) => {

📌 Related Issues

• Related to Ignore the problematics HTML validation checks with hidden inputs #10020

Testing

See that CI is green or run these manually (using the older HTML validator version that we use at CI):

$ cd decidim-core
$ bundle exec rpsec spec/system/messaging/conversations_spec.rb

[andreslucena]

I can't reproduce the error and the fix. This is what I'm trying:

1. Removing the relevant rule from the validators override:

diff --git a/decidim-dev/lib/decidim/dev/test/w3c_rspec_validators_overrides.rb b/decidim-dev/lib/decidim/dev/test/w3c_rspec_validators_overrides.rb
index 41987792be..24c1aef703 100644
--- a/decidim-dev/lib/decidim/dev/test/w3c_rspec_validators_overrides.rb
+++ b/decidim-dev/lib/decidim/dev/test/w3c_rspec_validators_overrides.rb
@@ -19,8 +19,7 @@ module W3CValidators

     def ignore_errors
       @ignore_errors ||= [
-        "An “input” element with a “type” attribute whose value is “hidden” must not have an “autocomplete” attribute whose value is “on” or “off”.",
-        "An “input” element with a “type” attribute whose value is “hidden” must not have any “aria-*” attributes."
+        "An “input” element with a “type” attribute whose value is “hidden” must not have an “autocomplete” attribute whose value is “on” or “off”."
       ]
     end

2. Running only the relevant examples on the conversations system spec:

$ bin/rspec decidim-core/spec/system/messaging/conversations_spec.rb -e "passes HTML validation" 2> /dev/null

I see these same failings in this branch and also on develop. As far as I understand they aren't related to the fix as:

a. they aren't about the character counter feature
b. conversations doesn't have WYSIWYG editor

The full output of the spec command (click to expand)

Run options: include {:full_description=>/passes\ HTML\ validation/}

Randomized with seed 23866
..FF

Failures:

1. Conversations when starting a conversation behaves like accessible page passes HTML validation
   Failure/Error: DEFAULT_FAILURE_NOTIFIER = lambda { |failure, _opts| raise failure }

   line 662: An “input” element with a “type” attribute whose value is “hidden” must not have any “aria-*” attributes.

   <form class="new_conversation" id="new_conversation_" novalidate="novalidate" data-abide="true" data-live-validate="true" data-validate-on-blur="true" action="/conversations" accept-charset="UTF-8" data-remote="true" method="post">
     <div class="conversation__reply">
   

      <input name="conversation[recipient_id][]" value="38" autocomplete="off" type="hidden" aria-describedby="sgimtc-abide-error">
   

       <label class="sr-only" for="conversation_body">Body</label>
       <span class="input-character-counter"><span class="emoji__container"><textarea required="required" maxlength="1000" rows="4" placeholder="Your message..." data-input-emoji="true" name="conversation[body]" id="conversation_body" aria-describedby="sgimtc-abide-error"></textarea><span class="emoji__trigger"><button class="emoji__button" type="button" aria-label="Add emoji"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg></button></span><span class="emoji__reference" style="position: absolute; display: block; bottom: -8px; right: -16px;"></span><span class="form-error" id="sgimtc-abide-error" role="alert">There's an error in this field.</span></span><span class="input-character-counter__container"><span role="status" id="conversation_body_characters_sr" class="sr-only remaining-character-count-sr">1000 characters left</span><span id="conversation_body_characters" class="input-character-counter__text" aria-hidden="true">1000 characters left</span></span></span>
       <button type="submit" name="commit" class="button button__sm button__secondary self-end mt-4">Send <svg width="1em" height="1em" role="img" aria-hidden="true" class="fill-current"><use href="/packs-test/media/images/remixicon.symbol-5540ed538fb6bd400d2a.svg#ri-arrow-right-line"></use></svg></button>
   

   Shared Example Group: "accessible page" called from ./spec/system/messaging/conversations_spec.rb:53

   /home/apereira/Work/decidim/decidim/decidim-dev/lib/decidim/dev/test/rspec_support/accessibility_examples.rb:132:in `block (2 levels) in <top (required)>'

2. Conversations when having a conversation with multiple participants and it's with ten participants when starting the conversation behaves like accessible page passes HTML validation
   Failure/Error: DEFAULT_FAILURE_NOTIFIER = lambda { |failure, _opts| raise failure }

   line 829: An “input” element with a “type” attribute whose value is “hidden” must not have any “aria-*” attributes.

   <div class="conversation__reply-container">
     <div data-conversation-reply="">
   

     <div class="conversation__reply">
       <label class="sr-only" for="message_body">Body</label>
       <span class="input-character-counter"><span class="emoji__container"><textarea required="required" maxlength="1000" rows="4" placeholder="Your reply..." data-input-emoji="true" name="message[body]" id="message_body" aria-describedby="jexvx0-abide-error"></textarea><span class="emoji__trigger"><button class="emoji__button" type="button" aria-label="Add emoji"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="smile" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentColor" d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"></path></svg></button></span><span class="emoji__reference" style="position: absolute; display: block; bottom: -8px; right: -16px;"></span><span class="form-error" id="jexvx0-abide-error" role="alert">There's an error in this field.</span></span><span class="input-character-counter__container"><span role="status" id="message_body_characters_sr" class="sr-only remaining-character-count-sr">1000 characters left</span><span id="message_body_characters" class="input-character-counter__text" aria-hidden="true">1000 characters left</span></span></span>
   

   Shared Example Group: "accessible page" called from ./spec/system/messaging/conversations_spec.rb:439

   /home/apereira/Work/decidim/decidim/decidim-dev/lib/decidim/dev/test/rspec_support/accessibility_examples.rb:132:in `block (2 levels) in <top (required)>'

Finished in 16.75 seconds (files took 6.55 seconds to load)
4 examples, 2 failures

Failed examples:

rspec ./spec/system/messaging/conversations_spec.rb[1:2:1:2] # Conversations when starting a conversation behaves like accessible page passes HTML validation
rspec ./spec/system/messaging/conversations_spec.rb[1:4:3:1:1:2] # Conversations when having a conversation with multiple participants and it's with ten participants when starting the conversation behaves like accessible page passes HTML validation

Randomized with seed 23866

Coverage report generated for RSpec to /home/apereira/Work/decidim/decidim/coverage/4. 9101 / 94970 LOC (9.58%) covered.

On others WYSIWYG editors with character counter I don't see any difference comparing it with nightly (but that also could be webpacker cache playing games with me again).

Am I doing something wrong?

[ahukkanen]

@andreslucena This won't fix the HTML validation issue at the specs until foundation/foundation-sites#12496 is merged and updated to Decidim. We still need that exclude rule.

This PR only fixes the same issue for the hidden inputs with the editors.

Please note this from the PR description:

This requires us to add some extra exclusions to the HTML validation process until foundation/foundation-sites#12496 is resolved.

[alecslupu]

@ahukkanen , Considering this PR is targeting the editor, please let me know how the work done here affects the work done in #10196

[ahukkanen]

@alecslupu This is not targeting the editor, this is related to the character counter.

This is relevant regardless of #10196.

[alecslupu]

As per https://www.w3.org/TR/html-aria/ no area-* should be applied to hidden elements:

[alecslupu]

I confirm there is no aria- attribute on the conversation form after applying this patch.