Skip to content
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.

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

fix(material/datepicker): change calendar cell bodies to buttons (nesting buttons inside td approach) #24099

Closed
wants to merge 1 commit into from

Conversation

zarend
Copy link
Contributor

@zarend zarend commented Dec 14, 2021

Changes the structure of date cells to use buttons nested inside a
gridcell. Previously the td tag would handle interaction, but this was
problematic because Voiceover (and potentially other screenreaders) were not announcing that the
gridcells were clickable bug #23476. Changes the DOM structure to nest a
button role element inside the td and have the button handle
interaction instead of the td

Previous dom:

  <td role="gridcell" tabindex="0" (click)="foo"
    ...
  >
   <div ...>...</div>
  </td>

Updated dom:

  <td
    ...
  >
   <div role="button" tabindex="0" (click)="foo"...>...</div>
  </td>

Work in progress.

fixes #23476

Changes the structure of date cells  to use buttons nested inside a
gridcell. Previously the `td` tag would handle interaction, but this was
problematic because Voiceover (and potentially other screenreaders) were not announcing that the
gridcells were clickable bug angular#23476. Changes the DOM structure to nest a
button role element inside the `td` and have the button handle
interaction instead of the `td`

Previous dom:
```
  <td role="gridcell" tabindex="0" (click)="foo"
    ...
  >
   <div ...>...</div>
  </td>
```

Updated dom:
```
  <td
    ...
  >
   <div role="button" tabindex="0" (click)="foo"...>...</div>
  </td>
```

Work in progress.

fixes angular#23476
@zarend zarend changed the title fix(material/datepicker): change calendar cell bodies to buttons fix(material/datepicker): change calendar cell bodies to buttons (nesting buttons inside td) Dec 15, 2021
@zarend zarend changed the title fix(material/datepicker): change calendar cell bodies to buttons (nesting buttons inside td) fix(material/datepicker): change calendar cell bodies to buttons (nesting buttons inside td approach) Dec 15, 2021
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Dec 29, 2021
@zarend
Copy link
Contributor Author

zarend commented Jan 15, 2022

closing in favor of #24171

@zarend zarend closed this Jan 15, 2022
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Feb 15, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
cla: yes PR author has agreed to Google's Contributor License Agreement
Projects
None yet
Development

Successfully merging this pull request may close these issues.

bug(datepicker): It is announcing the date buttons type incorrectly as text elements
2 participants