fix(material/datepicker): remove div as a child of button (#26838)

Fixes that we had divs as children of buttons which some a11y tools complain about. Fixes #26825.
angular · Mar 27, 2023 · e6f1a7d · e6f1a7d
1 parent 6ad47bf
commit e6f1a7d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/src/material/datepicker/calendar-body.html b/src/material/datepicker/calendar-body.html
@@ -66,13 +66,13 @@
         [attr.aria-describedby]="_getDescribedby(item.compareValue)"
         (click)="_cellClicked(item, $event)"
         (focus)="_emitActiveDateChange(item, $event)">
-        <div class="mat-calendar-body-cell-content mat-focus-indicator"
+        <span class="mat-calendar-body-cell-content mat-focus-indicator"
           [class.mat-calendar-body-selected]="_isSelected(item.compareValue)"
           [class.mat-calendar-body-comparison-identical]="_isComparisonIdentical(item.compareValue)"
           [class.mat-calendar-body-today]="todayValue === item.compareValue">
           {{item.displayValue}}
-        </div>
-        <div class="mat-calendar-body-cell-preview" aria-hidden="true"></div>
+        </span>
+        <span class="mat-calendar-body-cell-preview" aria-hidden="true"></span>
     </button>
   </td>
 </tr>

diff --git a/src/material/datepicker/calendar-body.scss b/src/material/datepicker/calendar-body.scss
@@ -76,6 +76,7 @@ $calendar-range-end-body-cell-size:
   left: 0;
   z-index: 0;
   box-sizing: border-box;
+  display: block;
 
   // We want the range background to be slightly shorter than the cell so
   // that there's a gap when the range goes across multiple rows.