Article preview component using CSS Flexbox and vanilla JS

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted over 1 year ago

  This is great!

  My only suggestion would be to consider changing the aria-label on the button. I think it can be confusing when you change labels like you are doing at the moment. It means it would get announced by screen readers as "button, collapsed, Open share options" and "button, expanded, Close share options". Additionally, this would make it harder for Voice Control users because the start of the label changes even though the icon stays the same.

  Instead, I suggest changing the label to "Share options toggle" and making that label persist in all states. This means screen readers would say "button, collapsed/expanded, Share options toggle" every time, relying on the aria-expanded to communicate state of the one button; and it would mean that voice control users can say "click share" and activate the button no matter what state it is in.

  Marked as helpful

  1

  ---

  

  P

  Wessel Konstantinov•350

  @WesselKonstantinovPosted over 1 year ago

  Hi @grace-snow, thank you again for your feedback! I thought it was necessary to change the aria-label depending on the state of the share button, but I can imagine it can be confusing when it keeps changing. I will pause the challenge I'm currently working on and revisit this one to implement your suggestion!

  0