Change add party memeber icon and added titles to icon buttons

src/components/AddMapButton.js

@@ -70,7 +70,7 @@ function AddMapButton({ onMapChanged }) {
 
   return (
     <>
-      <IconButton aria-label="Add Map" onClick={openModal}>
+      <IconButton aria-label="Add Map" title="Add Map" onClick={openModal}>
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="24"

src/components/AddPartyMemberButton.js

@@ -14,7 +14,12 @@ function AddPartyMemberButton({ gameId }) {
 
   return (
     <>
-      <IconButton m={1} aria-label="Add Party Member" onClick={openModal}>
+      <IconButton
+        m={1}
+        aria-label="Add Party Member"
+        title="Add Party Member"
+        onClick={openModal}
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="24"
@@ -23,7 +28,7 @@ function AddPartyMemberButton({ gameId }) {
           fill="currentcolor"
         >
           <path d="M0 0h24v24H0V0z" fill="none" />
-          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4 11h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H8c-.55 0-1-.45-1-1s.45-1 1-1h3V8c0-.55.45-1 1-1s1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1z" />
+          <path d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V8c0-.55-.45-1-1-1s-1 .45-1 1v2H2c-.55 0-1 .45-1 1s.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1v-2h2c.55 0 1-.45 1-1s-.45-1-1-1H6zm9 4c-2.67 0-8 1.34-8 4v1c0 .55.45 1 1 1h14c.55 0 1-.45 1-1v-1c0-2.66-5.33-4-8-4z" />
         </svg>
       </IconButton>
       <Modal isOpen={isAddModalOpen} onRequestClose={closeModal}>

src/components/ChangeNicknameButton.js

@@ -24,7 +24,12 @@ function ChangeNicknameButton({ nickname, onChange }) {
   }
   return (
     <>
-      <IconButton m={1} aria-label="Change Nickname" onClick={openModal}>
+      <IconButton
+        m={1}
+        aria-label="Change Nickname"
+        title="Change Nickname"
+        onClick={openModal}
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="24"

src/components/Nickname.js

@@ -28,7 +28,8 @@ function Nickname({ nickname, stream }) {
             position: "absolute",
             bottom: "-2px",
           }}
-          aria-label="Toggle Player Mute"
+          aria-label={streamMuted ? "Unmute Player" : "Mute Player"}
+          title={streamMuted ? "Unmute Player" : "Mute Player"}
         >
           <svg
             xmlns="http://www.w3.org/2000/svg"

src/components/SizeInput.js

@@ -9,7 +9,8 @@ function SizeInput({ value, onChange }) {
       </Text>
       <Flex sx={{ alignItems: "center", justifyContent: "center" }}>
         <IconButton
-          aria-label="Lower token size"
+          aria-label="Lower Token Size"
+          title="Lower Token Size"
           onClick={() => value > 1 && onChange(value - 1)}
         >
           <svg
@@ -25,7 +26,8 @@ function SizeInput({ value, onChange }) {
         </IconButton>
         <Text>{value}</Text>
         <IconButton
-          aria-label="Increase token size"
+          aria-label="Increase Token Size"
+          title="Increase Token Size"
           onClick={() => onChange(value + 1)}
         >
           <svg

src/components/StartStreamButton.js

@@ -73,7 +73,12 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
 
   return (
     <>
-      <IconButton m={1} aria-label="Start Radio Stream" onClick={openModal}>
+      <IconButton
+        m={1}
+        aria-label="Start Radio Stream"
+        title="Start Radio Stream"
+        onClick={openModal}
+      >
         <svg
           xmlns="http://www.w3.org/2000/svg"
           height="24"