fix(a11y): datepicker - screen reader is reading extra information on…

… opening (backport to 15.x) (#1335)

Backport 27d741a from #1322. <br> A11y
Clarity Datepicker - Screen reader is reading extra information upon
opening

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

&lt;!-- Please check the one that applies to this PR using
&quot;x&quot;. --&gt;

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Extra date information is announced after the date is announced the
first time by the screen reader i.e the date is announced twice when the
Datepicker dialog is opened.

&lt;!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. --&gt;

Issue Number: [CDE-790](https://jira.eng.vmware.com/browse/CDE-790)
&amp; [VPAT-21915](https://jira.eng.vmware.com/browse/VPAT-21915)

## What is the new behavior?
The date is announced only once by the screen reader when the Datepicker
is opened.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

&lt;!-- If this PR contains a breaking change, please describe the
impact and migration path for existing applications below. --&gt;

## Other information
This is observed in NVDA on windows in Chrome/ IE &amp; Firefox.

Co-authored-by: Andrea A Fernandes <andy2890@gmail.com>

projects/angular/src/forms/datepicker/daypicker.ts

@@ -14,7 +14,7 @@ import { ViewManagerService } from './providers/view-manager.service';
 @Component({
   selector: 'clr-daypicker',
   templateUrl: './daypicker.html',
-  host: { '[class.daypicker]': 'true' },
+  host: { '[class.daypicker]': 'true', role: 'application' },
 })
 export class ClrDaypicker {
   constructor(

projects/angular/src/forms/datepicker/monthpicker.ts

@@ -29,6 +29,7 @@ import { ViewManagerService } from './providers/view-manager.service';
   `,
   host: {
     '[class.monthpicker]': 'true',
+    role: 'application',
   },
 })
 export class ClrMonthpicker implements AfterViewInit {

projects/angular/src/forms/datepicker/yearpicker.ts

@@ -58,6 +58,7 @@ import { ViewManagerService } from './providers/view-manager.service';
   `,
   host: {
     '[class.yearpicker]': 'true',
+    role: 'application',
   },
 })
 export class ClrYearpicker implements AfterViewInit {