[Dúvida] Dúvida contexto

eu consegui entender até o momento que ele leva a função " alterarcontexto('foco')" pra dentro da event click do focoBt, a partir daí eu não consegui mais entender o que acontece, consigo replicar, mas não consigo entender

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

focoBt.addEventListener('click', () => {
    alterarcontexto('foco')
})

curtoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'descanso-curto')
    banner.setAttribute('src','/imagens/descanso-curto.png' )
})

longoBt.addEventListener('click', () => {
    html.setAttribute('data-contexto', 'descanso-longo')
    banner.setAttribute('src','/imagens/descanso-longo.png' )
})

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