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.

Sign up for GitHub

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

Jump to bottom

[Feature Request]: <Enhance Calendar Accessibility> #939

Closed
mryunt02 opened this issue Oct 15, 2024 · 0 comments · Fixed by #940
Closed

[Feature Request]: <Enhance Calendar Accessibility> #939

mryunt02 opened this issue Oct 15, 2024 · 0 comments · Fixed by #940
Labels
a11y Accessibility related issues bl-calendar

Comments

@mryunt02
Copy link
Contributor

Describe the problem or use case

issues with the calendar navigation buttons, where screen readers do not properly recognize them. The aim of this issue is to address this concern by implementing a change.

Proposed solution

Add Visually Hidden Text to Calendar Navigation Buttons

Alternatives considered

No response

Additional technical context

The visually hidden text has been implemented using a span element with a class that applies CSS rules to hide it from sighted users while keeping it accessible to screen readers.
@mryunt02 mryunt02 mentioned this issue Oct 15, 2024
Merged
@AykutSarac AykutSarac added a11y Accessibility related issues bl-calendar labels Oct 17, 2024
buseselvi pushed a commit that referenced this issue Oct 21, 2024
@mryunt02 @erbilnas
feat(calendar): Enhance accessibility by adding visually hidden text … (
aacd375 
#940)

### Changes
- Added visually hidden text to the navigation buttons for improved
accessibility:
- `<span class="visually-hidden">Previous Calendar View</span>` was
added to the previous button.
- `<span class="visually-hidden">Next Calendar View</span>` was added to
the next button.

### CSS
- Added the following CSS class to hide the text visually while keeping
it accessible to screen readers:
  ```css
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
### Related Issue
Fixes #939

---------

Co-authored-by: Erbil <erbilnas071@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
a11y Accessibility related issues bl-calendar
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(calendar): Enhance accessibility by adding visually hidden text … mryunt02/baklava
2 participants
@AykutSarac @mryunt02