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

test(combobox): fulfil accessibility contract #3974

Merged
merged 2 commits into from
Jan 29, 2024
Merged

Conversation

najikahalsema
Copy link
Collaborator

@najikahalsema najikahalsema commented Jan 29, 2024

Description

Fulfil the accessibility contract for a combobox with tooltip by adding the "tooltip" as something that works for aria-describedby and wrote a test to make sure the description is linked to the combobox's tooltip.

Related issue(s)

Motivation and context

How has this been tested?

Manually tested, unit tests

  • Test case 1
    1. Go here
    2. Turn on screen reader
    3. Tab into combobox
    4. See that the combobox is described by not only the label, but also the tooltip text.
    5. Also look at the accessibility tab and see it's got a description, too, that matches the tooltip's text.

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.

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.

LGTM!

@najikahalsema najikahalsema merged commit 1807839 into combobox Jan 29, 2024
45 checks passed
@najikahalsema najikahalsema deleted the combobox-tooltip branch January 29, 2024 23:36
Copy link

Tachometer results

Chrome

accordion permalink

Version Bytes Avg Time vs remote vs branch
npm latest 419 kB 166.96ms - 169.64ms - unsure 🔍
-1% - +1%
-2.01ms - +1.61ms
branch 410 kB 167.28ms - 169.72ms unsure 🔍
-1% - +1%
-1.61ms - +2.01ms
-

action-bar permalink

Version Bytes Avg Time vs remote vs branch
npm latest 490 kB 90.83ms - 91.96ms - unsure 🔍
-3% - +1%
-3.13ms - +1.17ms
branch 481 kB 90.30ms - 94.45ms unsure 🔍
-1% - +3%
-1.17ms - +3.13ms
-

action-button permalink

Version Bytes Avg Time vs remote vs branch
npm latest 519 kB 112.07ms - 114.42ms - unsure 🔍
-3% - +2%
-3.49ms - +1.93ms
branch 510 kB 111.58ms - 116.47ms unsure 🔍
-2% - +3%
-1.93ms - +3.49ms
-

action-group permalink

Version Bytes Avg Time vs remote vs branch
npm latest 540 kB 70.86ms - 72.38ms - unsure 🔍
-1% - +2%
-0.46ms - +1.48ms
branch 531 kB 70.51ms - 71.72ms unsure 🔍
-2% - +1%
-1.48ms - +0.46ms
-

action-menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 651 kB 183.52ms - 186.73ms - unsure 🔍
-1% - +2%
-1.45ms - +2.95ms
branch 643 kB 182.86ms - 185.87ms unsure 🔍
-2% - +1%
-2.95ms - +1.45ms
-

alert-dialog permalink

Version Bytes Avg Time vs remote vs branch
npm latest 460 kB 127.03ms - 127.99ms - unsure 🔍
-1% - +0%
-0.72ms - +0.61ms
branch 451 kB 127.10ms - 128.02ms unsure 🔍
-0% - +1%
-0.61ms - +0.72ms
-

asset permalink

Version Bytes Avg Time vs remote vs branch
npm latest 363 kB 13.08ms - 13.52ms - unsure 🔍
-1% - +3%
-0.10ms - +0.36ms
branch 354 kB 13.12ms - 13.22ms unsure 🔍
-3% - +1%
-0.36ms - +0.10ms
-

avatar permalink

Version Bytes Avg Time vs remote vs branch
npm latest 401 kB 25.57ms - 25.99ms - unsure 🔍
-1% - +1%
-0.26ms - +0.23ms
branch 393 kB 25.67ms - 25.92ms unsure 🔍
-1% - +1%
-0.23ms - +0.26ms
-

badge permalink

Version Bytes Avg Time vs remote vs branch
npm latest 402 kB 36.29ms - 38.49ms - unsure 🔍
-3% - +5%
-1.29ms - +1.86ms
branch 393 kB 35.98ms - 38.23ms unsure 🔍
-5% - +3%
-1.86ms - +1.29ms
-

banner permalink

Version Bytes Avg Time vs remote vs branch
npm latest 362 kB 22.07ms - 22.26ms - unsure 🔍
-1% - +0%
-0.16ms - +0.09ms
branch 353 kB 22.12ms - 22.28ms unsure 🔍
-0% - +1%
-0.09ms - +0.16ms
-

button-group permalink

Version Bytes Avg Time vs remote vs branch
npm latest 447 kB 63.87ms - 64.95ms - unsure 🔍
-2% - +1%
-1.16ms - +0.44ms
branch 438 kB 64.18ms - 65.36ms unsure 🔍
-1% - +2%
-0.44ms - +1.16ms
-

