https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • m
    clearly this channel doesn't understand modern HTML
  • h
    it would be a post still - the actual mechanics of the form submission aren't changing
  • h
    I'm just using hx-post over button type=submit
  • g
    a screenreader user will hear:
    Copy code
    Username, text
Password, text
Login, link
Sign up, link
    is this a login form or a signup form?
  • m
    Copy code
    html
<div class="paragraph">
  <div class="button">Go To The Next Page</div>
  <div class="link">Submit Feedback</div>
</div>
  • h
    I know very little about screenreaders so that is exactly what I'm looking for
  • m
    OK, I will cease hurting the discussion now
  • h
    what are the cases where using a link actually hurts the UX
  • h
    so now the component becomes
  • g
    Copy code
    css
.wrapper::before { content: "Go To The Next Page" }
.wrapper::after  { content: "Submit Feedback" }
  • h
    Copy code
    html
 <button type=submit class="sr-only"> {{label}}</button>
<a class="btn-primary" hx-post="place" hx-target="closest form"> {{label]]</a>
  • g
  • g
    Copy code
    html
{% set tag to "a" if link else "button" %}
<{{tag}} class="btn-primary" hx-post="place" hx-target="closest form"> {{label}}</{{tag}}>
  • g
    Copy code
    Username, text
Password, text
Login, pushbutton
Sign up, link
    with proper html, the purpose of the form is clear
  • h
    so that's an interesting resource - but the link section says:
  • h
    Not keyboard focusable No key events by default link instead of button role Shows wrong cursor on hover
  • h
    links are keyboard focusable and do show the right cursor by default
  • h
    the role is a good point - that is something you'd have to manage manually
  • h
    What key events am I missing - they both support keyup/keydown
  • g
    links show pointing hand whereas buttons show normal arrow
  • h
    do they? I must have a local sheet to override that globally
  • h
    not sure I've ever wanted a button to not show a pointer
  • g
    looking for more on the key events thing
  • h
    screen readers use role right?
  • g
    buttons can be triggered with the space key
  • g
    with links it just scrolls down
  • h
    interesting
  • g
    Adrian Roselli February 14, 2020 > Key handling note on native controls: > > events triggered by the space bar fire when the key is released (or onkeyup); > events triggered by the Enter key will fire the event as soon as you press the key down (or onkeydown). > > I have done testing with keyboard-only and screen reader users and while they may not know this behavior, they generally react with a bit of surprise when it is not followed. If you are trying to re-create a native control, make sure the keyboard handlers correspond. A pen where you can try it yourself. https://css-tricks.com/a-complete-guide-to-links-and-buttons/
  • h
    I've only ever used enter for both
  • g
    i use space for buttons regularly
1...760761762...1146Latest