feat(calendar): Enhance accessibility by adding visually hidden text … (

#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 <[email protected]>

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>