Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Tag): Add keyboard accessibility #7060

Merged
merged 5 commits into from
Nov 13, 2024
Merged

Conversation

jscheiny
Copy link
Contributor

@jscheiny jscheiny commented Nov 12, 2024

Fixes #4782

Changes proposed in this pull request:

In this PR we pull out the common accessibility functionality from the button components to be shared with the tag component. This enables the tag component to be keyboard accessible when interactive={true}

@changelog-app
Copy link

changelog-app bot commented Nov 12, 2024

Generate changelog in packages/core/changelog/@unreleased

What do the change types mean?
  • feature: A new feature of the service.
  • improvement: An incremental improvement in the functionality or operation of the service.
  • fix: Remedies the incorrect behaviour of a component of the service in a backwards-compatible way.
  • break: Has the potential to break consumers of this service's API, inclusive of both Palantir services
    and external consumers of the service's API (e.g. customer-written software or integrations).
  • deprecation: Advertises the intention to remove service functionality without any change to the
    operation of the service itself.
  • manualTask: Requires the possibility of manual intervention (running a script, eyeballing configuration,
    performing database surgery, ...) at the time of upgrade for it to succeed.
  • migration: A fully automatic upgrade migration task with no engineer input required.

Note: only one type should be chosen.

How are new versions calculated?
  • ❗The break and manual task changelog types will result in a major release!
  • 🐛 The fix changelog type will result in a minor release in most cases, and a patch release version for patch branches. This behaviour is configurable in autorelease.
  • ✨ All others will result in a minor version release.

Type

  • Feature
  • Improvement
  • Fix
  • Break
  • Deprecation
  • Manual task
  • Migration

Description

fix(Tag): Add keyboard accessibility

Check the box to generate changelog(s)

  • Generate changelog entry

@svc-palantir-github
Copy link

fix(Tag): Add keyboard accessibility

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@jscheiny jscheiny marked this pull request as ready for review November 12, 2024 22:48
@svc-palantir-github
Copy link

Add generated changelog entries

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

ref: React.Ref<E>;
}

export function useInteractiveAttributes<E extends HTMLElement>(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: can we add tests for this hook with @testing-library/react-hooks in a follow-up PR?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, sgtm

packages/core/src/components/button/buttons.tsx Outdated Show resolved Hide resolved
onClick: interactive ? onClick : undefined,
onFocus: interactive ? onFocus : undefined,
onKeyDown: handleKeyDown,
onKeyUp: handleKeyUp,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this function the same if we were to conditionally render the inclusion of all the handlers based on the interactive flag? e.g.

const handlers = {
    onBlur: handleBlur,
    onClick,
    onFocus,
    onKeyDown: handleKeyDown,
    onKeyUp: handleKeyUp,
};

return [
    resolvedActive,
    {
        ...(interactive ? handlers : {}),
        ref: mergeRefs(elementRef, ref),
        tabIndex: interactive ? tabIndex : -1,
    },
];

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very likely I think, but I wanted to quite safe to avoid any unintentional side effects so I wanted to match the button behavior as close as possible.

@svc-palantir-github
Copy link

CR

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

@jscheiny jscheiny merged commit b7b44d0 into develop Nov 13, 2024
13 checks passed
@jscheiny jscheiny deleted the js/tag-keyboard-interactivity branch November 13, 2024 20:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tag onClick does not fire with spacebar or enter press when focused
4 participants