AJAXPoll extension is currently structured mostly with '''<div>''' elements, and some of the custom attributes are being stated incorrectly. This is what it currently looks like, which is quite messy and needs to be refactored.
Current state
<div id="ajaxpoll-container-POLLID"> <script>var useAjax=true;</script> <div id="ajaxpoll-id-POLLID" class="ajaxpoll"> <!-- If vote has been revoked --> <div id="ajaxpoll-POLLID" class="ajaxpoll-ajax" style="display: inline-block;"> Your vote has been revoked </div> <!-- If vote has been added --> <div id="ajaxpoll-POLLID" class="ajaxpoll-ajax" style="display: inline-block;"> Your vote has been added </div> <!-- If vote hasn't been chosen yet --> <div id="ajaxpoll-POLLID" class="ajaxpoll-ajax" style="display: none;"></div> </div> <div class="ajaxpoll-question">{{{QUESTION}}}</div> <div class="ajaxpoll-misc"> "You voted for "{{{ANSWER}}}" on DD MONTHNAME at hh:mm. You can change your vote by clicking a different answer below." </div> <form method="post" action="" id="ajaxpoll-answer-id-POLLID"> <input type="hidden name="ajaxpoll-post-id" value="POLLID"> </form> <div id="ajaxpoll-answer-POLLID-NUM" class="ajaxpoll-answer" poll="POLLID" answer="NUM"> <div class="ajaxpoll-answer-name ajaxpoll-answer-name-revoke"> <label for="ajaxpoll-post-answer-POLLID-NUM" class> <input type="radio" id="ajaxpoll-post-answer-POLLID-NUM" name="ajaxpoll-post-answer-POllID" value="1"> </label> {{{ANSWER}}} </div> <div class="ajaxpoll-answer-vote ajaxpoll-our-vote"> <span title="PERCENT% of all votes">NUMBEROFVOTES</span> <div style="width:PERCENT%;"></div> </div> </div> <!-- repeat answer element etc etc since poll has multiple choices--> <div class="printfooter"> Retrieved from "<a dir="ltr" href="SITE/index.php?title=PAGENAMEamp;oldid=OLDID">http://SITE/index.php?title=PAGENAME&oldid=OLDID</a>" </div> </div>
Suggestion
- Custom attributes should start with the data prefix:
- answer attribute should look like data-ajaxpoll-answers
- poll attribute should look like data-ajaxpoll-pollID
- The input type="radio" should not be inside a label element. The name and input can't be correctly associated with assistive technology devices, and it's discouraged by the W3C and sites compliant with WCAG by the same reason.
- Too many divs! Semantic elements exist for a reason. :D
- Poll title: h1 instead of div
- Poll container: form instead of div
- Poll footer: footer instead of div
- etc etc
<form id="ajaxpoll-pollID" class="ajaxpoll-form" data-ajax-pollID="pollID"> <header class="ajaxpoll-header"> <h1 class="ajaxpoll-question">Favorite pizza?</h1> <p class="ajaxpoll-vote-state" id="ajaxpoll-vote-state-revoked" data-ajaxpoll-vote-state="revoked">Your vote has been revoked.</p> <p class="ajaxpoll-vote-state" id="ajaxpoll-vote-state-added" data-ajaxpoll-vote-state="added">Your vote has been added.</p> <p class="ajaxpoll-vote-date">You voted on MONTH DAY, YEAR at hh:mm. You can change your answer by clicking a different choice below.</p> </header> <ul class="ajaxpoll-choices"> <li id="ajaxpoll-choice-1" class="ajaxpoll-choice" data-ajaxpoll-choice="1"> <input type="radio"> <label>YES</label> </li> <li id="ajaxpoll-choice-2" class="ajaxpoll-choice" data-ajaxpoll-choice="2"> <input type="radio" for="poll-choice"> <label>NO</label> </li> </ul> <footer class="ajaxpoll-printfooter"> <p>Retrieved from <a href=""></a> </p> </footer> </form>
Other comments
Not sure what to do with the input hidden stuff so I left it out. Also I might've just forgotten some other stuff so please tell me if you find something. Also feel free to give feedback and suggestions, thanks :)