High contrast mode for subtitle editor #841

narickmann · 2022-10-21T07:55:04Z

subtitle view now has a working high contrast mode
added some new color-attributes (subtitle_segment_bg, subtitle_segment_border and subtitle_segment_text)
colors for subtitle elements adjusted (bg-color, text-color, border-color etc)

- subtitle view now has a working high contrast mode - added some new color-attributes (subtitle_segment_bg, subtitle_segment_border and subtitle_segment_text) - colors for subtitle elements adjusted (bg-color, text-color, border-color etc)

github-actions · 2022-10-21T07:58:13Z

This pull request is deployed at test.editor.opencast.org/841/2022-10-21_07-55-18/ .
It might take a few minutes for it to become available.

lkiesow

The high contrast mode lowers the contrast for the subtitle editor's video selector. The label is not legible at all anymore and the border is also no longer visible, making it hard to understand that this is a dropdown menu:

In high contrast mode, the language selector is literally black on black and you have to mark the text to read it:

The borders of the segment start and end times run into each other in high contrast mode. There should be at least a bit of margin between these fields:

- Added margin as suggested. Margin only applies in high contrast mode

github-actions · 2022-11-08T14:07:25Z

This pull request is deployed at test.editor.opencast.org/841/2022-11-08_14-04-14/ .
It might take a few minutes for it to become available.

Arnei

The issues above all seem to have been addressed. Got one more related to the code.

Arnei · 2022-11-14T09:50:24Z

src/main/SubtitleVideoArea.tsx

