Git Product home page Git Product logo

Comments (3)

robertknight avatar robertknight commented on September 27, 2024

We already have a "Show" button that appears in the toolbar when already-highlighted text is selected, so one possibility is that when this button is triggered, we not only filter annotations in the sidebar (as we do now), but also transfer keyboard focus to the sidebar and to the annotation card for the first annotation in the selected set. Assuming the user has a way to select text with the keyboard, this provides a keyboard-only way to navigate from the highlight to the annotation in the sidebar.

In addition to focus transfer when clicking "Show", we'd also need to announce the "Show" shortcut. Perhaps the solution we land on for #4742 can be extended to include this.

A closely related thing we need to think about is how the user gets back to where they were in the document after they jump to the sidebar. My current thought is that we'll have some shortcut in the sidebar that returns focus back to the host/guest frame where focus was previously, and focuses the highlight that the user jumped from.

from client.

robertknight avatar robertknight commented on September 27, 2024

One issue I ran into while implementing this is that the client is currently a bit trigger happy when it comes to selecting annotations. The selection in the sidebar is changed not only when clicking on highlighted text, but also whenever the cursor is released inside a highlight. The "Show" action in the toolbar currently just triggers an update of the selection. If we're going to make it also move focus to the sidebar, we need to make sure that doesn't happen when eg. making a text selection that happens to end inside a highlight.

from client.

robertknight avatar robertknight commented on September 27, 2024

We already have a "Show" button that appears in the toolbar when already-highlighted text is selected, so one possibility is that when this button is triggered, we not only filter annotations in the sidebar (as we do now), but also transfer keyboard focus to the sidebar and to the annotation card for the first annotation in the selected set

I have this working locally. It works as intended in Chrome and Firefox. In Safari there is a complication that the sidebar cannot request focus until the user has interacted with it at least once since the top-level frame loaded. Prior to that window.focus() calls inside the sidebar are ignored, and if the host frame attempts to call focus() on the iframe element, the frame element is focused, but not the window it contains.

from client.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.