655056 - Add alternative text to quiz progress bar

Status: RESOLVED FIXED

(Websites :: webifyme.org, defect, P3)

Description

[William Reynolds [:williamr]]

Per bug 653166 comment 3, the progress bar shown the below the quiz questions does not include proper alternative text.

Let's add alternative text to the progress bar that lets the user know how far into the quiz they are, either the number of questions remaining or percentage complete.

Comment 1

[William Reynolds [:williamr]]

Copy for the alternative text should match what's shown in the blue tooltip below the progress bar. As in, "XY MORE TO GO" where XY is the number of questions left to answer.

Comment 2

[Austin King [:ozten]]

Is this string committed to git yet? We need to prepare for string freeze.

Comment 3

[Austin King [:ozten]]

Per williamr in IRC, this string isn't committed yet.

To remove the blocking status of Bug#650033, please add an L10n comment and this string to any template.

L10n: %s is the number of questions remaining.

"%s more to go"

We can build the functionality and close this bug later.

Note; lower case, since this is for screen readers and not a visual presentation.

Comment 4

[Austin King [:ozten]]

Stas or Gandlaf: Should ngettext be used for this string?

Comment 5

[Staś Małolepszy :stas]

Yes, great catch, Austin.  In some languages it might be necessary to explicitly call out "questions" in this string, e.g. "n questions left".  Using ngettext will ensure that "questions" are in correct plural form in these languages.

Also, should it be %s or %d?

William, still up for it? :)  I'll be happy to guide you through ngettext if you wish.

Comment 6

[Austin King [:ozten]]

Stas can you review this commit?

https://github.com/mozilla/webifyme/commit/5953f678ee01f1125088001e2599e4969533e5b1

This fixes the L10n aspect of this bug, but not the accessibility aspect. Leaving to TBG to fix and close.

Comment 7

[Austin King [:ozten]]

(In reply to comment #6)
I forgot to add an L10n comment.

https://github.com/mozilla/webifyme/commit/851e8d14a77a24fbc80e3bd12875ed76316eeff4

Comment 8

[William Reynolds [:williamr]]

(In reply to comment #5)
> William, still up for it? :)  I'll be happy to guide you through ngettext if
> you wish.

Looks like ozten beat me to the ngettext part (thanks ozten!). I can try adding the alt text, but I can't work on it until Friday afternoon PST at the earliest.

Comment 9

[Adam Miller]

Can someone explain how the tooltip is insufficient in providing alternative text to the progress bar graphic? 

If you examine the HTML building that component, you'll see that the last child node is the text that is used to render the label, and the graphic itself is rendered as the background image of the containing div. There's no img tag to add an alt attribute to, so I can't thinking of a better way to add alternate text than what is already there. 

That string is also being translated for digits 0-20.

Comment 10

[Austin King [:ozten]]

(In reply to comment #9)
I didn't realize this was feature complete.
Marco, can you verify?