99 lines
4.7 KiB
HTML
99 lines
4.7 KiB
HTML
<!--
|
|
If there's not enough space in the first row, create a separate label row. We mark this row as
|
|
aria-hidden because we don't want it to be read out as one of the weeks in the month.
|
|
-->
|
|
@if (_firstRowOffset < labelMinRequiredCells) {
|
|
<tr aria-hidden="true">
|
|
<td class="mat-calendar-body-label"
|
|
[attr.colspan]="numCols"
|
|
[style.paddingTop]="_cellPadding"
|
|
[style.paddingBottom]="_cellPadding">
|
|
{{label}}
|
|
</td>
|
|
</tr>
|
|
}
|
|
|
|
<!-- Create the first row separately so we can include a special spacer cell. -->
|
|
@for (row of rows; track _trackRow(row); let rowIndex = $index) {
|
|
<tr role="row">
|
|
<!--
|
|
This cell is purely decorative, but we can't put `aria-hidden` or `role="presentation"` on it,
|
|
because it throws off the week days for the rest of the row on NVDA. The aspect ratio of the
|
|
table cells is maintained by setting the top and bottom padding as a percentage of the width
|
|
(a variant of the trick described here: https://www.w3schools.com/howto/howto_css_aspect_ratio.asp).
|
|
-->
|
|
@if (rowIndex === 0 && _firstRowOffset) {
|
|
<td
|
|
class="mat-calendar-body-label"
|
|
[attr.colspan]="_firstRowOffset"
|
|
[style.paddingTop]="_cellPadding"
|
|
[style.paddingBottom]="_cellPadding">
|
|
{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}
|
|
</td>
|
|
}
|
|
<!--
|
|
Each gridcell in the calendar contains a button, which signals to assistive technology that the
|
|
cell is interactable, as well as the selection state via `aria-pressed`. See #23476 for
|
|
background.
|
|
-->
|
|
@for (item of row; track item.id; let colIndex = $index) {
|
|
<td
|
|
role="gridcell"
|
|
class="mat-calendar-body-cell-container"
|
|
[style.width]="_cellWidth"
|
|
[style.paddingTop]="_cellPadding"
|
|
[style.paddingBottom]="_cellPadding"
|
|
[attr.data-mat-row]="rowIndex"
|
|
[attr.data-mat-col]="colIndex"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="mat-calendar-body-cell"
|
|
[ngClass]="item.cssClasses"
|
|
[tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
|
|
[class.mat-calendar-body-disabled]="!item.enabled"
|
|
[class.mat-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"
|
|
[class.mat-calendar-body-range-start]="_isRangeStart(item.compareValue)"
|
|
[class.mat-calendar-body-range-end]="_isRangeEnd(item.compareValue)"
|
|
[class.mat-calendar-body-in-range]="_isInRange(item.compareValue)"
|
|
[class.mat-calendar-body-comparison-bridge-start]="_isComparisonBridgeStart(item.compareValue, rowIndex, colIndex)"
|
|
[class.mat-calendar-body-comparison-bridge-end]="_isComparisonBridgeEnd(item.compareValue, rowIndex, colIndex)"
|
|
[class.mat-calendar-body-comparison-start]="_isComparisonStart(item.compareValue)"
|
|
[class.mat-calendar-body-comparison-end]="_isComparisonEnd(item.compareValue)"
|
|
[class.mat-calendar-body-in-comparison-range]="_isInComparisonRange(item.compareValue)"
|
|
[class.mat-calendar-body-preview-start]="_isPreviewStart(item.compareValue)"
|
|
[class.mat-calendar-body-preview-end]="_isPreviewEnd(item.compareValue)"
|
|
[class.mat-calendar-body-in-preview]="_isInPreview(item.compareValue)"
|
|
[attr.aria-label]="item.ariaLabel"
|
|
[attr.aria-disabled]="!item.enabled || null"
|
|
[attr.aria-pressed]="_isSelected(item.compareValue)"
|
|
[attr.aria-current]="todayValue === item.compareValue ? 'date' : null"
|
|
[attr.aria-describedby]="_getDescribedby(item.compareValue)"
|
|
(click)="_cellClicked(item, $event)"
|
|
(focus)="_emitActiveDateChange(item, $event)">
|
|
<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}}
|
|
</span>
|
|
<span class="mat-calendar-body-cell-preview" aria-hidden="true"></span>
|
|
</button>
|
|
</td>
|
|
}
|
|
</tr>
|
|
}
|
|
|
|
<span [id]="_startDateLabelId" class="mat-calendar-body-hidden-label">
|
|
{{startDateAccessibleName}}
|
|
</span>
|
|
<span [id]="_endDateLabelId" class="mat-calendar-body-hidden-label">
|
|
{{endDateAccessibleName}}
|
|
</span>
|
|
<span [id]="_comparisonStartDateLabelId" class="mat-calendar-body-hidden-label">
|
|
{{comparisonDateAccessibleName}} {{startDateAccessibleName}}
|
|
</span>
|
|
<span [id]="_comparisonEndDateLabelId" class="mat-calendar-body-hidden-label">
|
|
{{comparisonDateAccessibleName}} {{endDateAccessibleName}}
|
|
</span>
|