iPhone VoiceOver doesn't pronounce text for the arrow - html

Question

I have this tested page http://fiddle.jshell.net/wt3dqm8b/1/show/light/ (which might be edited here https://jsfiddle.net/wt3dqm8b/1/).
Unfortunately, when you visit it from iPhone with turned on VoiceOver (Settings -> General -> Accessibility -> VoiceOver ON), you hear "Link One link" for the "Link One" link (which is good), but do NOT hear the same "Link One link" when you tap on the ">" arrow. Only "link" pronounced when you click on the ">" arrow.
Many ways were tried, but no one worked fine.
How to change the html code so that the same text "Link One link" pronounced when you click on the ">" arrow?
Here is the code from the page above:
HTML:
<ul class="master secondary">
<li aria-expanded="false" class="main" tabindex="0" aria-label="Link One">
<a tabindex="-1" href="https://google.com">
<span ><span > Link One </span></span>
<i class="fa fa-angle-right"></i>
</a>
</li>
<li aria-expanded="false" class="main" tabindex="0" aria-label="Link Two">
<a tabindex="-1" href="https://google.com">
<span ><span > Link Two </span></span>
<i class="fa fa-angle-right"></i>
</a>
</li>
</ul>
and CSS:
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin-top: 60px;
}
.master {
margin: 0;
padding: 0;
list-style: none;
}
.master .main {
border-bottom: 1px solid #ccc;
}
.master .main>a {
position: relative;
display: block;
padding: 20px;
color: green;
text-decoration: none;
background-position: 15px;
}
.master .main > a .fa-angle-right {
position: absolute;
top: 50%;
right: 30px;
margin-top: -8px;
}
P.S. Of course I don't want to change the html code significantly, so that:
no significant changes are expected for JAWS screen reader,
the same behavior kept for the keyboard used - the whole navigation items get focused only once when the Tab key used, no changes in this behavior please.
UPDATE:
Even in the code below
<ul class="master secondary">
<li aria-expanded="false" class="main">
<a target="_self" href="https://google.com">
<span ><span > Link One </span></span>
<i class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></i>
</a>
</li>
<li aria-expanded="false" class="main">
<a target="_self" href="https://google.com">
<span ><span > Link Two </span></span>
<span class="fa fa-angle-right" title="Time to destination by car"><span class="sr-only">This text is not pronounced with VoiceOver - why?</span></span>
</a>
</li>
</ul>
Thank you.

Answer 1

I ran your updated code with your CSS and the "sr-only" class from What is sr-only in Bootstrap 3? and it worked fine with VoiceOver. I'm running iOS 12.1.2 on my iPhone.
I heard "this text is not pronounced..." when navigating to the link.
Everything contained within the <a> was treated as one "tab stop" in VoiceOver so I couldn't swipe specifically to the ">" arrow. That's the behavior I'd expect. You should not make the ">" arrow a separate link or tab stop if "link one" has the same destination (href) as the ">" arrow.