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

docs(action-menu): include action menu label in stories and READMEs #4127

Merged
merged 1 commit into from
Mar 5, 2024

Conversation

audknu
Copy link
Contributor

@audknu audknu commented Mar 5, 2024

Description

Updated SWC component READMEs and stories that include the action menu as part of examples with an expected action menu label to demonstrate accessible examples aligning with existing SWC action menu documentation:

"The visible label that is be provided via the default interface can be ommitted in preference of an icon only interface. In this context be sure that the continued to be accessible to screen readers by applying the label attribute. This will apply an aria-label attribute of the same value to the element that toggles the menu list.".

Related issue(s)

Motivation and context

Provides consumers of SWC with accessible usage examples of the Action Menu across different SWC components such as the Card and Overlay.

How has this been tested?

  • Run Storybook locally (yarn storybook)
    1. Go to each story modified in this PR
    2. Enable VoiceOver in Settings-->Accessibility
    3. Tab to the Action Menu button
    4. Observe that VoiceOver gives a label to the Action Menu button now, typically "More Actions"
  • View Remote Storybook to see original behavior
    1. Go to each story modified in this PR
    2. Enable VoiceOver in Settings-->Accessibility
    3. Tab to the Action Menu button
    4. Observe that VoiceOver does not provide a label to the Action Menu, making it unclear what the purpose of the action menu

Screenshots (if appropriate)

Before:

Screen.Recording.2024-03-05.at.11.15.36.AM.mov

After:

Screen.Recording.2024-03-05.at.11.17.37.AM.mov

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

github-actions bot commented Mar 5, 2024

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.97 0.97 0.97
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category Latest Main Branch
Total 242.511 kB 228.339 kB 227.706 kB 🏆
Scripts 59.459 kB 54.359 kB 🏆 54.421 kB
Stylesheet 50.601 kB 42.12 kB 41.426 kB 🏆
Document 5.739 kB 5.148 kB 5.147 kB 🏆
Third Party 126.712 kB 126.712 kB 126.712 kB

Request Count

Category Latest Main Branch
Total 42 🏆 43 43
Scripts 34 🏆 35 35
Stylesheet 5 5 5
Document 1 1 1
Third Party 2 2 2

Copy link

github-actions bot commented Mar 5, 2024

Tachometer results

Chrome

action-bar permalink

Version Bytes Avg Time vs remote vs branch
npm latest 489 kB 70.60ms - 72.16ms - unsure 🔍
-1% - +3%
-0.40ms - +2.04ms
branch 474 kB 69.63ms - 71.49ms unsure 🔍
-3% - +1%
-2.04ms - +0.40ms
-

action-menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 655 kB 164.58ms - 168.08ms - unsure 🔍
-1% - +2%
-1.95ms - +2.84ms
branch 635 kB 164.25ms - 167.52ms unsure 🔍
-2% - +1%
-2.84ms - +1.95ms
-

card permalink

Version Bytes Avg Time vs remote vs branch
npm latest 510 kB 61.75ms - 64.83ms - unsure 🔍
-2% - +5%
-1.44ms - +2.91ms
branch 493 kB 61.02ms - 64.10ms unsure 🔍
-5% - +2%
-2.91ms - +1.44ms
-

coachmark permalink

Version Bytes Avg Time vs remote vs branch
npm latest 626 kB 148.67ms - 152.16ms - slower ❌
14% - 19%
18.34ms - 24.44ms
branch 617 kB 126.52ms - 131.53ms faster ✔
12% - 16%
18.34ms - 24.44ms
-

combobox permalink

Version Bytes Avg Time vs remote vs branch
npm latest 706 kB 37.61ms - 38.04ms - unsure 🔍
-1% - +1%
-0.26ms - +0.41ms
branch 695 kB 37.49ms - 38.01ms unsure 🔍
-1% - +1%
-0.41ms - +0.26ms
-

menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 480 kB 212.95ms - 217.25ms - unsure 🔍
-1% - +2%
-2.80ms - +4.10ms
branch 465 kB 211.76ms - 217.15ms unsure 🔍
-2% - +1%
-4.10ms - +2.80ms
-

overlay permalink

Version Bytes Avg Time vs remote vs branch
npm latest 493 kB 55.05ms - 55.96ms - unsure 🔍
-2% - +1%
-0.97ms - +0.37ms
branch 486 kB 55.31ms - 56.30ms unsure 🔍
-1% - +2%
-0.37ms - +0.97ms
-

picker permalink

Version Bytes Avg Time vs remote vs branch
npm latest 518 kB 574.73ms - 585.22ms - unsure 🔍
-1% - +2%
-5.37ms - +9.14ms
branch 501 kB 573.08ms - 583.10ms unsure 🔍
-2% - +1%
-9.14ms - +5.37ms
-

popover permalink

Version Bytes Avg Time vs remote vs branch
npm latest 386 kB 21.36ms - 21.69ms - slower ❌
1% - 3%
0.21ms - 0.58ms
branch 373 kB 21.04ms - 21.22ms faster ✔
1% - 3%
0.21ms - 0.58ms
-

slider permalink

Version Bytes Avg Time vs remote vs branch
npm latest 481 kB 104.86ms - 107.23ms - unsure 🔍
-1% - +2%
-0.86ms - +2.27ms
branch 468 kB 104.32ms - 106.36ms unsure 🔍
-2% - +1%
-2.27ms - +0.86ms
-

split-button permalink

Version Bytes Avg Time vs remote vs branch
npm latest 722 kB 1861.82ms - 1865.07ms - unsure 🔍
-0% - -0%
-7.44ms - -3.01ms
branch 708 kB 1867.17ms - 1870.18ms unsure 🔍
+0% - +0%
+3.01ms - +7.44ms
-

