Can't edit a comment without the mouse

Question

If I write a comment, make a typo, submit the comment, and then notice the mistake and want to correct it by editing the comment, I can't do that as a keyboard-only user.

If I try to tab to the "edit" button, the focus goes from the timestamp of the comment, straight to the (invisible) delete button, skipping right over the "edit" button.

Could we please be able to tab to "edit"?

_{If you're confused as to why it's important that things be accessible without the mouse, please read up on keyboard accessibility. While I thankfully don't have any physical problems with using a mouse, I'm using my time with a broken mouse to give accessibility feedback so that people who need it can get a better site experience.}

Answer 1

This is fixed.

Now Edit and Delete are both button elements, styled with <button class="s-btn s-btn__link">, making them easily tabbable. "Delete" now also appears not just on hover but also when focus is inside the comment. "Delete" is also spelled out now to match the style of "Edit".

This was an interesting problem because:

1. We want Enter to work inside the text area, but we don't want that initial keypress that focused the text area to submit the form.
2. We want Esc to cancel an edit, but not if we're doing an @ reply.
3. We need elements to focus correctly on browsers that don't support :focus-within (Edge and IE) and we don't want elements hidden on browsers that don't truly support hover (mobile Safari).
4. We want elements to be accessible to screen readers, including those that don't shift focus while moving their pointers (mobile VoiceOver).
5. Moderators have a lot of hidden elements, and we don't just want to show everything.

For the textarea stuff, it was mostly just waiting until a keypress happens inside the text area (giving users a device configurable 500ms+ window to lift their finger) and coding around the nuances of our mention autocompletes.

For the sometimes hidden buttons, I came up with the following:

.comment-text {
    .hover-only-label {
        visibility: hidden;
    }

    &:hover {
        .hover-only-label {
            visibility: visible;
        }
    }

    // Show the labels when the comment is keyboard focused.  This has to be on its own line for IE to work.
    &:focus-within {
        .hover-only-label {
            visibility: visible;
        }
    }

    // Edge and IE don't support :focus-within, so show their contents when the button is focused.
    button:focus .hover-only-label {
        visibility: visible;
    }

    // Mobile devices don't really support hover how we want to use it here.  Instead just show the hidden elements.
    @media (hover: none) {
        .hover-only-label {
            visibility: visible;
        }
    }
}

<button class="s-btn s-btn__link fc-red-600" title="delete this comment" aria-label="Delete"><span class="hover-only-label">Delete</span></button>

As described in the comments, "Delete" (and for moderators "Edit") is visible if any of the following are true:

1. You hover over a comment.
2. You focus within a comment (where supported).
3. You focus within Delete/Edit itself (IE and Edge).
4. You're on a mobile browser.

Even when none are true, it still has an aria label and is clickable to a screen reader.