Merge pull request #178 from hidde/updates-2412

Various design QA fixes

Author: hidde

src/App.vue

@@ -141,7 +141,8 @@ export default {
   hr {
     border: 0;
     height: 1px;
-    background-color: var(--gray-20);
+    background-color: var(--gray-30);
+    margin: 2em 0;
   }
 
   a {

src/assets/images/lock.svg

@@ -1,5 +1,5 @@
 <template>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :width="width" :height="height" :viewport="'0 0 ' + width + ' ' + height" aria-hidden="true" role="presentation">
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" :width="width" :height="height" :viewport="'0 0 ' + width + ' ' + height" aria-hidden="true" role="presentation" focusable="false">
     <template v-if="id === 'user'">
       <path fill="currentColor" d="M20.2 18.3v1.8c0 .54-.36.9-.9.9s-.9-.36-.9-.9v-1.8c0-1.53-1.17-2.7-2.7-2.7H8.5c-1.53 0-2.7 1.17-2.7 2.7v1.8c0 .54-.36.9-.9.9s-.9-.36-.9-.9v-1.8c0-2.52 1.98-4.5 4.5-4.5h7.2c2.52 0 4.5 1.98 4.5 4.5zM7.6 7.5C7.6 4.98 9.58 3 12.1 3s4.5 1.98 4.5 4.5-1.98 4.5-4.5 4.5-4.5-1.98-4.5-4.5zm1.8 0c0 1.53 1.17 2.7 2.7 2.7 1.53 0 2.7-1.17 2.7-2.7 0-1.53-1.17-2.7-2.7-2.7-1.53 0-2.7 1.17-2.7 2.7z"/>
     </template>
@@ -64,6 +64,9 @@
     <template v-else-if="id === 'discourse'">
       <path d="M13.903 10.55c-.503.633-1.191 1.133-2.062 1.5-.87.367-1.818.55-2.842.55-.461 0-.931-.042-1.414-.128A6.749 6.749 0 0 1 5.35 13.5a6.958 6.958 0 0 1-.69.13h-.025a.252.252 0 0 1-.165-.065.262.262 0 0 1-.092-.169.162.162 0 0 1-.009-.051c0-.02.003-.038.005-.053a.16.16 0 0 1 .016-.048l.02-.04.028-.045a.818.818 0 0 1 .03-.043s.017-.007.038-.037l.032-.042.186-.195c.096-.103.166-.181.209-.238l.18-.233c.078-.098.145-.203.2-.309a4.38 4.38 0 0 0 .166-.353c-.664-.386-1.187-.86-1.568-1.423-.38-.564-.57-1.164-.57-1.801 0-.745.253-1.433.755-2.065.504-.633 1.191-1.133 2.063-1.5.87-.367 1.818-.55 2.84-.55 1.024 0 1.972.183 2.842.55.87.367 1.559.867 2.062 1.5.503.632.756 1.32.756 2.065 0 .746-.253 1.434-.756 2.066M9 .667a8.334 8.334 0 1 0-.183 16.667A8.334 8.334 0 0 0 9 .667" fill="currentColor" fill-rule="evenodd"/>
     </template>
+    <template v-else-if="id === 'lock'">
+      <path d="M19 10h-1V7c0-3.3-2.7-6-6-6S6 3.7 6 7v3H5c-1.7 0-3 1.3-3 3v7c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3v-7c0-1.7-1.3-3-3-3zM8 7c0-2.2 1.8-4 4-4s4 1.8 4 4v3H8V7zm12 13c0 .6-.4 1-1 1H5c-.6 0-1-.4-1-1v-7c0-.6.4-1 1-1h14c.6 0 1 .4 1 1v7z" fill="currentColor" />
+    </template>
     <template v-else-if="id === 'phone-forwarded'">
       <path fill="currentColor" fill-rule="evenodd" d="M23.711 5.974l-4.196 4.192c-.21.21-.42.314-.735.314-.314 0-.524-.104-.734-.314a1.012 1.012 0 0 1 0-1.467l2.413-2.41h-5.875c-.63 0-1.05-.42-1.05-1.049s.42-1.048 1.05-1.048h5.875l-2.413-2.41a1.012 1.012 0 0 1 0-1.468c.42-.419 1.05-.419 1.469 0l4.196 4.193c.105.104.21.21.21.314.105.21.105.524 0 .838 0 .105-.105.21-.21.315zm-.734 11.738v3.144c0 .838-.315 1.677-.944 2.2-.63.525-1.364.944-2.203.944h-.315c-3.358-.42-6.715-1.572-9.548-3.354a22.05 22.05 0 0 1-6.61-6.602C1.47 11.214.315 7.86 0 4.507 0 3.668.21 2.83.734 2.2a3.242 3.242 0 0 1 2.099-1.153H6.295c1.574 0 2.938 1.153 3.148 2.725.105.943.314 1.886.63 2.725.419 1.153.104 2.41-.735 3.354l-.735.733c1.26 1.887 2.833 3.563 4.827 4.821l.734-.734c.84-.838 2.203-1.152 3.357-.733.84.314 1.784.524 2.728.629 1.574.21 2.728 1.572 2.728 3.144zm-2.098 0c0-.524-.42-.943-.945-1.048-1.049-.105-2.098-.42-3.147-.839-.42-.104-.84-.104-1.154.21l-1.364 1.362c-.315.315-.84.42-1.26.21A17.206 17.206 0 0 1 6.296 10.9c-.105-.42 0-.944.315-1.258l1.364-1.363c.21-.21.315-.733.21-1.048-.42-1.048-.63-2.096-.84-3.144 0-.524-.524-.943-1.049-.943H3.148c-.315 0-.63.21-.84.42-.105.209-.21.419-.21.733.315 3.04 1.364 5.974 3.043 8.594 1.574 2.41 3.567 4.506 5.98 5.974 2.623 1.676 5.561 2.725 8.604 3.039.42 0 .63-.105.839-.314.21-.21.315-.42.315-.734v-3.144z"/>
     </template>

src/components/Icon.vue

@@ -22,6 +22,9 @@
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
+          aria-hidden="true"
+          role="presentation"
+          focusable="false"
         >
           <polyline points="6 9 12 15 18 9" />
         </svg>
@@ -37,13 +40,16 @@
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
+          aria-hidden="true"
+          role="presentation"
+          focusable="false"
         >
           <polyline points="9 18 15 12 9 6" />
         </svg>
       </template>
     </ShowMore>
     <template v-else>
-      <svg class="org-node__no-children-indicator" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
+      <svg class="org-node__no-children-indicator" xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" aria-hidden="true" role="presentation" focusable="false">
           <circle cx="2" cy="2" r="2" fill="#B1B1B3" fill-rule="evenodd" transform="translate(9 9.308)"/>
       </svg>
     </template>

src/components/OrgNode.vue

@@ -44,7 +44,7 @@
       <header class="profile__section-header">
         <h2>Colleagues</h2>
         <RouterLink :to="{ name: 'OrgchartHighlight', params: { username } }" class="button button--secondary button--small">
-          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" aria-hidden="true" role="presentation">
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" aria-hidden="true" role="presentation" focusable="false">
             <path fill="currentColor" fill-rule="nonzero" d="M6.222 6.889a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333zm-.444 1.055A1.779 1.779 0 1 1 6.222 8h-.444v-.056zm3.555 3.612a1.778 1.778 0 1 1 0-3.556 1.778 1.778 0 0 1 0 3.556zm0-1.112a.667.667 0 1 0 0-1.333.667.667 0 0 0 0 1.333zm-7.11-6a1.778 1.778 0 1 1 0-3.555 1.778 1.778 0 0 1 0 3.555zm0-1.11a.667.667 0 1 0 0-1.334.667.667 0 0 0 0 1.333zm-.445 1.11h.444v.445h-.444v-.445zm0 .89h.444v.444h-.444v-.445zm.444 1.333H2a.222.222 0 0 1-.222-.222v-.223h.444v.445zm.445 0v-.445h.444v.445h-.444zm1.333 0v-.445h.444v.445H4zm1.778 1.777h.444v.445h-.444v-.445zm.444 1.778H6A.222.222 0 0 1 5.778 10v-.222h.444v.444zm.445 0v-.444h.444v.444h-.444z"/>
           </svg>
           Org Chart
@@ -83,6 +83,7 @@
         </IconBlock>
       </IconBlockList>
       <div v-if="pgpPublicKeys || sshPublicKeys">
+        <hr>
         <h3>Keys</h3>
         <template v-if="pgpPublicKeys && Object.keys(pgpPublicKeys).length > 0">
           <h4 class="visually-hidden">PGP</h4>
@@ -102,6 +103,7 @@
         </template>
       </div>
       <template v-if="languagesSorted && languagesSorted.length > 0">
+        <hr>
         <div class="languages">
           <h3>Languages</h3>
           <Tag
@@ -303,7 +305,7 @@ export default {
         },
         {
           id: 'nav-access-groups',
-          iconId: 'crown',
+          iconId: 'lock',
           label: 'Access Groups',
         },
         {

src/components/Profile.vue

@@ -10,6 +10,7 @@
         height="24"
         viewBox="0 0 24 24"
         fill="none"
+        focusable="false"
         stroke="currentColor"
         stroke-width="2"
         stroke-linecap="round"
@@ -47,6 +48,7 @@
           height="16"
           viewBox="0 0 24 24"
           fill="none"
+          focusable="false"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"

src/components/ProfilePreview.vue

@@ -6,7 +6,7 @@
       <div class="search-result__title">{{ title || funTitle }}</div>
     </RouterLink>
     <RouterLink v-if="isStaff" :to="{ name: 'OrgchartHighlight', params: { username: username } }" class="search-result__orgchart-link">
-      <svg width="22" height="22" viewport="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="presentation">
+      <svg width="22" height="22" viewport="0 0 22 22" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="presentation" focusable="false">
         <path d="M11.5 12a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm0 2a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm7 8a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.5 7a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7zm0-2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3 7h1v1H3V7zm0 2h1v1H3V9zm1 3h-.5a.5.5 0 0 1-.5-.5V11h1v1zm1 0v-1h1v1H5zm2 0v-1h1v1H7zm4 2h1v1h-1v-1zm0 2h1v1h-1v-1zm1 3h-.5a.5.5 0 0 1-.5-.5V18h1v1zm1 0v-1h1v1h-1z"  fill="currentColor" fill-rule="nonzero" />
       </svg>
       <span class="visually-hidden">View {{ username }} in org chart</span>
@@ -86,7 +86,7 @@ export default {
     .search-result__orgchart-link {
       margin-left: auto;
       position: relative; /* so that it stacks on top of search result link */
-      line-height: 1; /* avoid extra space underneath image */
+      line-height: .75; /* avoid extra space underneath image */
       border-radius: var(--imageRadius);
       padding: .72em;
       color: var(--black);

src/components/SearchResult.vue

@@ -100,6 +100,7 @@ export default {
   text-decoration: none;
   transition: background-color .2s ease-in-out;
   border-radius: var(--imageRadius);
+  line-height: .75;  /* to not add vertical whitespace */
 }
 .top-bar__link img {
   vertical-align: middle;

src/components/TopBar.vue

@@ -18,6 +18,7 @@
           height="24"
           viewBox="0 0 24 24"
           fill="none"
+          focusable="false"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
@@ -172,6 +173,7 @@ export default {
       }
       .user-menu__close-avatar {
         margin-right: 1em;
+        font-size: 1em;
       }
       .user-menu__close-button {
         margin-left: auto;