tooltip permalink

Version Bytes Avg Time vs remote vs branch
npm latest 559 kB 44.39ms - 45.21ms - unsure 🔍
-1% - +1%
-0.66ms - +0.45ms
branch 537 kB 44.52ms - 45.28ms unsure 🔍
-1% - +1%
-0.45ms - +0.66ms
-
Firefox

action-bar permalink

Version Bytes Avg Time vs remote vs branch
npm latest 489 kB 144.70ms - 151.82ms - unsure 🔍
-2% - +5%
-2.46ms - +6.70ms
branch 474 kB 143.26ms - 149.02ms unsure 🔍
-4% - +2%
-6.70ms - +2.46ms
-

action-menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 655 kB 314.32ms - 319.84ms - unsure 🔍
-4% - +0%
-14.54ms - +1.46ms
branch 635 kB 316.11ms - 331.13ms unsure 🔍
-0% - +5%
-1.46ms - +14.54ms
-

card permalink

Version Bytes Avg Time vs remote vs branch
npm latest 510 kB 107.77ms - 115.39ms - unsure 🔍
-3% - +6%
-3.57ms - +6.97ms
branch 493 kB 106.24ms - 113.52ms unsure 🔍
-6% - +3%
-6.97ms - +3.57ms
-

coachmark permalink

Version Bytes Avg Time vs remote vs branch
npm latest 626 kB 410.90ms - 418.66ms - slower ❌
1% - 4%
4.82ms - 17.70ms
branch 617 kB 398.38ms - 408.66ms faster ✔
1% - 4%
4.82ms - 17.70ms
-

combobox permalink

Version Bytes Avg Time vs remote vs branch
npm latest 706 kB 68.95ms - 72.49ms - slower ❌
11% - 17%
6.95ms - 10.77ms
branch 695 kB 61.14ms - 62.58ms faster ✔
10% - 15%
6.95ms - 10.77ms
-

menu permalink

Version Bytes Avg Time vs remote vs branch
npm latest 480 kB 430.63ms - 440.45ms - unsure 🔍
-1% - +2%
-6.26ms - +7.70ms
branch 465 kB 429.86ms - 439.78ms unsure 🔍
-2% - +1%
-7.70ms - +6.26ms
-

overlay permalink

Version Bytes Avg Time vs remote vs branch
npm latest 589 kB 110.78ms - 114.94ms - unsure 🔍
-3% - +2%
-3.87ms - +2.19ms
branch 579 kB 111.49ms - 115.91ms unsure 🔍
-2% - +3%
-2.19ms - +3.87ms
-

picker permalink

Version Bytes Avg Time vs remote vs branch
npm latest 518 kB 990.72ms - 1015.12ms - slower ❌
0% - 3%
0.05ms - 25.51ms
branch 501 kB 986.50ms - 993.78ms faster ✔
0% - 3%
0.05ms - 25.51ms
-

popover permalink

Version Bytes Avg Time vs remote vs branch
npm latest 386 kB 43.50ms - 48.50ms - unsure 🔍
-7% - +9%
-3.02ms - +4.06ms
branch 373 kB 42.97ms - 47.99ms unsure 🔍
-9% - +7%
-4.06ms - +3.02ms
-

slider permalink

Version Bytes Avg Time vs remote vs branch
npm latest 481 kB 199.00ms - 206.44ms - unsure 🔍
-1% - +4%
-1.85ms - +7.37ms
branch 468 kB 197.23ms - 202.69ms unsure 🔍
-4% - +1%
-7.37ms - +1.85ms
-

split-button permalink

Version Bytes Avg Time vs remote vs branch
npm latest 722 kB 1629.63ms - 1638.37ms - unsure 🔍
-1% - +0%
-11.81ms - +1.73ms
branch 708 kB 1633.87ms - 1644.21ms unsure 🔍
-0% - +1%
-1.73ms - +11.81ms
-

tooltip permalink

Version Bytes Avg Time vs remote vs branch
npm latest 654 kB 93.23ms - 100.33ms - unsure 🔍
-3% - +8%
-3.05ms - +7.09ms
branch 641 kB 91.14ms - 98.38ms unsure 🔍
-7% - +3%
-7.09ms - +3.05ms
-

@audknu audknu requested review from majornista, Westbrook and a team March 5, 2024 20:54
@Westbrook Westbrook changed the title chore(action-menu): include action menu label in stories and READMEs docs(action-menu): include action menu label in stories and READMEs Mar 5, 2024
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! Welcome to the SWC contributor family 👋🏼

Getting this into today's release :shipit:

@Westbrook Westbrook merged commit fd0b6a4 into acpc/hackathon-swc Mar 5, 2024
48 checks passed
@Westbrook Westbrook deleted the knutsen/acpc_bug_3388 branch March 5, 2024 21:36
@audknu audknu restored the knutsen/acpc_bug_3388 branch March 5, 2024 22:18
Westbrook pushed a commit that referenced this pull request Mar 15, 2024
…4158)

* chore(action-menu): include action menu label in stories and READMEs (#4127)

* docs(dropzone): demonstrate how to announce items added to dropzone

* docs(dropzone): add upload button in example

* docs(dropzone): address typos

* docs(dropzone): address feedback

* docs(dropzone): improve wording in dropzone story

* chore(dropzone): updated golden image cache

* chore(dropzone): updated golden image cache

---------

Co-authored-by: Rajdeep Chandra <rajdeepchandra@rajdeeps-mbp-2.macromedia.com>
@Westbrook Westbrook deleted the knutsen/acpc_bug_3388 branch March 20, 2024 22:20
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.

None yet

2 participants