From 191dc498521b43d944f5871f1fc8a3dcf80dfaa1 Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Wed, 7 Jul 2021 09:11:58 +0200 Subject: [PATCH] fix(@schematics/angular): replace interactive `div` with `button` in application component template A keyboard user who has a problem in using a mouse, will not be able to select the `div`, because he cannot initiate the click event, which is specific to the mouse. Interactive elements like button can initiate the click event on keyboard events. Instead of adding additional events, such as `keyup`, `keydown` or `keypress`, we replace these with a `button`. (cherry picked from commit 1b5e18e7b401efb7ec73d99c4d77d9b29e956724) --- .../other-files/app.component.html.template | 47 +++++++------------ 1 file changed, 16 insertions(+), 31 deletions(-) diff --git a/packages/schematics/angular/application/other-files/app.component.html.template b/packages/schematics/angular/application/other-files/app.component.html.template index 7b3720a6d608..5efae6bc8c46 100644 --- a/packages/schematics/angular/application/other-files/app.component.html.template +++ b/packages/schematics/angular/application/other-files/app.component.html.template @@ -96,6 +96,7 @@ } .card { + all: unset; border-radius: 4px; border: 1px solid #eee; background-color: #fafafa; @@ -249,7 +250,6 @@ background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%); margin-left: 4px; font-weight: 600; - font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol; } .github-star-badge:hover { @@ -272,10 +272,8 @@ width: 1920px; } - /* Responsive Styles */ @media screen and (max-width: 767px) { - .card-container > *:not(.circle-link) , .terminal { width: 100%; @@ -359,31 +357,24 @@
- Learn Angular - - CLI Documentation - - Angular Blog - Angular DevTools - @@ -396,41 +387,35 @@
-
- - +
- -
- + +
- -
- + +
+ -
+
+ -
+
+ -
+
+