Skip to content

fix(material/datepicker): change calendar cells to buttons #24098

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

fix(material/datepicker): change calendar cells to buttons #24098

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions src/material/datepicker/calendar-body.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,10 @@
[style.paddingBottom]="_cellPadding">
{{_firstRowOffset >= labelMinRequiredCells ? label : ''}}
</td>
<td *ngFor="let item of row; let colIndex = index"
role="gridcell"
<div role="gridcell" *ngFor="let item of row; let colIndex = index" style="display: contents;">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is unfortunately invalid HTML- a <tr> element cannot directly contain a <div>.

We should be able to get something working with the <button> inside the gridcell- what did you run into with that approach?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To start, it broke many tests because they needed to select the button inside the .mat-calendar-body-cell instead of the .mat-calendar-body-cell itself. Rather than running into specific problems, it seemed more like there could be an easier way to do this.

Wrapping the button with a display: contents; makes things easier because then the rest of the controller code and the styles only need to target the button, and do not need to be aware of the gridcell.

I can also try doing something like this, which should be valid html

<td role="gridcell" style="display: contents;">
  <div role="button" tabindex="0" class="mat-calendar-body-cell" ...>
    ...
  </div>
</td>

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did run into styling problems by using the button tag instead of div role="button". But I would expect the styling to be fixable by adding more CSS rules.

<!-- TODO(zarend): install prettier in vim and fix the code formatting -->
<td
role="button"
class="mat-calendar-body-cell"
[ngClass]="item.cssClasses"
[tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
Expand Down Expand Up @@ -62,4 +64,5 @@
</div>
<div class="mat-calendar-body-cell-preview"></div>
</td>
</div>
</tr>