Classic and Hugo render Finish button aria-label naming discrepancy

[danielramirez0]

Describe the bug

Hugo renders the lesson Finish <button> with an aria-label="finish", while the classic renderer uses aria-label="Finish". When applying/updating theme/styles after changing from classic renderer to Hugo, this caused unexpected changes in elements displayed in the UI.

Additional information

No response

[GrahamDumpleton]

That is not the full picture.

With the classic renderer that label was usually filled in from the workshop/modules.yaml file exit_sign property for a page. The default template would create that file with label Finish Workshop.

So technically I believe it could be different for every workshop and so basing styling on the value of aria-label may not have been a good idea with classic renderer. Same thing with the default of Continue for moving between pages, which could also be overridden in workshop/modules.yaml file.

In the Hugo based renderer you can not at the moment override the labels of buttons to go to next page or for end of workshop and so it uses continue or finish for aria-label and you have certainty that it cannot be overridden.

So you were possibly lucky that styling wasn't being broken for specific workshops as people were using the generated default in workshop/modules.yaml file.

How was the value of aria-label being relied upon?

[billkable]

@GrahamDumpleton thanks for the context. I asked @danielramirez0 to submit this to get the background on the difference.

How was the value of aria-label being relied upon?

Spring Academy hides the finish button and work area controls in its embedded Educates theme styling. The idea is to keep the lesson completion UI controls driven from Spring Academy.

I spot checked our classic content, uses the "Finish" exit sign in the module configuration.
We have introduced the Hugo rendering, but need a period of time for co-existence while we port the classic -> hugo rendering (we plan on moving all our classic content to hugo).

@danielramirez0 worked around the discrepancy by including both the default classic renderer and hugo renderer finish buttons in the selectors that hide the buttons.

@joemoore @danielramirez0 please add anything I've missed here.

[GrahamDumpleton]

Going forward, right now I think it still make sense to leave aria-label as continue and finish, in lower case.

I don't really know what best practices are for aria-label as far as the original intent of it though, so unless have better guidance, would prefer just to have the styling deal with both during transition.

[joemoore]

Another option is to add a consistent semantic class to the buttons.

The "Continue" button semantically invites the user to go to the next page, so semantically next, continue, proceed, etc.

The "Finish Workshop" button semantically invites the user indicate they are done with the workshop, so semantically finish, end-workshop, terminate, exit, etc.

As long as there is a consistent semantic attribute on the two semantically different buttons then we can handle the two differently as needed.