button permalink

Version Bytes Avg Time vs remote vs branch
npm latest 453 kB 79.78ms - 81.18ms - unsure 🔍
-1% - +2%
-0.82ms - +1.45ms
branch 444 kB 79.26ms - 81.06ms unsure 🔍
-2% - +1%
-1.45ms - +0.82ms
-

card permalink

Version Bytes Avg Time vs remote vs branch
npm latest 510 kB 64.86ms - 65.54ms - unsure 🔍
-1% - +1%
-0.43ms - +0.53ms
branch 501 kB 64.81ms - 65.49ms unsure 🔍
-1% - +1%
-0.53ms - +0.43ms
-

checkbox permalink

Version Bytes Avg Time vs remote vs branch
npm latest 422 kB 97.55ms - 98.61ms - unsure 🔍
-0% - +1%
-0.21ms - +1.23ms
branch 413 kB 97.09ms - 98.06ms unsure 🔍
-1% - +0%
-1.23ms - +0.21ms
-

coachmark permalink

Version Bytes Avg Time vs remote vs branch
npm latest 365 kB 30.44ms - 30.61ms - unsure 🔍
-2% - +0%
-0.63ms - +0.10ms
branch 356 kB 30.44ms - 31.14ms unsure 🔍
-0% - +2%
-0.10ms - +0.63ms
-

color-area permalink

Version Bytes Avg Time vs remote vs branch
npm latest 459 kB 146.31ms - 147.25ms - unsure 🔍
-1% - +0%
-1.40ms - +0.01ms
branch 450 kB 146.94ms - 148.00ms unsure 🔍
-0% - +1%
-0.01ms - +1.40ms
-

color-handle permalink

Version Bytes Avg Time vs remote vs branch
npm latest 376 kB 46.58ms - 47.27ms - unsure 🔍
-1% - +1%
-0.24ms - +0.54ms
branch 368 kB 46.59ms - 46.96ms unsure 🔍
-1% - +1%
-0.54ms - +0.24ms
-

color-loupe permalink

Version Bytes Avg Time vs remote vs branch
npm latest 368 kB 31.30ms - 31.50ms - unsure 🔍
-1% - +0%
-0.27ms - +0.05ms
branch 359 kB 31.39ms - 31.63ms unsure 🔍
-0% - +1%
-0.05ms - +0.27ms
-

color-slider permalink

Version Bytes Avg Time vs remote vs branch
npm latest 461 kB 125.19ms - 126.26ms - unsure 🔍
-1% - +1%
-1.23ms - +0.65ms
branch 452 kB 125.24ms - 126.79ms unsure 🔍
-1% - +1%
-0.65ms - +1.23ms
-

color-wheel permalink

Version Bytes Avg Time vs remote vs branch
npm latest 463 kB 123.99ms - 126.04ms - unsure 🔍
-0% - +1%
-0.44ms - +1.79ms
branch 453 kB 123.91ms - 124.78ms unsure 🔍
-1% - +0%
-1.79ms - +0.44ms
-
Firefox

accordion permalink

Version Bytes Avg Time vs remote vs branch
npm latest 419 kB 300.71ms - 313.05ms - unsure 🔍
-1% - +4%
-3.61ms - +11.21ms
branch 410 kB 298.99ms - 307.17ms unsure 🔍
-4% - +1%
-11.21ms - +3.61ms
-

action-bar permalink

Version Bytes Avg Time vs remote vs branch
npm latest 490 kB 174.57ms - 181.35ms - unsure 🔍
-3% - +3%
-4.63ms - +4.91ms
branch 481 kB 174.47ms - 181.17ms unsure 🔍
-3% - +3%
-4.91ms - +4.63ms
-

action-button permalink

Version Bytes Avg Time vs remote vs branch
npm latest 519 kB 268.10ms - 280.82ms - unsure 🔍
-3% - +3%
-9.00ms - +9.20ms
branch 510 kB 267.84ms - 280.88ms unsure 🔍
-3% - +3%
-9.20ms - +9.00ms
-

action-group permalink

Version Bytes Avg Time vs remote vs branch
npm latest 540 kB 176.51ms - 185.09ms - unsure 🔍
-2% - +4%
-2.83ms - +6.99ms
branch 531 kB 176.33ms - 181.11ms unsure 🔍
-4% - +2%
-6.99ms - +2.83ms
-

