Spaces:
Sleeping
Sleeping
| <!-- VIOLATION: missing lang attribute on <html> --> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Helix CRM</title> | |
| <style> | |
| body { font-family: Inter, Arial, sans-serif; margin: 0; background: #f5f6fa; color: #1c1c1c; } | |
| .app { display: flex; min-height: 100vh; } | |
| .sidebar { width: 230px; background: #1f2937; color: #cfd6e1; padding: 20px 16px; } | |
| .sidebar h2 { color: #fff; font-size: 18px; margin: 0 0 20px; } | |
| .sidebar ul { list-style: none; padding: 0; margin: 0; } | |
| .sidebar li { margin-bottom: 10px; } | |
| .sidebar a { color: #cfd6e1; text-decoration: none; display: block; padding: 8px 10px; border-radius: 4px; } | |
| .sidebar a:hover { background: #374151; } | |
| .main { flex: 1; padding: 24px; } | |
| .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } | |
| .topbar h1 { margin: 0; font-size: 22px; } | |
| .icon-btn { background: transparent; border: 1px solid #d0d4dc; padding: 6px 10px; border-radius: 4px; cursor: pointer; font-size: 16px; } | |
| .tabs { display: flex; gap: 4px; border-bottom: 1px solid #d0d4dc; margin-bottom: 16px; } | |
| .tab { padding: 10px 16px; cursor: pointer; background: #eef0f5; border: 1px solid #d0d4dc; border-bottom: 0; border-radius: 6px 6px 0 0; } | |
| .tab.active { background: #fff; font-weight: 600; } | |
| .tab-panel { background: #fff; border: 1px solid #d0d4dc; padding: 20px; border-radius: 0 6px 6px 6px; } | |
| .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } | |
| .field { display: flex; flex-direction: column; } | |
| .field label { font-size: 13px; margin-bottom: 4px; color: #444; } | |
| .field input, .field select { padding: 8px; border: 1px solid #c0c4cc; border-radius: 4px; font-size: 14px; } | |
| .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; } | |
| .modal { background: #fff; width: 480px; padding: 24px; border-radius: 8px; } | |
| .modal h2 { margin-top: 0; } | |
| .modal-actions { text-align: right; margin-top: 16px; } | |
| .modal-actions button { margin-left: 8px; padding: 8px 16px; } | |
| /* VIOLATION: low-contrast footer text */ | |
| footer { padding: 20px 24px; color: #bfbfbf; background: #ffffff; text-align: center; font-size: 12px; } | |
| .img-card { display: inline-block; margin-right: 16px; vertical-align: top; } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- VIOLATION: missing skip-navigation link --> | |
| <div class="app"> | |
| <nav class="sidebar" aria-label="Primary"> | |
| <h2>Helix CRM</h2> | |
| <ul> | |
| <li><a href="/dashboard">Dashboard</a></li> | |
| <li><a href="/contacts">Contacts</a></li> | |
| <li><a href="/deals">Deals</a></li> | |
| <li><a href="/reports">Reports</a></li> | |
| <li><a href="/settings">Settings</a></li> | |
| </ul> | |
| </nav> | |
| <section class="main"> | |
| <div class="topbar"> | |
| <h1>Contact: Jordan Reyes</h1> | |
| <div> | |
| <!-- VIOLATION: icon-only buttons without aria-label (empty buttons) --> | |
| <button class="icon-btn">⚙</button> | |
| <button class="icon-btn">💾</button> | |
| <button class="icon-btn">🗑</button> | |
| </div> | |
| </div> | |
| <div class="img-card"> | |
| <!-- VIOLATION: image missing alt --> | |
| <img src="/avatars/jordan.png" width="80" height="80"> | |
| </div> | |
| <div class="img-card"> | |
| <!-- VIOLATION: image missing alt --> | |
| <img src="/badges/vip.png" width="60" height="60"> | |
| </div> | |
| <!-- VIOLATION: tab UI missing role="tablist", role="tab", role="tabpanel", aria-selected, aria-controls --> | |
| <div class="tabs"> | |
| <div class="tab active">Overview</div> | |
| <div class="tab">Activity</div> | |
| <div class="tab">Notes</div> | |
| </div> | |
| <div class="tab-panel"> | |
| <h2>Overview</h2> | |
| <p>Update Jordan's profile and shipping information below.</p> | |
| <form action="/contacts/jordan/save" method="post"> | |
| <div class="row"> | |
| <div class="field"> | |
| <label for="first">First name</label> | |
| <input id="first" name="first" type="text" value="Jordan"> | |
| </div> | |
| <div class="field"> | |
| <label for="last">Last name</label> | |
| <input id="last" name="last" type="text" value="Reyes"> | |
| </div> | |
| <div class="field"> | |
| <!-- VIOLATION: <select> without label --> | |
| <select name="country"> | |
| <option>United States</option> | |
| <option>Canada</option> | |
| <option>United Kingdom</option> | |
| </select> | |
| </div> | |
| </div> | |
| <h3>Shipping address</h3> | |
| <div class="row"> | |
| <!-- VIOLATION: address fields missing autocomplete attributes --> | |
| <div class="field"> | |
| <label for="street">Street</label> | |
| <input id="street" name="street" type="text"> | |
| </div> | |
| <div class="field"> | |
| <label for="city">City</label> | |
| <input id="city" name="city" type="text"> | |
| </div> | |
| <div class="field"> | |
| <label for="zip">Postal code</label> | |
| <input id="zip" name="zip" type="text"> | |
| </div> | |
| </div> | |
| <p><button type="submit">Save changes</button></p> | |
| </form> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- VIOLATION: modal dialog missing role="dialog", aria-modal, aria-labelledby --> | |
| <div class="modal-backdrop"> | |
| <div class="modal"> | |
| <h2>Confirm deletion</h2> | |
| <p>Are you sure you want to delete this contact? This action cannot be undone.</p> | |
| <div class="modal-actions"> | |
| <button>Cancel</button> | |
| <button>Delete</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- VIOLATION: aria-hidden on container with focusable children --> | |
| <div aria-hidden="true"> | |
| <a href="/help">Help</a> | |
| <button>Open chat</button> | |
| </div> | |
| <!-- VIOLATION: duplicate id (also breaks aria references) --> | |
| <div id="first">Duplicate id node</div> | |
| <!-- VIOLATION: table without <th> headers (empty-table-header / th-has-data-cells) --> | |
| <table> | |
| <tr><td>Name</td><td>Email</td><td>Status</td></tr> | |
| <tr><td>Acme</td><td>a@b.com</td><td>Active</td></tr> | |
| <tr><td>Globex</td><td>c@d.com</td><td>Active</td></tr> | |
| </table> | |
| <!-- VIOLATION: aria-required-children — listbox role without proper option children --> | |
| <div role="listbox"> | |
| <div>Option A</div> | |
| <div>Option B</div> | |
| </div> | |
| <!-- VIOLATION: input with role=combobox but no accessible name (aria-input-field-name) --> | |
| <input type="text" role="combobox"> | |
| <!-- VIOLATION: label-content-name-mismatch — visible text says "Submit" but aria-label is "Cancel" --> | |
| <button aria-label="Cancel">Submit</button> | |
| <footer> | |
| <p>© 2026 Helix CRM, Inc.</p> | |
| </footer> | |
| </body> | |
| </html> | |