Cookie consent bar and keyboard navigation

Hello,

I’m building an accessible website with enfold, and have been able to solve most of my problems, but this one is stumping me. I would like, for accessibility reason, that when the cookie bar is shown, it should be the first reachable element on the page when using keyboard navigation, before the skip links etc.
I know there is the option of using the cookie modal window, but the problem is that you guys use tabs in there, and your tabs are not aria-friendly (the keyboard navigation does not follow W3C guidelines).

Could you help me make it work (or tell me how I could switch the tabs in the modal window by an accordeon, since I was able to make this one aria-friendly) ? This is the code I have so far :

function cookies_buttons_first() { ?>
<script type="text/javascript">
function cookiesFirst(){

var cookieBtn1 = document.getElementsByClassName('.avia-cookie-consent-button-1');
var cookieBtn2 = document.getElementsByClassName('.avia-cookie-consent-button-2');
var cookieBtn3 = document.getElementsByClassName('.avia-cookie-consent-button-3');
console.log(cookieBtn1);
console.log(cookieBtn2);
console.log(cookieBtn3);
	for (var i=0;i<cookieBtn1.length;i++){
					cookieBtn1[i].setAttribute('tabindex', '1');	
	}
	for (var i=0;i<cookieBtn2.length;i++){
					cookieBtn2[i].setAttribute('tabindex', '1');	
	}
	for (var i=0;i<cookieBtn3.length;i++){
					cookieBtn3[i].setAttribute('tabindex', '1');	
	}
};
cookiesFirst();
</script>
<?php }

add_action('wp_footer', 'cookies_buttons_first',999);

The idea is that if we give the buttons a tabindex value of 1, they are the first “tabbable” elements. But for some reason, even though it does load at the cottom of the page, the three html objects collections (cookieBtn1, cookieBtn2, cookieBtn3) are empty. Do you know what’s not working in there ?

Thanks for your help !