title: How to solve material design input field placeholder screen reader issue with Firefox?
body: <p>I am using material design with floating label for the input field.
  There is some scenario to use placeholder text for announcing extra details to the user. For the inactive/blurred text field I can not add the placeholder (label and placeholder text will overlap each other) so I toggle placeholder text on input field focus in/out.</p>
  
  <p>It's working fine in JAWS along with Chrome, announcing: <code>&lt;label&gt; &lt;placeholdertext&gt;</code></p>
  
  <p>But with Firefox it is announcing only <code>&lt;label&gt;</code> and placeholder is missed out as it's being added dynamically. </p>
  
  <p>Is there any fix available for this situation?  </p>
  
  <p>I am assuming if there is no fix, I may need to add the placeholder text along with label and there could be spacing issues in the future.</p>
  
  <p><a href="https://i.stack.imgur.com/0WxxL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0WxxL.png" alt="Label text - Input tex…"></a></p>