fix(calendar): remove duplicate information for screen-reader user

.changeset/nasty-numbers-destroy.md

@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[calendar] remove duplicate information for screen-reader user

packages/ui/components/calendar/src/calendarStyle.js

@@ -95,7 +95,6 @@ export const calendarStyle = css`
 
   .u-sr-only {
     position: absolute;
-    top: 0;
     width: 1px;
     height: 1px;
     overflow: hidden;

packages/ui/components/calendar/src/utils/dataTemplate.js

@@ -13,13 +13,7 @@ export function dataTemplate(
     <div id="js-content-wrapper">
       ${data.months.map(
         month => html`
-          <table
-            role="grid"
-            data-wrap-cols
-            aria-readonly="true"
-            class="calendar__grid"
-            aria-labelledby="month year"
-          >
+          <table role="grid" data-wrap-cols aria-readonly="true" class="calendar__grid">
             <thead>
               <tr role="row">
                 ${weekdaysShort.map(

packages/ui/components/calendar/src/utils/dayTemplate.js

@@ -11,14 +11,14 @@ const lastDaysOfYear = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  * @param {{ weekdays: string[], monthsLabels?: string[] }} opts
  */
 export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels }) {
-  const { dayNumber, monthName, year, weekdayName } = getDayMonthYear(day, weekdays, monthsLabels);
+  const { dayNumber, monthName, year } = getDayMonthYear(day, weekdays, monthsLabels);
 
-  function __getFullDate() {
-    return `${monthName} ${year} ${weekdayName}`;
+  function __getMonthAndYear() {
+    return `${monthName} ${year}.`;
   }
 
   function __getAccessibleMessage() {
-    return `${day.disabledInfo}`;
+    return ` ${day.disabledInfo}`;
   }
 
   const firstDay = dayNumber === 1;
@@ -66,7 +66,7 @@ export function dayTemplate(day, { weekdays, monthsLabels = defaultMonthLabels }
         ?next-month=${day.nextMonth}
       >
         <span class="calendar__day-button__text">${dayNumber}</span>
-        <span class="u-sr-only">${__getFullDate()} ${__getAccessibleMessage()}</span>
+        <span class="u-sr-only">${__getMonthAndYear()}${__getAccessibleMessage()}</span>
       </div>
     </td>
   `;

packages/ui/components/calendar/test/lion-calendar.test.js

@@ -857,7 +857,7 @@ describe('<lion-calendar>', () => {
                 30
               </span>
               <span class="u-sr-only">
-                September 2019 Monday
+                September 2019.
               </span>
             </div>
           `);
@@ -921,7 +921,7 @@ describe('<lion-calendar>', () => {
                 15
               </span>
               <span class="u-sr-only">
-                December 2000 Friday This date is unavailable. Please choose another date.
+                December 2000. This date is unavailable. Please choose another date.
               </span>
             </div>
           `);
@@ -950,7 +950,7 @@ describe('<lion-calendar>', () => {
                 1
               </span>
               <span class="u-sr-only">
-                December 2000 Friday This date is unavailable. Earliest available date is 9 December 2000. Please choose another date.
+                December 2000. This date is unavailable. Earliest available date is 9 December 2000. Please choose another date.
               </span>
             </div>
           `);
@@ -979,7 +979,7 @@ describe('<lion-calendar>', () => {
                 30
               </span>
               <span class="u-sr-only">
-                December 2000 Saturday This date is unavailable. Latest available date is 9 December 2000. Please choose another date.
+                December 2000. This date is unavailable. Latest available date is 9 December 2000. Please choose another date.
               </span>
             </div>
           `);

packages/ui/components/calendar/test/utils/dataTemplate.test.js

@@ -9,6 +9,56 @@ import { dataTemplate } from '../../src/utils/dataTemplate.js';
 import snapshot_enGB_Sunday_201812 from './snapshots/monthTemplate_en-GB_Sunday_2018-12.js';
 
 describe('dataTemplate', () => {
+  it('table row has role="row" to allow users to extend without breaking the accessibility', async () => {
+    // The reason is: lion is made with extending it in mind. That means overriding css.
+    // If you change the display prop of tables, it loses its semantics
+    const date = new Date('2018/12/01');
+    const month = createMultipleMonth(date, { firstDayOfWeek: 0 });
+    const el = await fixture(
+      dataTemplate(month, {
+        weekdaysShort: weekdayNames['en-GB'].Sunday.short,
+        weekdays: weekdayNames['en-GB'].Sunday.long,
+      }),
+    );
+    const tableRows = el.querySelectorAll('tr');
+    expect(tableRows[0].hasAttribute('role')).to.be.true;
+    expect(tableRows[0].getAttribute('role')).to.equal('row', 'inside thead');
+    expect(tableRows[1].hasAttribute('role')).to.be.true;
+    expect(tableRows[1].getAttribute('role')).to.equal('row', 'inside tbody');
+  });
+
+  it('table header has role="columnheader" to allow users to extend without breaking the accessibility', async () => {
+    // The reason is: lion is made with extending it in mind. That means overriding css.
+    // If you change the display prop of tables, it loses its semantics
+    const date = new Date('2018/12/01');
+    const month = createMultipleMonth(date, { firstDayOfWeek: 0 });
+    const el = await fixture(
+      dataTemplate(month, {
+        weekdaysShort: weekdayNames['en-GB'].Sunday.short,
+        weekdays: weekdayNames['en-GB'].Sunday.long,
+      }),
+    );
+    const tableRows = el.querySelectorAll('th');
+    expect(tableRows[0].hasAttribute('role')).to.be.true;
+    expect(tableRows[0].getAttribute('role')).to.equal('columnheader');
+  });
+
+  it('table cell has role="gridcell" to allow users to extend without breaking the accessibility', async () => {
+    // The reason is: lion is made with extending it in mind. That means overriding css.
+    // If you change the display prop of tables, it loses its semantics
+    const date = new Date('2018/12/01');
+    const month = createMultipleMonth(date, { firstDayOfWeek: 0 });
+    const el = await fixture(
+      dataTemplate(month, {
+        weekdaysShort: weekdayNames['en-GB'].Sunday.short,
+        weekdays: weekdayNames['en-GB'].Sunday.long,
+      }),
+    );
+    const tableRows = el.querySelectorAll('td');
+    expect(tableRows[0].hasAttribute('role')).to.be.true;
+    expect(tableRows[0].getAttribute('role')).to.equal('gridcell');
+  });
+
   it('renders one month table', async () => {
     const date = new Date('2018/12/01');
     const month = createMultipleMonth(date, { firstDayOfWeek: 0 });

packages/ui/components/calendar/test/utils/dayTemplate.test.js

@@ -20,7 +20,7 @@ describe('dayTemplate', () => {
         >
           <span class="calendar__day-button__text">19</span>
           <span class="u-sr-only">
-            April 2019 Friday
+            April 2019.
           </span>
         </div>
       </td>