action-menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 651 kB 335.55ms - 345.05ms - unsure 🔍
-2% - +3%
-6.14ms - +8.54ms
branch 643 kB 333.51ms - 344.69ms unsure 🔍
-3% - +2%
-8.54ms - +6.14ms
-

alert-dialog permalink

Version Bytes Avg Time vs remote vs branch
npm latest 460 kB 230.53ms - 239.35ms - unsure 🔍
-2% - +4%
-3.64ms - +8.16ms
branch 451 kB 228.77ms - 236.59ms unsure 🔍
-3% - +2%
-8.16ms - +3.64ms
-

asset permalink

Version Bytes Avg Time vs remote vs branch
npm latest 363 kB 29.29ms - 32.15ms - unsure 🔍
-6% - +8%
-1.84ms - +2.28ms
branch 354 kB 29.02ms - 31.98ms unsure 🔍
-7% - +6%
-2.28ms - +1.84ms
-

avatar permalink

Version Bytes Avg Time vs remote vs branch
npm latest 401 kB 59.16ms - 63.84ms - unsure 🔍
-5% - +5%
-2.80ms - +3.04ms
branch 393 kB 59.63ms - 63.13ms unsure 🔍
-5% - +5%
-3.04ms - +2.80ms
-

badge permalink

Version Bytes Avg Time vs remote vs branch
npm latest 402 kB 76.24ms - 81.40ms - faster ✔
4% - 13%
2.91ms - 11.69ms
branch 393 kB 82.56ms - 89.68ms slower ❌
4% - 15%
2.91ms - 11.69ms
-

banner permalink

Version Bytes Avg Time vs remote vs branch
npm latest 362 kB 41.88ms - 45.72ms - unsure 🔍
-6% - +6%
-2.77ms - +2.57ms
branch 353 kB 42.04ms - 45.76ms unsure 🔍
-6% - +6%
-2.57ms - +2.77ms
-

button-group permalink

Version Bytes Avg Time vs remote vs branch
npm latest 447 kB 171.79ms - 178.89ms - unsure 🔍
-2% - +3%
-4.00ms - +5.48ms
branch 438 kB 171.45ms - 177.75ms unsure 🔍
-3% - +2%
-5.48ms - +4.00ms
-

button permalink

Version Bytes Avg Time vs remote vs branch
npm latest 453 kB 184.82ms - 196.54ms - unsure 🔍
-3% - +5%
-4.79ms - +8.91ms
branch 444 kB 185.06ms - 192.18ms unsure 🔍
-5% - +2%
-8.91ms - +4.79ms
-

card permalink

Version Bytes Avg Time vs remote vs branch
npm latest 510 kB 130.15ms - 136.37ms - unsure 🔍
-3% - +4%
-3.98ms - +4.74ms
branch 501 kB 129.83ms - 135.93ms unsure 🔍
-4% - +3%
-4.74ms - +3.98ms
-

checkbox permalink

Version Bytes Avg Time vs remote vs branch
npm latest 422 kB 198.81ms - 208.07ms - unsure 🔍
-1% - +5%
-1.17ms - +9.69ms
branch 413 kB 196.36ms - 202.00ms unsure 🔍
-5% - +1%
-9.69ms - +1.17ms
-

coachmark permalink

Version Bytes Avg Time vs remote vs branch
npm latest 365 kB 44.32ms - 47.16ms - slower ❌
0% - 7%
0.01ms - 2.95ms
branch 356 kB 43.88ms - 44.64ms faster ✔
0% - 6%
0.01ms - 2.95ms
-

color-area permalink

Version Bytes Avg Time vs remote vs branch
npm latest 459 kB 239.37ms - 247.67ms - unsure 🔍
-1% - +3%
-2.64ms - +7.48ms
branch 450 kB 238.21ms - 243.99ms unsure 🔍
-3% - +1%
-7.48ms - +2.64ms
-

color-handle permalink

Version Bytes Avg Time vs remote vs branch
npm latest 376 kB 97.25ms - 104.07ms - unsure 🔍
-2% - +6%
-2.37ms - +6.37ms
branch 368 kB 95.92ms - 101.40ms unsure 🔍
-6% - +2%
-6.37ms - +2.37ms
-

color-loupe permalink

Version Bytes Avg Time vs remote vs branch
npm latest 368 kB 65.65ms - 72.43ms - unsure 🔍
-4% - +9%
-2.84ms - +5.84ms
branch 359 kB 64.82ms - 70.26ms unsure 🔍
-8% - +4%
-5.84ms - +2.84ms
-

