Essa forma está correta?

let html= document.querySelector('html');
 let focoBt = document.querySelector('.app__card-button--foco');
 let curtoBt = document.querySelector('.app__card-button--curto');
 let longoBt = document.querySelector('.app__card-button--longo');
 let banner = document.querySelector('.app__image');
 let titulo = document.querySelector('.app__title');

focoBt.addEventListener('click',()=>{
    alterarContexto('foco');
    titulo.innerHTML=(` Otimize sua produtividade,<br>
    <strong class="app__title-strong">mergulhe no que importa.</strong>`)
    
})

curtoBt.addEventListener('click',()=>{
   alterarContexto('descanso-curto')
   titulo.innerHTML=(`Que tal dar uma respirada?<br>
    <strong class="app__title-strong">Faça uma pausa curta!</strong>`)
   

})

longoBt.addEventListener('click',()=>{
   alterarContexto('descanso-longo');
   titulo.innerHTML =(` Hora de voltar à superfície.<br>
   <strong class="app__title-strong"> Faça uma pausa longa.</strong>`)
})


function alterarContexto(contexto){
    html.setAttribute('data-contexto', contexto);
    banner.setAttribute('src', `imagens/${contexto}.png`);
    titulo.innerHTML =(contexto)
   
}