From aacd375244fc89f404b37525c9b7a7ec91d1cd7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bu=C4=9Frahan=20Y=C3=BCnt?=
 <90159617+mryunt02@users.noreply.github.com>
Date: Mon, 21 Oct 2024 09:15:10 +0300
Subject: [PATCH] =?UTF-8?q?feat(calendar):=20Enhance=20accessibility=20by?=
 =?UTF-8?q?=20adding=20visually=20hidden=20text=20=E2=80=A6=20(#940)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 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>
---
 src/components/calendar/bl-calendar.ts | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/calendar/bl-calendar.ts b/src/components/calendar/bl-calendar.ts
index 74230a3a..fa3b7ddb 100644
--- a/src/components/calendar/bl-calendar.ts
+++ b/src/components/calendar/bl-calendar.ts
@@ -511,17 +511,20 @@ export default class BlCalendar extends LitElement {
     const showMonthSelected =
       this._calendarView === CALENDAR_VIEWS.MONTHS ? "header-text-hover" : "";
     const showYearSelected = this._calendarView === CALENDAR_VIEWS.YEARS ? "header-text-hover" : "";
+    const buttonLabel = this._calendarView === CALENDAR_VIEWS.DAYS ? "Month" : "Year";
 
     return html`<div>
       <div class="calendar-content">
         <div class="calendar-header">
           <bl-button
             class="arrow"
+            label="Previous ${buttonLabel}"
             icon="arrow_left"
             variant="tertiary"
             kind="neutral"
             @click="${() => this.setPreviousCalendarView()}"
-          ></bl-button>
+          >
+          </bl-button>
           <bl-button
             variant="tertiary"
             kind="neutral"
@@ -539,10 +542,12 @@ export default class BlCalendar extends LitElement {
           <bl-button
             class="arrow"
             icon="arrow_right"
+            label="Next ${buttonLabel}"
             variant="tertiary"
             kind="neutral"
             @click="${() => this.setNextCalendarView()}"
-          ></bl-button>
+          >
+          </bl-button>
         </div>
         <div class="calendar">${getCalendarView(this._calendarView)}</div>
       </div>