fix: accessibility: button tabbable, role=status

Author: WofWca

src/App.tsx

@@ -63,6 +63,7 @@ export default function App() {
       </div>
 
       <div
+        role="status"
         style={{
           position: "absolute",
           top: 0,

src/components/Button.module.css

@@ -1,4 +1,5 @@
 .btn {
+  border: none;
   display: inline-flex;
   flex-direction: row;
   flex-wrap: nowrap;

src/components/Button.tsx

@@ -1,14 +1,14 @@
+import type React from "react";
 import style from "./Button.module.css";
 
-interface Props {
+type Props = {
   children: React.ReactNode;
-  [key: string]: any;
-}
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
 
 export default function Button({ children, ...props }: Props) {
   return (
-    <div className={style.btn} {...props}>
+    <button className={style.btn} {...props}>
       {children}
-    </div>
+    </button>
   );
 }

src/components/EndCallButton.tsx

@@ -16,7 +16,12 @@ interface Props {
 export default function EndCallButton({ ...props }: Props) {
   props.style = { ...containerStyle, ...(props.style || {}) };
   return (
-    <Button style={containerStyle} {...props}>
+    <Button
+      aria-label="End call"
+      title="End call"
+      style={containerStyle}
+      {...props}
+    >
       <MaterialSymbolsCallEnd />
     </Button>
   );