How to use focus in this satisfaction survey

Question

I need to use focus for this satisfaction survey, but I don't know how to use it, help me! I need to select one of the faces for a satisfaction survey. I send the satisfaction survey of example. I am working in Angular, so if it's possible, I need the typescript. This was my attempt, but I can't get the svg RELLENO to highlight. I don't know where to put the focus. I don't know if the structure used is the right one. Images face are in SVG example Cara-muy-feliz Relleno

        <form action="/action_page.php" class="form-satisfaction">
            <div class="items-calification row align-items-start">
                <input id="test" class="calification" type="image"
                    src="./assets/images/page/dashboard/satisfaction-survey/Cara-triste.svg">
                <div id="scripted" class="circle">
                    <img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
                </div>
                <label class="face">
                    <h3>
                        Deficiente
                    </h3>
                </label>
                <input class="calification" type="image"
                    src="./assets/images/page/dashboard/satisfaction-survey/Cara-neutra.svg">
                <div id="circle" class="circle">
                    <img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
                </div>
                <label class="face">
                    <h3>
                        Regular
                    </h3>
                </label>
                <input class="calification" type="image"
                    src="./assets/images/page/dashboard/satisfaction-survey/Cara-feliz.svg">
                <div id="circle" class="circle">
                    <img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
                </div>
                <label class="face">
                    <h3>
                        Bueno
                    </h3>
                </label>
                <input class="calification" type="image"
                    src="./assets/images/page/dashboard/satisfaction-survey/Cara-muy-feliz.svg">
                <div id="circle" class="circle">
                    <img src="./assets/images/page/dashboard/satisfaction-survey/Relleno.svg">
                </div>
                <label class="face">
                    <h3>
                        Excelente
                    </h3>
                </label>
            </div>
        </form>

    document.getElementById('test').onclick = () => {
      document.getElementById('scripted').focus();
      console.log('SÍ');
    };

.form-satisfaction
            overflow: hidden
            .items-calification
                position: relative
                top: 90.76px
                width: 1080px
                height: 244.24px
                left: 200px
                .calification
                    position: relative
                    margin-left: -90px
                .circle
                    img
                        z-index: -1
                        visibility: hidden
                        position: relative
                        left: -166px
                .img:focus
                    visibility: visible