Fix for accessibility: Modal Dialog Button

[vdeshpande]

Description

This fix is to make the screen reader read the Modal Dialog Close button better.

Specific Changes proposed

Please list the specific changes involved in this pull request.

Requirements Checklist

• Feature implemented / Bug fixed
• If necessary, more likely in a feature request than a bug fix
  • Unit Tests updated or fixed
  • Docs/guides updated
  • Example created (starter template on JSBin)
• Reviewed by Two Core Contributors

[vdeshpande]

@gkatsev , @OwenEdwards How do the above changes look ?

[gkatsev]

close-button still needs a default controlText similar to clickable-component's

[mister-ben]

Are the translations from Google Translate? The German and Dutch at least aren't right.

[OwenEdwards]

@gkatsev I think the close-button does (still) have a default controlText:

https://github.com/videojs/video.js/blob/master/src/js/close-button.js#L15

  constructor(player, options) {
    super(player, options);
    this.controlText(options && options.controlText || this.localize('Close'));
  }

@mister-ben is there a specific procedure for adding new text which needs translating? Should it just be added into the en.json file, and then left for others to translate?

[mister-ben]

I think just updating the en.json "template" is better than spending the time to add low quality translations that will need to be updated anyway. We could put up a page showing which language files have missing keys.

[vdeshpande]

@mister-ben Sure, we could update the template.
However the list of localized files may increase over time and we can afford to have missing keys.
Missing values for a key is fine as the screen reader will read the key in that case ( Voice Over read the key in English)

Also I was using Google translate to translate the text as I do not know many of the languages.
Feel free to translate the text back ;)

[mister-ben]

Google translate really isn't that good, and missing keys won't break anything. localize() returns the original string if there's not a key for the language in use. Some of the files here have empty strings as the value, so that makes things even worse.

I'd let a native speaker add a good translation when they discover there are missing keys, which has happened fairly well organically so far, rather than add poor translations.

Again, I think it's worth putting something together that will check for missing translations (again much simpler to check for missing keys) so contributors speaking a language can know what needs addressing. I can see if I can figure something out for that.

[vdeshpande]

@mister-ben localize() takes in the key , so not having a key would be an issue.
Not having a value to a key is ok I think.

I'm fine with letting native translators translate text. What do you guys think @gkatsev , @OwenEdwards ?

[OwenEdwards]

I've looked at how localize() works, and tested it, and it seems like it can handle both a missing key and "key": "", which both just return the key value.

So this is more of a style decision than a programmatic decision. Personally, I think having null values in the language files (the second pattern) is confusing, rather than having "key": "key", and the absence of a key indicates that the language file is incomplete, but I'm open to other decisions.

@mister-ben it would certainly be useful if something could detect whether/which language files are incomplete, and maybe also enforce what you decide about whether null keys are allowed?

@vdeshpande can you undo the changes in everything except modal-dialog.js and en.json?

[vdeshpande]

@gkatsev Changes undone , done!

[OwenEdwards]

@mister-ben maybe this tool could be part of the automated checking/maintaining translations? https://github.com/edenspiekermann/translations. @gkatsev should I open a separate issue on "translations maintenance"? Seems like we could add some guidance in CONTRIBUTING.md?

[misteroneill]

I think this would be better like this:

close = this.addChild('closeButton', {controlText: 'Close Modal Dialog'});

It avoids multiple internal calls to controlText().

[misteroneill]

LGTM

@OwenEdwards I like the idea of adding some translations maintenance to the CONTRIBUTING.md file.

[gkatsev]

yeah, CONTRIBUTING.md needs to be rewritten. It's probably the next thing I'm going to pick up after doing merging a bunch of stuff and making a release.