Add more web browser control buttons for accessibility

[Atechnologist]

How to add more buttons control?
I've tried modifying the Java Scripts but added navigation buttons not showing. What I am doing wrong? see below modified js code:
var wake_lock_supported;
if ("wakeLock" in navigator && "request" in navigator.wakeLock) {
wake_lock_supported = true;
} else {
wake_lock_supported = false;
console.warn("Wake Lock API not supported by this browser.");
}

var css_zoom_supported;
try {
if (CSS.supports("zoom", "1")) {
css_zoom_supported = true;
} else {
css_zoom_supported = false;
console.warn("CSS Zoom not supported by this browser.");
}
} catch (error) {
css_zoom_supported = true;
}

let wakeLock = null;
const requestWakeLock = async () => {
try {
wakeLock = await navigator.wakeLock.request("screen");
} catch (e) {
wakeLock = null;
}
};
const cancelWakeLock = () => {
wakeLock?.release();
wakeLock = null;
};

// Icons for navigation and control buttons
const arrow_up_icon = '';
const arrow_down_icon = '';
const arrow_left_icon = '';
const arrow_right_icon = '';
const fullscreen_icon = '';
const zoom_in_icon = '';
const zoom_out_icon = '';

const button_style = "padding: 1rem; cursor: pointer; font-size: 1.5rem; margin: 0.25rem;";

function simulateKeyEvent(key) {
const event = new KeyboardEvent("keydown", {
key: key,
code: Arrow${key},
bubbles: true,
});
document.dispatchEvent(event);
}

class BrowserControlCard extends HTMLElement {
setConfig(config) {
this.config = config;
this.content = document.createElement("ha-card");
this.content.style.padding = "1rem"; // Ensures padding if no_padding is false

// Navigation Button Styles
const buttonStyle = `
  padding: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  margin: 0.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
`;

// Wrapper for navigation buttons
const navContainer = document.createElement("div");
navContainer.style.display = "grid";
navContainer.style.gridTemplateColumns = "repeat(3, auto)";
navContainer.style.justifyItems = "center";
navContainer.style.alignItems = "center";
navContainer.style.marginBottom = "1rem";

// Navigation buttons
navContainer.innerHTML = `
  <div></div>
  <button style="${buttonStyle}" id="up">${'<ha-icon icon="mdi:arrow-up"></ha-icon>'}</button>
  <div></div>
  <button style="${buttonStyle}" id="left">${'<ha-icon icon="mdi:arrow-left"></ha-icon>'}</button>
  <div></div>
  <button style="${buttonStyle}" id="right">${'<ha-icon icon="mdi:arrow-right"></ha-icon>'}</button>
  <div></div>
  <button style="${buttonStyle}" id="down">${'<ha-icon icon="mdi:arrow-down"></ha-icon>'}</button>
  <div></div>
`;

// Attach click event listeners to navigation buttons
navContainer.querySelector("#up").onclick = () => simulateKeyEvent("ArrowUp");
navContainer.querySelector("#down").onclick = () => simulateKeyEvent("ArrowDown");
navContainer.querySelector("#left").onclick = () => simulateKeyEvent("ArrowLeft");
navContainer.querySelector("#right").onclick = () => simulateKeyEvent("ArrowRight");

// Append navigation controls to content
this.content.appendChild(navContainer);

// Add this.content to the card
while (this.firstChild) {
  this.removeChild(this.firstChild);
}
this.appendChild(this.content);

}
}

customElements.define("browser-control-card", BrowserControlCard);

function simulateKeyEvent(key) {
const event = new KeyboardEvent("keydown", { key: key, code: key, bubbles: true });
document.dispatchEvent(event);
}

// Add control buttons for Fullscreen, Zoom In, and Zoom Out
this.addControlButton("Fullscreen", fullscreen_icon, () => {
  if (!document.fullscreenElement) document.documentElement.requestFullscreen();
  else document.exitFullscreen();
});

this.addControlButton("Zoom In", zoom_in_icon, () => {
  document.body.style.zoom = parseFloat(getComputedStyle(document.body).zoom) + 0.1;
});
this.addControlButton("Zoom Out", zoom_out_icon, () => {
  document.body.style.zoom = parseFloat(getComputedStyle(document.body).zoom) - 0.1;
});

this.appendChild(this.content);

}

createNavButton(name, icon, action) {
const button = document.createElement("button");
button.innerHTML = icon;
button.style.cssText = button_style;
button.onclick = action;
return button;
}

createEmptyCell() {
const empty = document.createElement("div");
empty.style.width = "2rem"; // Adjust for spacing
return empty;
}

addControlButton(name, icon, action) {
const button = document.createElement("button");
button.innerHTML = icon;
button.style.cssText = button_style;
button.onclick = action;
this.content.appendChild(button);
}
}

customElements.define("browser-control-card", BrowserControlCard);

window.customCards = window.customCards || [];
window.customCards.push({
type: "browser-control-card",
name: "Browser Control Card",
description: "A card to control browser settings and navigation.",
});