Type 'null' is not assignable to type 'Element' | Angular: avançando no design de componentes com acessibilidade

Na diretiva FocusBackDirective ocorre esse erro quando seta private lastFocusedElement!: Element; É semelhante ao erro na diretiva FocusTrapDirective com as propriedades firstFocusableElement e lastFocusableElement

Para a diretiva FocusBackDirective eu consegui resolver colocando uma verificação Element | null: private lastFocusedElement!: Element | null;

Para a diretiva FocusTrapDirective eu não setei o valor de null, apenas iniciei as propriedades como HTMLElement: private firstFocusableElement!: HTMLElement;

ps: o exclamação na frente das propriedades é para evitar o erro de ts: "Property 'firstFocusableElement' has no initializer and is not definitely assigned in the constructor."

Oi Luciane, tudo bem?

Desculpe a demora em retornar.

Primeiramente, parabéns por estar avançando no design de componentes com acessibilidade no curso de Angular! Agora, em relação à sua dúvida sobre o erro "Type 'null' is not assignable to type 'Element'", vou explicar o que está acontecendo e como solucioná-lo.

Esse erro ocorre porque, por padrão, as propriedades de classe em TypeScript precisam ser inicializadas com algum valor. Quando você declara a propriedade "lastFocusedElement" como "Element", ela não pode ser inicializada com "null", pois "null" não é do tipo "Element". Por isso, ao tentar inicializá-la com "null", o TypeScript aponta o erro.

Para resolver esse erro, você pode definir o tipo da propriedade como "Element | null", assim como você fez na diretiva "FocusBackDirective". Dessa forma, a propriedade "lastFocusedElement" poderá ser inicializada com "null" ou com um elemento do tipo "Element". Por exemplo:

private lastFocusedElement: Element | null = null;

Agora, em relação à diretiva "FocusTrapDirective", como você mencionou que as propriedades "firstFocusableElement" e "lastFocusableElement" foram declaradas como "HTMLElement" e não foram inicializadas com "null", isso significa que elas precisam ser atribuídas a algum elemento do tipo "HTMLElement" no construtor da classe. Isso pode ser feito usando o método "querySelector" ou "getElementById", por exemplo:

constructor(private elementRef: ElementRef) {
  this.firstFocusableElement = elementRef.nativeElement.querySelector('[tabindex="0"]');
  this.lastFocusableElement = elementRef.nativeElement.querySelector('[tabindex]:not([tabindex="-1"]):not([tabindex="0"]):last-of-type');
}

Dessa forma, as propriedades "firstFocusableElement" e "lastFocusableElement" serão inicializadas com elementos do tipo "HTMLElement" e o erro será evitado.

Espero ter esclarecido sua dúvida sobre o erro "Type 'null' is not assignable to type 'Element'" e ter ajudado você a resolver o problema. Se precisar de mais ajuda, não hesite em perguntar!

Um abraço e bons estudos.

Mergulhe em programação