From 9fe9417f24b9654ab76cc18bfdf39fa605536a18 Mon Sep 17 00:00:00 2001
From: Mohamed El Mahallawy <mmahalwy@gmail.com>
Date: Fri, 2 Sep 2016 17:31:24 -0700
Subject: [PATCH] Fixes #461 (#473)

#461 Adding verse number to tooltip
---
 src/components/Ayah/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/components/Ayah/index.js b/src/components/Ayah/index.js
index 58e9b9cf9..d6d6a4fdd 100644
--- a/src/components/Ayah/index.js
+++ b/src/components/Ayah/index.js
@@ -92,8 +92,9 @@ export default class Ayah extends Component {
 
     // position is important as it will differentiate between words and symbols, see 2:25:13
     let position = -1;
-    let text = ayah.words.map(word => {
+    let text = ayah.words.map((word, index) => {
       let id = null;
+      const isLast = ayah.words.length === index + 1;
       const className = `${word.className} ${word.highlight ? word.highlight : ''}`;
 
       if (word.charTypeId === CHAR_TYPE_WORD) {
@@ -119,14 +120,16 @@ export default class Ayah extends Component {
         );
       }
 
+      const label = isLast ? {'aria-label': `Verse ${ayah.ayahNum}`} : {}
       return (
         <b
           id={id}
           onClick={(event) => onWordClick(event.target.dataset.key)}
           data-key={`${word.ayahKey}:${position}`}
-          className={`${className} pointer`}
+          className={`${className} ${isLast && styles.Tooltip} pointer`}
           key={word.code}
           dangerouslySetInnerHTML={{__html: word.code}}
+          {...label}
         />
       );
     });