color-slider permalink

Version Bytes Avg Time vs remote vs branch
npm latest 461 kB 230.19ms - 237.09ms - unsure 🔍
-2% - +2%
-5.54ms - +5.14ms
branch 452 kB 229.76ms - 237.92ms unsure 🔍
-2% - +2%
-5.14ms - +5.54ms
-

color-wheel permalink

Version Bytes Avg Time vs remote vs branch
npm latest 463 kB 213.35ms - 220.61ms - slower ❌
0% - 4%
0.05ms - 8.71ms
branch 453 kB 210.24ms - 214.96ms faster ✔
0% - 4%
0.05ms - 8.71ms
-

Westbrook pushed a commit that referenced this pull request Jan 31, 2024
* chore: add tooltip to ariadescribedby

* test(combobox): add a11y test for tooltip

---------

Co-authored-by: Najika Yoo <[email protected]>
Westbrook pushed a commit that referenced this pull request Feb 2, 2024
* feat(combobox): begin working branch for combobox additions

* feat(combobox): add size attribute (#3887)

* feat(combobox): wip

* chore: update sizes and stories

* chore: add isoverlayopen decorator to stories

---------

Co-authored-by: Westbrook Johnson <[email protected]>
Co-authored-by: Najika Yoo <[email protected]>

* chore: add benchmark test for lightdom combobox (#3898)

* chore: add benchmark test for lightdom combobox

* chore: add object version of benchmark test

* chore: rename files

---------

Co-authored-by: Najika Yoo <[email protected]>

* test(combobox): update data management tests for current API

* test(combobox): get more tests passing and skip tests that will be visited in future work (#3919)

* test(combobox): get more tests passing and skip tests that will be visited in future work

* ci: update golden images cache

* test(combobox): ignore Combobox Item code

* chore(combobox): cleanup unused code (#3922)

* chore(combobox): cleanup unused code

* ci: update golden images cache

* fix(combobox): add support for external tooltip elements (#3930)

* fix(combobox): add support for external tooltip elements

* chore(combobox): remove unused code paths

* ci: update golden images cache

* docs(combobox): include slot present in API docs

* fix(combobox): allow intern Menu to hold a selection when autocomplete === "none" (#3951)

* test(combobox): add accessibility tests (#3953)

* chore: add labels to combobox input

* chore: get tests passing

* test(combobox): get a11y tests passing

* chore: remove unused positionlistbox method

* test: get tests passing, change spelling of activeDescendant

* chore: missed some descendents

* chore: add help text demo and test

* ci: update hash

* chore: address review comments

* chore: abstract shared data to index files

* test(combobox): update tests and stories to use legible data

* ci: update hash

* chore: label menu and rename stories

* ci: update hash

---------

Co-authored-by: Najika Yoo <[email protected]>

* test(combobox): fulfil accessibility contract (#3974)

* chore: add tooltip to ariadescribedby

* test(combobox): add a11y test for tooltip

---------

Co-authored-by: Najika Yoo <[email protected]>

* chore(bundle): include combobox

* chore(combobox): clean up property availability and types

* chore(combobox): clean up property availability and type

* refactor(combobox): update ComboboxOption type

* ci: update golden images cache

* refactor(combobox): simplify typing and correct query location when moving items into viewport

* docs: use human useful content in stories

* ci: update golden images cache

* refactor(combobox): default "autocomplete" to "none"

* docs: correct story configuration

* docs(combobox): create initial documentation

* docs(combobox): apply docs feedback

* docs(combobox): use only working examples in live mode

* fix(combobox): maintain focus on input element when toggling menu

* docs(combobox): improve clarity

* ci: update golden images cache

* docs(combobox): add story demonstrating controlled-component usage (#3988)

* docs(combobox): add story demonstrating controlled-component usage

* Update packages/combobox/stories/combobox.stories.ts

Co-authored-by: Westbrook Johnson <[email protected]>

---------

Co-authored-by: Westbrook Johnson <[email protected]>

* fix(combobox): add support for "readonly" and "disabled"

* docs(textfield): expand on attribute/property descriptions

* fix(combobox): add support for "readonly" and "disabled"

* ci: update golden images cache

* fix(textfield): prevent outline on :focus-visible elements that are disabled

* fix(combobox): correct value to itemText interchange when something is "selected" (#3994)

---------

Co-authored-by: Najika Halsema Yoo <[email protected]>
Co-authored-by: Najika Yoo <[email protected]>
Co-authored-by: Hunter Loftis <[email protected]>
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.

2 participants