Skip to content

Dismiss tooltip on press of esc key #3066

@jamestalmond

Description

@jamestalmond

Is there an existing issue for this?

  • I have searched the existing issues

Code of Conduct

  • I agree to follow this project's Code of Conduct

Feature Request

As part of a recent accessibility audit, it's been flagged that VictoryTooltip that appear on hover cannot be dismissed by pressing the escape key.

I've been trying to find a work around to resolve this issue, however, there doesn't appear to be a way of doing this that I can find.

I suspect that ability would need to be added internally to this:

const activate = props.activateData ? [{
  target: "labels",
  mutation: () => ({
    active: true
  })
}, {
  target: "data",
  mutation: () => ({
    active: true
  })
}] : [{
  target: "labels",
  mutation: () => ({
    active: true
  })
}];
const deactivate = props.activateData ? [{
  target: "labels",
  mutation: () => ({
    active: undefined
  })
}, {
  target: "data",
  mutation: () => ({
    active: undefined
  })
}] : [{
  target: "labels",
  mutation: () => ({
    active: undefined
  })
}];
return [{
  target: "data",
  eventHandlers: {
    onMouseOver: () => activate,
    onFocus: () => activate,
    onTouchStart: () => activate,
    onMouseOut: () => deactivate,
    onBlur: () => deactivate,
    onTouchEnd: () => deactivate
  }
}];

Can this functionality be added? Better yet, could a feature be added which enables consumers to pass in their own onKeyUp events?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type: Enhancement ✏️An enhancement or feature proposal that will be addressed after the next release

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions