Improve keyboard navigation

This commit is contained in:
Cameron Cordes
2020-08-12 17:14:17 -04:00
parent b210da65c5
commit abde35c6f9
2 changed files with 10 additions and 10 deletions

View File

@@ -21,6 +21,6 @@
}
.icon-layout:hover {
color: #0FA0CE;
color: var(--nord12);
cursor: pointer;
}

View File

@@ -3,19 +3,19 @@
<h2>Social Media</h2>
<div style="display: flex; justify-content: center; width: 100%">
<div class="icon-layout" (click)="linkedInClicked()">
<img src="../../assets/linked-in.png" class="icon" alt="LinkedIn">
<span class="icon-text">LinkedIn</span>
<div class="icon-layout" (click)="linkedInClicked()" (keydown.enter)="linkedInClicked()" tabindex="0">
<img src="../../assets/linked-in.png" class="icon" alt="LinkedIn" tabindex="-1">
<span class="icon-text" tabindex="-1">LinkedIn</span>
</div>
<div class="icon-layout" (click)="githubClicked()">
<img src="../../assets/github.png" class="icon" alt="Github">
<span class="icon-text">GitHub</span>
<div class="icon-layout" (click)="githubClicked()" (keydown.enter)="githubClicked()" tabindex="0">
<img src="../../assets/github.png" class="icon" alt="Github" tabindex="-1">
<span class="icon-text" tabindex="-1">GitHub</span>
</div>
<div class="icon-layout" (click)="emailClicked()">
<img src="../../assets/gmail.png" class="icon" alt="GMail">
<span class="icon-text">Email</span>
<div class="icon-layout" (click)="emailClicked()" (keydown.enter)="emailClicked()" tabindex="0">
<img src="../../assets/gmail.png" class="icon" alt="GMail" tabindex="-1">
<span class="icon-text" tabindex="-1">Email</span>
</div>
</div>
<p class="subtitle mt-2">Contact me to connect, collaborate or just to chat.</p>