Skip to content

Legend focus causes unexpected scrolling when container is scaled and accessibility is enabled #16497

Description

@pvsleeper

Expected behaviour

When the legend receives focus, the chart should not scroll out of view.

Actual behaviour

When focusing on a legend and a scaling transform is applied, the chart scrolls half way out of view.

This is probably a strange use case, but we do use a scaling transform in our product which unfortunately results in this behaviour. From what I can tell, the root cause is because the "proxy" buttons that gets created is usually located exactly on top of the legend item. When a scaling transform is applied, it seems to be calculating its position incorrectly. This button is the actual element that receives focus, and the browser thinks the thing its focusing is outside of the viewport and tries to scroll it into view for you, causing this issue.

Live demo with steps to reproduce

https://jsfiddle.net/bfuLdo5n/15/

Product version

9.2.2

Affected browser(s)

Google Chrome, Edge

Activity

  1. added a commit that references this issue on Dec 2, 2021
    682a80a
  2. added a commit that references this issue on Dec 3, 2021
    e7983c7
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions