#63: Fix HTML5 validation issues

[masteradhoc]

What?

Fixes HTML5 validation issues.

Fixes #63.

Why?

The plugin's output contained several XHTML-isms and non-conforming patterns that fail HTML5 validation

How?

• Remove XHTML-style self-closing void elements — <input />, <img />, <br />, <hr /> → no trailing slash, across all provider and core files.
• Remove XHTML-style boolean attribute — disabled="disabled" → disabled on the profile page fieldset.
• Convert "Copy Codes" from <a> to <button> — the element has no URL destination; <a href="javascript:void(0);"> is non-conforming. The JS targets it by class so no JS changes needed.
• Add href="#" to "Download Codes" <a> — HTML5 requires href when download is present. The JS sets the real data URI href after code generation; # is just a valid placeholder.
• Remove duplicate inline <style> block — the block in class-two-factor-core.php was already moved to user-edit.css by Move class-two-factor-core.php login styles from inline to enqueued stylesheet #807, but was accidentally reintroduced by Move inline JS to external script files #814 while refactoring inline JS. This removes it again.

Note: type="text/javascript" and type="text/css" in includes/ are intentionally left — those files track WordPress Core.

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 4.8
Used for: Drafting the implementation and PR text. Code reviewed and edited by me.

Testing Instructions

1. Log in as a user with 2FA enabled — verify the login form renders correctly for TOTP, Email, and Backup Codes providers.
2. Visit your profile page — confirm the Two-Factor Options section displays and saves correctly, including enabling/disabling providers and setting a primary method.
3. On the profile page, generate new backup codes — confirm the Copy and Download buttons work.
4. Run the browser's HTML validator extension against the login page and profile page — no new errors should appear for any of the changed elements.

Screenshots or screencast

Before	After

Changelog Entry

Fixed - Bring plugin HTML output into conformance with the HTML5 spec

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: masteradhoc <masteradhoc@git.wordpress.org>
Co-authored-by: georgestephanis <georgestephanis@git.wordpress.org>
Co-authored-by: kraftbj <kraftbj@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[georgestephanis]

Either changes or clarifications requested here --

Two buttons, both alike in dignity,
In fair WordPress, where we lay our scene,

• William Shakespeare, Romeo + Juliet (paraphrased)

[georgestephanis]

Why are we bumping one to button but not the other?

[masteradhoc]

@georgestephanis The copy button doesnt really link anywhere - so no href/navigation purpose — it's pure JS. Thats why is the correct semantic element IMO.

The download link has to remain an because it uses the download attribute, which only works on anchors — so that one just got its href swapped to # instead.

[Copilot]

Pull request overview

This PR updates the Two-Factor plugin’s rendered HTML to better conform to the HTML5 spec, focusing on removing XHTML-isms and invalid patterns in the login and profile/provider UIs.

Changes:

• Remove XHTML-style self-closing syntax from void elements (<input />, <img />, <br />, <hr />) across settings, providers, and core output.
• Adjust profile/backup-codes UI markup for HTML5 validity (boolean disabled, “Copy Codes” as a <button>, add placeholder href for downloadable link).
• Remove a duplicated inline <style> block from the login HTML path (styles already exist in user-edit.css).

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
settings/class-two-factor-settings.php	Removes XHTML-style self-closing from provider checkbox input.
providers/class-two-factor-totp.php	Removes XHTML-style self-closing from TOTP setup/login markup (img, input).
providers/class-two-factor-email.php	Removes XHTML-style self-closing from email auth inputs/buttons.
providers/class-two-factor-backup-codes.php	Converts “Copy Codes” to <button>, adds href for download link, removes XHTML-style self-closing input.
class-two-factor-core.php	Updates login/profile HTML output for HTML5 conformance and removes duplicated inline CSS block.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.