Skip to content

fix: added aria-label to prev and next month buttons#17198

Merged
anikdhabal merged 2 commits into
calcom:mainfrom
shivambhatia604:shivambhatia604/fix-accessibility-17185
Oct 20, 2024
Merged

fix: added aria-label to prev and next month buttons#17198
anikdhabal merged 2 commits into
calcom:mainfrom
shivambhatia604:shivambhatia604/fix-accessibility-17185

Conversation

@shivambhatia604
Copy link
Copy Markdown
Contributor

@shivambhatia604 shivambhatia604 commented Oct 20, 2024

What does this PR do?

This PR addresses the accessibility issue with the previous and next buttons. Required aria-label tag has been added in the buttons.

Mandatory Tasks (DO NOT REMOVE)

  • I have self-reviewed the code (A decent size PR without self-review might be rejected).
  • I have updated the developer docs in /docs if this PR makes changes that would require a documentation change. N/A
  • I confirm automated tests are in place that prove my fix is effective or that my feature works.

How should this be tested?

  1. Run Google Lighthouse accessibility checks to verify that the button element no longer triggers warnings for missing Input element labels.
  2. Use the browser's developer tools to inspect the button and confirm that the aria-label="next month" and aria-label="previous month" is applied correctly.

image

image image
  • Are there environment variables that should be set?
    No new environment variables are needed for this test

  • What are the minimal test data to have?
    Access the event booking form and interact with the previous and next month buttons to observe the behavior with a screen reader.

  • What is expected (happy path) to have (input and output)?
    The screen readers should announce the labels when buttons are focused via tab.

@vercel
Copy link
Copy Markdown

vercel Bot commented Oct 20, 2024

Someone is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions Bot added ui area: UI, frontend, button, form, input 🐛 bug Something isn't working labels Oct 20, 2024
@graphite-app graphite-app Bot added the community Created by Linear-GitHub Sync label Oct 20, 2024
@graphite-app graphite-app Bot requested a review from a team October 20, 2024 09:58
@graphite-app
Copy link
Copy Markdown

graphite-app Bot commented Oct 20, 2024

Graphite Automations

"Add consumer team as reviewer" took an action on this PR • (10/20/24)

1 reviewer was added to this PR based on Keith Williams's automation.

"Add community label" took an action on this PR • (10/20/24)

1 label was added to this PR based on Keith Williams's automation.

"Add ready-for-e2e label" took an action on this PR • (10/20/24)

1 label was added to this PR based on Keith Williams's automation.

@shivambhatia604 shivambhatia604 force-pushed the shivambhatia604/fix-accessibility-17185 branch from f51f286 to b4007b4 Compare October 20, 2024 10:02
@anikdhabal anikdhabal enabled auto-merge (squash) October 20, 2024 11:41
@anikdhabal anikdhabal merged commit bf9be59 into calcom:main Oct 20, 2024
@github-actions
Copy link
Copy Markdown
Contributor

E2E results are ready!

anikdhabal added a commit that referenced this pull request Oct 21, 2024
* refactor: make this localizable

base on #17198 making the new copy localizable

* Update common.json

* Update common.json

* Update common.json

---------

Co-authored-by: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐛 bug Something isn't working community Created by Linear-GitHub Sync ready-for-e2e ui area: UI, frontend, button, form, input

Projects

None yet

Development

Successfully merging this pull request may close these issues.

accessibility: missing textual description for buttons

2 participants