mirror of
https://github.com/videojs/video.js.git
synced 2024-12-25 02:42:10 +02:00
feat: fix accessibility of the captions setting dialog (#4050)
This fixes a lot of the issues from #2746 by making the dialog inherit from our actual ModalDialog which now has tab focus trapping. The Captions Settings dialog has some accessibility issues: - Field labels and fields are not explicitly associated - Keyboard focus does not move into the dialog when it is opened - Keyboard focus is not trapped inside the dialog while it is open - Keyboard focus does not return to the control which opened the dialog when it is closed - The extent (top and bottom) of the dialog is not indicated to screen readers - The dialog cannot be closed with the Esc key - The meaning of '---' in the select fields is not clear - The control to close the dialog is labeled "Done" rather than "Close" - The purpose of the "Defaults" button may not be obvious, and its effect may not be apparent to screen reader users - Focus highlighting (outline) on the Default and Done buttons is *very* hard to see - Pressing the Done button doesn’t seem to have the same effect as pressing the Close (x) button; does it trigger the same focus movement - This requirement to move it back to the triggering element is tricky, since clicking on that item in the CC menu dismisses the CC menu. I need to think about this a little more - either the menu should open again, or the focus should go to the main CC Menu Button - The focus outline on the whole dialog goes too far to the left (all the way to the edge of the video window, not just to the edge of the dialog) Fixes #2746.
This commit is contained in:
Gary Katsevman
GitHub
parent
181a19f5fd
commit
0d0dea4da8
@ -9,7 +9,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
<!-- START langtable -->
|
||||
| Language file | Missing translations |
|
||||
| ----------------------- | ----------------------------------------------------------------------------------- |
|
||||
| ar.json (missing 47) | Audio Player |
|
||||
| ar.json (missing 49) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -21,7 +21,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Close Modal Dialog |
|
||||
| | , opens descriptions settings dialog |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -52,11 +52,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| ba.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| ba.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -76,7 +78,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -107,11 +109,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| bg.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| bg.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -131,7 +135,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -162,11 +166,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| ca.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| ca.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -186,7 +192,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -217,11 +223,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| cs.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| cs.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -241,7 +249,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -272,11 +280,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| da.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| da.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -296,7 +306,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -327,21 +337,26 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| de.json (missing 4) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| de.json (missing 7) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Progress Bar |
|
||||
| | Volume Level |
|
||||
| el.json (missing 41) | Audio Player |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | End of dialog window. |
|
||||
| el.json (missing 43) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
| | Volume Level |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -372,11 +387,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| es.json (missing 54) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| es.json (missing 56) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -395,7 +412,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -426,11 +443,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| fa.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| fa.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -450,7 +469,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -481,11 +500,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| fi.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| fi.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -505,7 +526,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -536,12 +557,17 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| fr.json (Complete) | |
|
||||
| hr.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| fr.json (missing 4) | subtitles settings |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | End of dialog window. |
|
||||
| hr.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -561,7 +587,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -592,11 +618,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| hu.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| hu.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -616,7 +644,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -647,11 +675,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| it.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| it.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -671,7 +701,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -702,11 +732,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| ja.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| ja.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -726,7 +758,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -757,11 +789,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| ko.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| ko.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -781,7 +815,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -812,11 +846,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| nb.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| nb.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -836,7 +872,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -867,11 +903,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| nl.json (missing 44) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| nl.json (missing 46) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -880,7 +918,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | The media is encrypted and we do not have the keys to decrypt it. |
|
||||
| | Close Modal Dialog |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -911,11 +949,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| nn.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| nn.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -935,7 +975,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -966,11 +1006,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| pl.json (missing 48) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| pl.json (missing 50) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -983,7 +1025,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Close Modal Dialog |
|
||||
| | , opens descriptions settings dialog |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -1014,11 +1056,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| pt-BR.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| pt-BR.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -1038,7 +1082,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -1069,16 +1113,18 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| pt-PT.json (missing 40) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| pt-PT.json (missing 42) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Progress Bar |
|
||||
| | Volume Level |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -1109,17 +1155,19 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| ru.json (missing 41) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| ru.json (missing 43) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
| | Volume Level |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -1150,11 +1198,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| sr.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| sr.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -1174,7 +1224,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -1205,11 +1255,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| sv.json (missing 55) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| sv.json (missing 57) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -1229,7 +1281,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -1260,21 +1312,26 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| tr.json (missing 4) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| tr.json (missing 7) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Progress Bar |
|
||||
| | Volume Level |
|
||||
| uk.json (missing 41) | Audio Player |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | End of dialog window. |
|
||||
| uk.json (missing 43) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
| | Volume Level |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -1305,16 +1362,18 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| vi.json (missing 40) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| vi.json (missing 42) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Progress Bar |
|
||||
| | Volume Level |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -1345,11 +1404,13 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| zh-CN.json (missing 54) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| zh-CN.json (missing 56) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
@ -1368,7 +1429,7 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | , opens descriptions settings dialog |
|
||||
| | , selected |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -1399,17 +1460,19 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| zh-TW.json (missing 41) | Audio Player |
|
||||
| | End of dialog window. |
|
||||
| zh-TW.json (missing 43) | Audio Player |
|
||||
| | Video Player |
|
||||
| | Replay |
|
||||
| | Progress Bar |
|
||||
| | Volume Level |
|
||||
| | captions settings |
|
||||
| | subititles settings |
|
||||
| | subtitles settings |
|
||||
| | descriptions settings |
|
||||
| | Text |
|
||||
| | White |
|
||||
@ -1440,8 +1503,10 @@ If you add or update a translation run `grunt check-translations` to update the
|
||||
| | Casual |
|
||||
| | Script |
|
||||
| | Small Caps |
|
||||
| | Defaults |
|
||||
| | Reset |
|
||||
| | all settings to the default values |
|
||||
| | Done |
|
||||
| | Caption Settings Dialog |
|
||||
| | Beginning of dialog window. Escape will cancel and close the window. |
|
||||
| | End of dialog window. |
|
||||
<!-- END langtable -->
|
||||
|
||||
@ -70,7 +70,6 @@
|
||||
"Casual": "Zwanglos",
|
||||
"Script": "Schreibeschrift",
|
||||
"Small Caps": "Small-Caps",
|
||||
"Defaults": "Standardeinstellungen",
|
||||
"Done": "Fertig",
|
||||
"Caption Settings Dialog": "Einstellungsdialog für Untertitel",
|
||||
"Beginning of dialog window. Escape will cancel and close the window.": "Anfang des Dialogfensters. Esc bricht ab und schließt das Fenster."
|
||||
|
||||
@ -74,8 +74,10 @@
|
||||
"Casual": "Casual",
|
||||
"Script": "Script",
|
||||
"Small Caps": "Small Caps",
|
||||
"Defaults": "Defaults",
|
||||
"Reset": "Reset",
|
||||
"all settings to the default values": "all settings to the default values",
|
||||
"Done": "Done",
|
||||
"Caption Settings Dialog": "Caption Settings Dialog",
|
||||
"Beginning of dialog window. Escape will cancel and close the window.": "Beginning of dialog window. Escape will cancel and close the window."
|
||||
"Beginning of dialog window. Escape will cancel and close the window.": "Beginning of dialog window. Escape will cancel and close the window.",
|
||||
"End of dialog window.": "End of dialog window."
|
||||
}
|
||||
|
||||
@ -75,7 +75,6 @@
|
||||
"Casual": "Manuscrite",
|
||||
"Script": "Scripte",
|
||||
"Small Caps": "Petites capitales",
|
||||
"Defaults": "Valeurs par défaut",
|
||||
"Done": "Terminé",
|
||||
"Caption Settings Dialog": "Boîte de dialogue des paramètres des sous-titres transcrits",
|
||||
"Beginning of dialog window. Escape will cancel and close the window.": "Début de la fenêtre de dialogue. La touche d'échappement annulera et fermera la fenêtre."
|
||||
|
||||
@ -70,7 +70,6 @@
|
||||
"Casual": "Gündelik",
|
||||
"Script": "El Yazısı",
|
||||
"Small Caps": "Küçük Boyutlu Büyük Harfli",
|
||||
"Defaults": "Varsayılan Ayarlar",
|
||||
"Done": "Tamam",
|
||||
"Caption Settings Dialog": "Altyazı Ayarları Menüsü",
|
||||
"Beginning of dialog window. Escape will cancel and close the window.": "Diyalog penceresinin başlangıcı. ESC tuşu işlemi iptal edip pencereyi kapatacaktır."
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
.vjs-caption-settings {
|
||||
.vjs-modal-dialog.vjs-text-track-settings {
|
||||
position: relative;
|
||||
top: 1em;
|
||||
background-color: $primary-background-color;
|
||||
@ -6,14 +6,13 @@
|
||||
color: $primary-foreground-color;
|
||||
margin: 0 auto;
|
||||
padding: 0.5em;
|
||||
height: 16em;
|
||||
font-size: 12px;
|
||||
width: 40em;
|
||||
height: 22em;
|
||||
width: 48em;
|
||||
}
|
||||
|
||||
.vjs-caption-settings .vjs-tracksettings {
|
||||
top: 0;
|
||||
bottom: 1em;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
@ -36,6 +35,29 @@
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
.vjs-tracksettings-controls button:focus,
|
||||
.vjs-tracksettings-controls button:active {
|
||||
outline-style: solid;
|
||||
outline-width: medium;
|
||||
background-image: linear-gradient(0deg, $primary-foreground-color 88%, $secondary-background-color 100%);
|
||||
}
|
||||
|
||||
.vjs-tracksettings-controls button:hover {
|
||||
color: rgba(#2B333F, 0.75);
|
||||
}
|
||||
|
||||
.vjs-tracksettings-controls button {
|
||||
background-color: $primary-foreground-color;
|
||||
background-image: linear-gradient(-180deg, $primary-foreground-color 88%, $secondary-background-color 100%);
|
||||
color: #2B333F;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.vjs-tracksettings-controls .vjs-default-button {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.vjs-caption-settings .vjs-tracksetting {
|
||||
margin: 5px;
|
||||
padding: 3px;
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
@import "components/big-play";
|
||||
@import "components/button";
|
||||
@import "components/close-button";
|
||||
@import "components/modal-dialog";
|
||||
|
||||
@import "components/menu/menu";
|
||||
@import "components/menu/menu-popup";
|
||||
@ -38,6 +39,5 @@
|
||||
@import "components/audio";
|
||||
@import "components/adaptive";
|
||||
@import "components/captions-settings";
|
||||
@import "components/modal-dialog";
|
||||
|
||||
@import "print";
|
||||
|
||||
@ -50,8 +50,7 @@ class CaptionSettingsMenuItem extends TextTrackMenuItem {
|
||||
* @listens click
|
||||
*/
|
||||
handleClick(event) {
|
||||
this.player().getChild('textTrackSettings').show();
|
||||
this.player().getChild('textTrackSettings').el_.focus();
|
||||
this.player().getChild('textTrackSettings').open();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -70,7 +70,7 @@ class ModalDialog extends Component {
|
||||
});
|
||||
|
||||
this.descEl_ = Dom.createEl('p', {
|
||||
className: `${MODAL_CLASS_NAME}-description vjs-offscreen`,
|
||||
className: `${MODAL_CLASS_NAME}-description vjs-control-text`,
|
||||
id: this.el().getAttribute('aria-describedby')
|
||||
});
|
||||
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
* @file text-track-settings.js
|
||||
*/
|
||||
import window from 'global/window';
|
||||
import document from 'global/document';
|
||||
import Component from '../component';
|
||||
import ModalDialog from '../modal-dialog';
|
||||
import {createEl} from '../utils/dom';
|
||||
import * as Fn from '../utils/fn';
|
||||
import * as Obj from '../utils/obj';
|
||||
@ -236,9 +238,9 @@ function setSelectedOption(el, value, parser) {
|
||||
/**
|
||||
* Manipulate Text Tracks settings.
|
||||
*
|
||||
* @extends Component
|
||||
* @extends ModalDialog
|
||||
*/
|
||||
class TextTrackSettings extends Component {
|
||||
class TextTrackSettings extends ModalDialog {
|
||||
|
||||
/**
|
||||
* Creates an instance of this class.
|
||||
@ -250,12 +252,26 @@ class TextTrackSettings extends Component {
|
||||
* The key/value store of player options.
|
||||
*/
|
||||
constructor(player, options) {
|
||||
options.temporary = false;
|
||||
|
||||
super(player, options);
|
||||
this.setDefaults();
|
||||
this.hide();
|
||||
|
||||
this.contentEl().className += ' vjs-caption-settings';
|
||||
|
||||
this.updateDisplay = Fn.bind(this, this.updateDisplay);
|
||||
|
||||
// fill the modal and pretend we have opened it
|
||||
this.fill();
|
||||
this.hasBeenOpened_ = this.hasBeenFilled_ = true;
|
||||
|
||||
this.endDialog = createEl('p', {
|
||||
className: 'vjs-control-text',
|
||||
textContent: this.localize('End of dialog window.')
|
||||
});
|
||||
this.el().appendChild(this.endDialog);
|
||||
|
||||
this.setDefaults();
|
||||
|
||||
// Grab `persistTextTrackSettings` from the player options if not passed in child options
|
||||
if (options.persistTextTrackSettings === undefined) {
|
||||
this.options_.persistTextTrackSettings = this.options_.playerOptions.persistTextTrackSettings;
|
||||
@ -263,7 +279,7 @@ class TextTrackSettings extends Component {
|
||||
|
||||
this.on(this.$('.vjs-done-button'), 'click', () => {
|
||||
this.saveSettings();
|
||||
this.hide();
|
||||
this.close();
|
||||
});
|
||||
|
||||
this.on(this.$('.vjs-default-button'), 'click', () => {
|
||||
@ -290,21 +306,28 @@ class TextTrackSettings extends Component {
|
||||
* The DOM element that gets created.
|
||||
* @private
|
||||
*/
|
||||
createElSelect_(key) {
|
||||
createElSelect_(key, legendId = '') {
|
||||
const config = selectConfigs[key];
|
||||
const id = config.id.replace('%s', this.id_);
|
||||
|
||||
return [
|
||||
createEl('label', {
|
||||
id,
|
||||
className: 'vjs-label',
|
||||
textContent: this.localize(config.label)
|
||||
}, {
|
||||
for: id
|
||||
}),
|
||||
createEl('select', {id}, undefined, config.options.map(o => {
|
||||
createEl('select', {}, {
|
||||
'aria-labelledby': `${legendId} ${id}`
|
||||
}, config.options.map(o => {
|
||||
const optionId = id + '-' + o[1];
|
||||
|
||||
return createEl('option', {
|
||||
id: optionId,
|
||||
textContent: this.localize(o[1]),
|
||||
value: o[0]
|
||||
}, {
|
||||
'aria-labelledby': `${legendId} ${id} ${optionId}`
|
||||
});
|
||||
}))
|
||||
];
|
||||
@ -320,14 +343,15 @@ class TextTrackSettings extends Component {
|
||||
*/
|
||||
createElFgColor_() {
|
||||
const legend = createEl('legend', {
|
||||
id: `captions-text-legend-${this.id_}`,
|
||||
textContent: this.localize('Text')
|
||||
});
|
||||
|
||||
const select = this.createElSelect_('color');
|
||||
const select = this.createElSelect_('color', legend.id);
|
||||
|
||||
const opacity = createEl('span', {
|
||||
className: 'vjs-text-opacity vjs-opacity'
|
||||
}, undefined, this.createElSelect_('textOpacity'));
|
||||
}, undefined, this.createElSelect_('textOpacity', legend.id));
|
||||
|
||||
return createEl('fieldset', {
|
||||
className: 'vjs-fg-color vjs-tracksetting'
|
||||
@ -344,14 +368,15 @@ class TextTrackSettings extends Component {
|
||||
*/
|
||||
createElBgColor_() {
|
||||
const legend = createEl('legend', {
|
||||
id: `captions-background-${this.id_}`,
|
||||
textContent: this.localize('Background')
|
||||
});
|
||||
|
||||
const select = this.createElSelect_('backgroundColor');
|
||||
const select = this.createElSelect_('backgroundColor', legend.id);
|
||||
|
||||
const opacity = createEl('span', {
|
||||
className: 'vjs-bg-opacity vjs-opacity'
|
||||
}, undefined, this.createElSelect_('backgroundOpacity'));
|
||||
}, undefined, this.createElSelect_('backgroundOpacity', legend.id));
|
||||
|
||||
return createEl('fieldset', {
|
||||
className: 'vjs-bg-color vjs-tracksetting'
|
||||
@ -368,14 +393,15 @@ class TextTrackSettings extends Component {
|
||||
*/
|
||||
createElWinColor_() {
|
||||
const legend = createEl('legend', {
|
||||
id: `captions-window-${this.id_}`,
|
||||
textContent: this.localize('Window')
|
||||
});
|
||||
|
||||
const select = this.createElSelect_('windowColor');
|
||||
const select = this.createElSelect_('windowColor', legend.id);
|
||||
|
||||
const opacity = createEl('span', {
|
||||
className: 'vjs-window-opacity vjs-opacity'
|
||||
}, undefined, this.createElSelect_('windowOpacity'));
|
||||
}, undefined, this.createElSelect_('windowOpacity', legend.id));
|
||||
|
||||
return createEl('fieldset', {
|
||||
className: 'vjs-window-color vjs-tracksetting'
|
||||
@ -435,9 +461,11 @@ class TextTrackSettings extends Component {
|
||||
* @private
|
||||
*/
|
||||
createElControls_() {
|
||||
const defaultsDescription = this.localize('restore all settings to the default values');
|
||||
const defaultsButton = createEl('button', {
|
||||
className: 'vjs-default-button',
|
||||
textContent: this.localize('Defaults')
|
||||
title: defaultsDescription,
|
||||
innerHTML: `${this.localize('Reset')}<span class='vjs-control-text'> ${defaultsDescription}</span>`
|
||||
});
|
||||
|
||||
const doneButton = createEl('button', {
|
||||
@ -457,6 +485,10 @@ class TextTrackSettings extends Component {
|
||||
* The element that was created.
|
||||
*/
|
||||
createEl() {
|
||||
return super.createEl();
|
||||
}
|
||||
|
||||
content() {
|
||||
const settings = createEl('div', {
|
||||
className: 'vjs-tracksettings'
|
||||
}, undefined, [
|
||||
@ -465,33 +497,19 @@ class TextTrackSettings extends Component {
|
||||
this.createElControls_()
|
||||
]);
|
||||
|
||||
const heading = createEl('div', {
|
||||
className: 'vjs-control-text',
|
||||
id: `TTsettingsDialogLabel-${this.id_}`,
|
||||
textContent: this.localize('Caption Settings Dialog')
|
||||
}, {
|
||||
'aria-level': '1',
|
||||
'role': 'heading'
|
||||
});
|
||||
return settings;
|
||||
}
|
||||
|
||||
const description = createEl('div', {
|
||||
className: 'vjs-control-text',
|
||||
id: `TTsettingsDialogDescription-${this.id_}`,
|
||||
textContent: this.localize('Beginning of dialog window. Escape will cancel and close the window.')
|
||||
});
|
||||
label() {
|
||||
return this.localize('Caption Settings Dialog');
|
||||
}
|
||||
|
||||
const doc = createEl('div', undefined, {
|
||||
role: 'document'
|
||||
}, [heading, description, settings]);
|
||||
description() {
|
||||
return this.localize('Beginning of dialog window. Escape will cancel and close the window.');
|
||||
}
|
||||
|
||||
return createEl('div', {
|
||||
className: 'vjs-caption-settings vjs-modal-overlay',
|
||||
tabIndex: -1
|
||||
}, {
|
||||
'role': 'dialog',
|
||||
'aria-labelledby': heading.id,
|
||||
'aria-describedby': description.id
|
||||
}, doc);
|
||||
buildCSSClass() {
|
||||
return super.buildCSSClass() + ' vjs-text-track-settings';
|
||||
}
|
||||
|
||||
/**
|
||||
@ -525,7 +543,7 @@ class TextTrackSettings extends Component {
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets all <select> elements to their default values.
|
||||
* Sets all `<select>` elements to their default values.
|
||||
*/
|
||||
setDefaults() {
|
||||
Obj.each(selectConfigs, (config) => {
|
||||
@ -584,6 +602,23 @@ class TextTrackSettings extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* conditionally blur the element and refocus the captions button
|
||||
*
|
||||
* @private
|
||||
*/
|
||||
conditionalBlur_() {
|
||||
this.previouslyActiveEl_ = null;
|
||||
this.off(document, 'keydown', this.handleKeyDown);
|
||||
|
||||
const cb = this.player_.controlBar;
|
||||
const ccBtn = cb && cb.captionsButton;
|
||||
|
||||
if (ccBtn) {
|
||||
ccBtn.focus();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Component.registerComponent('TextTrackSettings', TextTrackSettings);
|
||||
|
||||
@ -126,7 +126,7 @@ QUnit.test('should create the expected description element', function(assert) {
|
||||
innerHTML: this.modal.description(),
|
||||
classes: [
|
||||
'vjs-modal-dialog-description',
|
||||
'vjs-offscreen'
|
||||
'vjs-control-text'
|
||||
],
|
||||
attrs: {
|
||||
id: this.el.getAttribute('aria-describedby')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user