MWB: Shared style UX review and accessibility changes

Bug: 1128599
Change-Id: I39bbf3f9aadc6f74d99dd54e3b768e01d7026e43
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2417548Reviewed-by: John Lee <johntlee@chromium.org>
Reviewed-by: Thomas Lukaszewicz <tluk@chromium.org>
Commit-Queue: Roman Arora <romanarora@chromium.org>
Cr-Commit-Position: refs/heads/master@{#809937}

ui/webui/resources/cr_elements/mwb_shared_style.html

@@ -33,7 +33,8 @@
       align-items: center;
       background-color: var(--mwb-background-color);
       display: flex;
-      padding: calc(var(--mwb-list-item-vertical-margin)/2) var(--mwb-list-item-horizontal-margin);
+      height: var(--mwb-item-height);
+      padding: 0 var(--mwb-list-item-horizontal-margin);
     }
 
     .mwb-list-item:hover {
@@ -44,4 +45,4 @@
       background-color: var(--mwb-list-item-selected-background-color);
     }
   </style>
-</template>
\ No newline at end of file
+</template>

ui/webui/resources/cr_elements/mwb_shared_vars.html

@@ -3,10 +3,10 @@
     html {
       --mwb-background-color: white;
       --mwb-icon-size: 16px;
-      --mwb-list-item-horizontal-margin: 8px;
+      --mwb-item-height: 56px;
+      --mwb-list-item-horizontal-margin: 16px;
       --mwb-list-item-hover-background-color: rgba(var(--google-grey-900-rgb), 0.1);
-      --mwb-list-item-selected-background-color: rgba(var(--google-grey-900-rgb), 0.16);
-      --mwb-list-item-vertical-margin: 12px;
+      --mwb-list-item-selected-background-color: rgba(var(--google-grey-900-rgb), 0.14);
       --mwb-primary-text-font-size: 13px;
       --mwb-secondary-text-font-size: 12px;
     }