refactor: replace host decorator in profile pic comp (#874)

davidlj95 · Nov 27, 2024 · aa587f6 · aa587f6
1 parent 24bb240
commit aa587f6
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 31 deletions.
diff --git a/src/app/resume-page/chip/chip.component.ts b/src/app/resume-page/chip/chip.component.ts
@@ -9,7 +9,7 @@ import { Component, EventEmitter, input, Output } from '@angular/core'
     '[class.selected]': 'selected()',
     '[class.selectable]': 'selectedChange.observed',
     '[attr.role]': "selectedChange.observed ? 'button': undefined",
-    '[attr.tabindex]': "selectedChange.observed ? '0': undefined",
+    '[attr.tabindex]': 'selectedChange.observed ? 0 : undefined',
     '(click)': 'emitToggledSelected()',
     '(keydown.enter)': 'emitToggledSelected()',
     '(keydown.space)': 'emitToggledSelected()',

diff --git a/src/app/resume-page/profile-section/profile-picture/profile-picture.component.html b/src/app/resume-page/profile-section/profile-picture/profile-picture.component.html
@@ -17,7 +17,7 @@
   [ngSrc]="'images/misc/profile.png'"
   priority
   width="128"
-  [tabindex]="hasBeenFocused ? -1 : 0"
+  [tabindex]="_hasBeenFocused ? -1 : 0"
   (focus)="onFocus()"
 />
 <div class="comment">

diff --git a/src/app/resume-page/profile-section/profile-picture/profile-picture.component.spec.ts b/src/app/resume-page/profile-section/profile-picture/profile-picture.component.spec.ts
@@ -5,6 +5,7 @@ import { expectIsNotVisible } from '@/test/helpers/visibility'
 
 import { ProfilePictureComponent } from './profile-picture.component'
 import { NgOptimizedImage } from '@angular/common'
+import { ATTRIBUTE_ARIA_LABEL } from '@/test/helpers/aria'
 
 describe('ProfilePictureComponent', () => {
   let component: ProfilePictureComponent
@@ -23,6 +24,12 @@ describe('ProfilePictureComponent', () => {
     expect(component).toBeTruthy()
   })
 
+  it('should contain a label', () => {
+    expect(fixture.debugElement.attributes[ATTRIBUTE_ARIA_LABEL]).toContain(
+      'Profile',
+    )
+  })
+
   it('should display profile picture', () => {
     expect(
       fixture.debugElement
@@ -44,13 +51,6 @@ describe('ProfilePictureComponent', () => {
 
   describe('accessible easter egg', () => {
     describe('initially', () => {
-      it('component should not have has been focused attribute', () => {
-        expect(
-          fixture.debugElement.attributes[
-            ProfilePictureComponent.HAS_BEEN_FOCUSED_ATTR
-          ],
-        ).toBeUndefined()
-      })
       // We don't receive focus events if including whole component in tab sequence
       it('component as a whole should not be in tab sequence', () => {
         expect(fixture.debugElement.attributes['tabindex']).toBe('-1')
@@ -72,14 +72,6 @@ describe('ProfilePictureComponent', () => {
         fixture.detectChanges()
       })
 
-      it('component should have has been focused attribute', () => {
-        expect(
-          fixture.debugElement.attributes[
-            ProfilePictureComponent.HAS_BEEN_FOCUSED_ATTR
-          ],
-        ).toBe(true.toString())
-      })
-
       it('component should be included in tab sequence', () => {
         expect(fixture.debugElement.attributes['tabindex']).toBe('0')
       })

diff --git a/src/app/resume-page/profile-section/profile-picture/profile-picture.component.ts b/src/app/resume-page/profile-section/profile-picture/profile-picture.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostBinding, Inject } from '@angular/core'
+import { Component, Inject } from '@angular/core'
 import { METADATA } from '@/common/injection-tokens'
 import { Metadata } from '@/data/metadata'
 import { NgOptimizedImage } from '@angular/common'
@@ -8,24 +8,16 @@ import { NgOptimizedImage } from '@angular/common'
   templateUrl: './profile-picture.component.html',
   styleUrls: ['./profile-picture.component.scss'],
   imports: [NgOptimizedImage],
+  host: {
+    'aria-label': 'Profile picture',
+    '[attr.data-has-been-focused]': '_hasBeenFocused ? true : undefined',
+    '[attr.tabindex]': '_hasBeenFocused ? 0 : -1',
+  },
 })
 export class ProfilePictureComponent {
   readonly realName: string
   protected _hasBeenFocused = false
 
-  static HAS_BEEN_FOCUSED_ATTR = 'data-has-been-focused'
-
-  @HostBinding(`attr.${ProfilePictureComponent.HAS_BEEN_FOCUSED_ATTR}`)
-  get hasBeenFocused() {
-    return this._hasBeenFocused ? true : undefined
-  }
-
-  @HostBinding('attr.tabindex') get tabIndex() {
-    return this.hasBeenFocused ? 0 : -1
-  }
-
-  @HostBinding('attr.aria-label') ariaLabel = 'Profile picture'
-
   constructor(@Inject(METADATA) metadata: Metadata) {
     this.realName = metadata.realName
   }