-  const muiTheme = createTheme({
-    palette: {
-      mode: isDarkPreferred === 'dark' ? 'dark' : 'light',
+  const muiStyle = makeStyles({


This is already defined in SubtitleSelect.tsx. Can we define it in cssStyles.tsx instead to avoid duplication?

…tle-editor

github-actions · 2022-11-23T18:34:18Z

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

This patch removes duplicated style for the two dropdown menus in the subtitle area. Unfortunately, I couldn't easily transfer the style to 'cssStyles.tsx' because the theme was then undefined and I couldn't work with the theme variables. That's why I split it up like the calendar and used the css selectors. I don't know if it would be worth the effort to create an extra component for these two menus (like for the tooltips) and then use that. But we could get rid of some css selectors.

github-actions · 2022-11-24T15:38:48Z

This pull request is deployed at test.editor.opencast.org/841/2022-11-24_15-36-21/ .
It might take a few minutes for it to become available.

…tle-editor Resolved conflict

github-actions · 2022-11-25T07:54:13Z

This pull request is deployed at test.editor.opencast.org/841/2022-11-25_07-51-22/ .
It might take a few minutes for it to become available.

Arnei · 2022-11-30T15:38:10Z

The hint for the dropdowns does not show if the dropdown was in focus once and then isn't anymore. Only in dark-high-contrast mode. Probably because the color matches the background-color.
Screencast_30.11.2022_16:35:26.webm
(Same for the create dropdown in the select view)

Edit: Also applies to conventional dark mode.

The background-color of the dropdown menus ("Pick a language" and "Video Flavor" in subtitle view) was accidentally transparent on both high-contrast-modes. The label is not visible after the dropdown was in focus once. This is only visible when you use a deploy link (like test.editor.opencast.org/841/2022-11-25_07-51-22/) I can't reproduce this on localhost. Removed some css selectors from index.css that belong to the label but don't seem to have any effect.

github-actions · 2022-12-01T13:53:19Z

This pull request is deployed at test.editor.opencast.org/841/2022-12-01_13-50-28/ .
It might take a few minutes for it to become available.

narickmann · 2022-12-01T15:02:20Z

Last commit didn't fixed the label-issue. Can't reproduce this on localhost (on localhost it looks "normal" for all color modes).
This is only visible when you use a deploy link.

I also noticed that the clock in the calendar (in the metadata view) looks normal via the deploy link (all color modes) but the colors are not correct via localhost (all color modes).

localhost:

Deploy-Link - https://test.editor.opencast.org/841/2022-12-01_13-50-28/ :

…tle-editor

Arnei · 2022-12-02T10:01:19Z

Seems like running the app with start or building with build results in slightly different css-classes and, more importantly for us, different css-class-names. Since we hard-code css-class-names for the MUI elements, using a class name that is only present in one of the builds will result in the rule missing from the other.

It would still be extremely great if we didn't have to rely on hard-coding values for automatically generated class names.

Removed all hardcoded CSS class names from index.css and added the style for the two dropdown menus in subtitle view in cssStyles.tsx. Did the same for the calendar and clock in metadata view. Now both styles are separated. They should no longer affect each other due to the same CSS class names.

github-actions · 2022-12-08T09:09:48Z

This pull request is deployed at test.editor.opencast.org/841/2022-12-08_09-07-25/ .
It might take a few minutes for it to become available.

Arnei · 2022-12-09T09:11:03Z

Somewhat nitpicky, but in regarding the clock view in the calendar: In light high contrast mode, for the arrows to switch between hours and minutes, the contrast is not very high (they are black when you can't click them, and dark blue when you can).

Looks good otherwise. Very happy you managed to get rid of the hard-coded class names.

Made the color a little lighter. It should now be more obvious if/that the arrow is disabled.

github-actions · 2022-12-09T13:50:14Z

This pull request is deployed at test.editor.opencast.org/841/2022-12-09_13-47-19/ .
It might take a few minutes for it to become available.

Arnei · 2022-12-09T14:57:30Z

Eh, good enough for me. Gonna wait a bit with merging to see if anyone else wants to take a look at this, but I'd say this overdue for merging.

High contrast mode for subtitle editor

9d9cf8e

- subtitle view now has a working high contrast mode - added some new color-attributes (subtitle_segment_bg, subtitle_segment_border and subtitle_segment_text) - colors for subtitle elements adjusted (bg-color, text-color, border-color etc)

narickmann added the type:accessibility This would help impaired users label Oct 21, 2022

lkiesow requested changes Oct 28, 2022

View reviewed changes

ziegenberg mentioned this pull request Oct 28, 2022

Language selector has poor contrast #859

Closed

Fixed borders of the segment start and end times

ea5bb55

- Added margin as suggested. Margin only applies in high contrast mode

Arnei requested changes Nov 14, 2022

View reviewed changes

Merge remote-tracking branch 'upstream/main' into high-contrast-subti…

ced8238

…tle-editor

github-actions bot added the status:conflicts Conflicts with another pull request or issue label Nov 23, 2022

Merge remote-tracking branch 'upstream/main' into high-contrast-subti…

8740bef

…tle-editor Resolved conflict

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label Nov 25, 2022

Remove unused variables

581072c

Merge remote-tracking branch 'upstream/main' into high-contrast-subti…

9bf546f

…tle-editor

Fix contrast of disabled arrow for high contrast light mode

11de083

Made the color a little lighter. It should now be more obvious if/that the arrow is disabled.

Arnei approved these changes Dec 9, 2022

View reviewed changes

Arnei merged commit 5bb6672 into opencast:main Dec 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

High contrast mode for subtitle editor #841

High contrast mode for subtitle editor #841

narickmann commented Oct 21, 2022

github-actions bot commented Oct 21, 2022

lkiesow left a comment •

edited

Loading

github-actions bot commented Nov 8, 2022

Arnei left a comment

Arnei Nov 14, 2022

github-actions bot commented Nov 23, 2022

github-actions bot commented Nov 24, 2022

github-actions bot commented Nov 25, 2022

Arnei commented Nov 30, 2022 •

edited

Loading

github-actions bot commented Dec 1, 2022

narickmann commented Dec 1, 2022

Arnei commented Dec 2, 2022

github-actions bot commented Dec 8, 2022

Arnei commented Dec 9, 2022

github-actions bot commented Dec 9, 2022

Arnei commented Dec 9, 2022 •

edited

Loading

High contrast mode for subtitle editor #841

High contrast mode for subtitle editor #841

Conversation

narickmann commented Oct 21, 2022

github-actions bot commented Oct 21, 2022

lkiesow left a comment • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Nov 8, 2022

Arnei left a comment

Choose a reason for hiding this comment

Arnei Nov 14, 2022

Choose a reason for hiding this comment

github-actions bot commented Nov 23, 2022

github-actions bot commented Nov 24, 2022

github-actions bot commented Nov 25, 2022

Arnei commented Nov 30, 2022 • edited Loading

github-actions bot commented Dec 1, 2022

narickmann commented Dec 1, 2022

Arnei commented Dec 2, 2022

github-actions bot commented Dec 8, 2022

Arnei commented Dec 9, 2022

github-actions bot commented Dec 9, 2022

Arnei commented Dec 9, 2022 • edited Loading

lkiesow left a comment •

edited

Loading

Arnei commented Nov 30, 2022 •

edited

Loading

Arnei commented Dec 9, 2022 •

edited

Loading