686 add skip to topbottom links to chat

ScottLogic / prompt-injection

Application which investigates defensive measures against prompt injection attacks on an LLM, with a focus on the exposure of external tools.

MIT License

13 stars 9 forks source link

686 add skip to topbottom links to chat #846

Closed dhinrichs-scottlogic closed 4 months ago

dhinrichs-scottlogic commented 5 months ago

Description

Added two skip links, which are visually hidden until you tab to them. Skip link 1 is at the beginning of the chatbox, which brings you to the chat input. Skip link 2 is just above the chat input and brings you to skip link 1.

Screenshots

Skip link 1: Skip link 2:

GIVEN The the keyboard focus is on the chat input WHEN the user tabs to the previous element (shift + tab) THEN the "skip to top of chat" skip link shows up

WHEN the user activates that link (enter) THEN the keyboard focus jumps to the "skip to chat input" skip link at the top of the chatbox

WHEN the user activates that link (enter) THEN the keyboard focus jumps to the chat input

WHEN the keyboard focus is not on the skip links THEN the skip links are not visible

Checklist

Have you done the following?

[x] Linked the relevant Issue
[ ] Added tests
[x] Ensured the workflow steps are passing

AAloshine-scottlogic commented 5 months ago

Also, maybe the skip to top of chat might look better below the text box? it seems pretty abrupt the way it is now? maybe some padding above/below

dhinrichs-scottlogic commented 4 months ago

Also, maybe the skip to top of chat might look better below the text box? it seems pretty abrupt the way it is now? maybe some padding above/below @AAloshine-scottlogic

The skip to top link below the chat input seems counterintuitive to me. Tab order is linear, so I don't want to burden users with having to remember that they need to go forwards in order to find the link to go backwards.

That being said, if you want to wireframe your ideas and talk it through more, I'm definitely up for that, always keen to explore creative solutions :)

To make the skip links showing up less jarring, I'll look into adding some transition effects to blend the links in more slowly.

chriswilty commented 4 months ago

@dhinrichs-scottlogic A transition on opacity could work in theory, but as you are setting width from 1px to 100% you won't see the fade-out, only the fade-in (or vice versa). You can possibly get around that by using a delayed transition on width only in the "normal" selector, so that when the element gains focus the width changes to 100% instantly, but when the element loses focus the width transition is delayed until the opacity transition has completed.

dhinrichs-scottlogic commented 4 months ago

@dhinrichs-scottlogic A transition on opacity could work in theory, but as you are setting width from 1px to 100% you won't see the fade-out, only the fade-in (or vice versa)[...]

As discussed, no fade-out, used opacity, and set the starting opacity to 0.1 instead of 0 to avoid the element being hidden from assistive tech