From 0f4a5caf94ed6f97e5fc746af82d878cfaf167a3 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 9 Apr 2020 11:12:46 +1000
Subject: [PATCH] Change add party memeber icon and added titles to icon
 buttons

---
 src/components/AddMapButton.js         | 2 +-
 src/components/AddPartyMemberButton.js | 9 +++++++--
 src/components/ChangeNicknameButton.js | 7 ++++++-
 src/components/Nickname.js             | 3 ++-
 src/components/SizeInput.js            | 6 ++++--
 src/components/StartStreamButton.js    | 7 ++++++-
 6 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/AddMapButton.js b/src/components/AddMapButton.js
index 175e3cb..5432df0 100644
--- a/src/components/AddMapButton.js
+++ b/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"
diff --git a/src/components/AddPartyMemberButton.js b/src/components/AddPartyMemberButton.js
index 78c46a5..4b93d79 100644
--- a/src/components/AddPartyMemberButton.js
+++ b/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}>
diff --git a/src/components/ChangeNicknameButton.js b/src/components/ChangeNicknameButton.js
index f0db862..c04a939 100644
--- a/src/components/ChangeNicknameButton.js
+++ b/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"
diff --git a/src/components/Nickname.js b/src/components/Nickname.js
index 94fe404..ef8d4eb 100644
--- a/src/components/Nickname.js
+++ b/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"
diff --git a/src/components/SizeInput.js b/src/components/SizeInput.js
index 3e9cfd6..2cc2a8e 100644
--- a/src/components/SizeInput.js
+++ b/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
diff --git a/src/components/StartStreamButton.js b/src/components/StartStreamButton.js
index de7ad5d..9e3c017 100644
--- a/src/components/StartStreamButton.js
+++ b/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"