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(color-area,color-slider): color-area labeling, RTL support, vertical slider orientation #3313 #3315

Merged
merged 3 commits into from
Jul 11, 2023

Conversation

majornista
Copy link
Contributor

@majornista majornista commented Jun 13, 2023

Description

Related issue(s)

Motivation and context

How has this been tested?

  • Test case 1
    1. Go here
    2. Do this
  • Test case 2
    1. Go here
    2. Do this

Screenshots (if appropriate)

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

  • I have signed the Adobe Open Source CLA.
  • My code follows the code style of this project.
  • If my change required a change to the documentation, I have updated the documentation in this pull request.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

@majornista majornista added bug Something isn't working a11y Issues related to accessibility Component: Color slider Component: Color Area labels Jun 13, 2023
@github-actions
Copy link

github-actions bot commented Jun 13, 2023

Tachometer results

Chrome

color-area permalink

Version Bytes Avg Time vs remote vs branch
npm latest 430 kB 180.81ms - 182.07ms - faster ✔
22% - 23%
50.28ms - 52.60ms
branch 433 kB 231.91ms - 233.86ms slower ❌
28% - 29%
50.28ms - 52.60ms
-

color-slider permalink

Version Bytes Avg Time vs remote vs branch
npm latest 434 kB 162.67ms - 163.89ms - faster ✔
15% - 16%
29.34ms - 31.21ms
branch 434 kB 192.85ms - 194.27ms slower ❌
18% - 19%
29.34ms - 31.21ms
-

color-wheel permalink

Version Bytes Avg Time vs remote vs branch
npm latest 436 kB 165.45ms - 167.08ms - faster ✔
3% - 4%
5.38ms - 7.50ms
branch 434 kB 172.03ms - 173.38ms slower ❌
3% - 5%
5.38ms - 7.50ms
-
Firefox

color-area permalink

Version Bytes Avg Time vs remote vs branch
npm latest 430 kB 404.06ms - 421.46ms - faster ✔
24% - 29%
134.43ms - 168.69ms
branch 433 kB 549.56ms - 579.08ms slower ❌
32% - 41%
134.43ms - 168.69ms
-

color-slider permalink

Version Bytes Avg Time vs remote vs branch
npm latest 434 kB 399.00ms - 415.92ms - faster ✔
20% - 27%
102.50ms - 147.22ms
branch 434 kB 511.62ms - 553.02ms slower ❌
25% - 36%
102.50ms - 147.22ms
-

color-wheel permalink

Version Bytes Avg Time vs remote vs branch
npm latest 436 kB 389.15ms - 411.69ms - faster ✔
11% - 18%
51.13ms - 82.95ms
branch 434 kB 456.23ms - 478.69ms slower ❌
12% - 21%
51.13ms - 82.95ms
-

Copy link
Collaborator

@najikahalsema najikahalsema left a comment

Choose a reason for hiding this comment

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

I'm curious about the change in values for some of the tests. If you could explain those to me, I'd really appreciate it!

}

private handleFocusout(): void {
private handleBlur(): void {
Copy link
Collaborator

Choose a reason for hiding this comment

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

I like the name change of these functions!

this.addEventListener('focusin', this.handleFocusin);
this.addEventListener('focusout', this.handleFocusout);
this.addEventListener('focus', this.handleFocus);
this.addEventListener('blur', this.handleBlur);
Copy link
Collaborator

Choose a reason for hiding this comment

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

I do worry about the API name change not being consistent with our other components, though. I think this is going in the right direction, but I feel like it would be good for me to confer with the rest of the team.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The function name for these private methods can remain handleFocusin/handleFocusout, but we should listen for the focus and blur events in order to set the focused state properly.

packages/color-area/test/color-area.test.ts Show resolved Hide resolved
@majornista majornista linked an issue Jun 15, 2023 that may be closed by this pull request
1 task
najikahalsema
najikahalsema previously approved these changes Jun 22, 2023
@majornista majornista force-pushed the Issue-3313-ColorArea-a11y branch from c299401 to 5f1c3b5 Compare July 10, 2023 19:34
@majornista majornista requested a review from najikahalsema July 10, 2023 21:54
najikahalsema
najikahalsema previously approved these changes Jul 11, 2023
Copy link
Collaborator

@najikahalsema najikahalsema left a comment

Choose a reason for hiding this comment

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

LGTM! Just resolve the conflicts and it should be good to go.

Copy link
Contributor

@Westbrook Westbrook left a comment

Choose a reason for hiding this comment

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

That flakey test is on our end, :shipit:!

Thanks @majornista 🙇🏼

@Westbrook Westbrook merged commit ca2acda into main Jul 11, 2023
@Westbrook Westbrook deleted the Issue-3313-ColorArea-a11y branch July 11, 2023 16:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
a11y Issues related to accessibility bug Something isn't working Component: Color Area Component: Color slider
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug][a11y]: ColorArea labelling, RTL support, vertical slider orientation
3 participants