[DONE] A11y for 3.3.x (#887)

* CSS: prevent default thumbnail to be too small on some screens
+ force long video titles to wrap on  a second line

* Improve some contrast colors
+ some cleanup on podfile folder list template

* * remove useless "collapse hide" class combination (.collapse is already hide if not show)
* replace wrong aria-expanded="true" by aria-expanded="false"
* move wrongly place title attribute

* add missing "lang" attribute
+ auto wrap footer links on small screens

* prune a lot of useless code in podfile.css
+ fix some a11y pb

* replace podfile loader by pod main loader

pod/bbb/templates/bbb/live_publish_meeting.html

@@ -55,7 +55,7 @@ <h3>{% trans "Are you sure you want to perform a BigBlueButton live?" %}</h3>
  {% endif %}
  {% for field in form.visible_fields %}
  {% spaceless %}
- <div class="{% if "description_" in field.name or "title_" in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
+ <div class="{% if "description_" in field.name or "title_" in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
  <div class="list-group-item">
  <div class="{% if field.name == "owners" or field.name == "users" %}form-row {% endif %}form-group {% if field.field.required %}form-group-required {% endif %}" >
  {{ field.errors }}

pod/bbb/templates/bbb/publish_meeting.html

@@ -47,7 +47,7 @@ <h3>{% trans "Are you sure you want to publish this BigBlueButton presentation?"
  {% endif %}
  {% for field in form.visible_fields %}
  {% spaceless %}
- <div class="{% if "description_" in field.name or "title_" in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
+ <div class="{% if "description_" in field.name or "title_" in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
  <div class="list-group-item">
  <div class="{% if field.name == "owners" or field.name == "users" %}form-row {% endif %}form-group {% if field.field.required %}form-group-required {% endif %}" >
  {{ field.errors }}

pod/chapter/templates/video_chapter.html

@@ -64,10 +64,10 @@ <h2 class="card-header card-title pod-card__title h4"><i class="bi bi-gear"></i>
 {% endif %}
 <div id="chapter-info" class="card">
  <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
- <button class="btn rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="true" aria-controls="collapse-0">
+ <button class="btn rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="false" aria-controls="collapse-0">
  {% trans 'Chapters' %}
  </button>
- <div id="collapse-0" class="card-body collapse hide card-text small">
+ <div id="collapse-0" class="card-body collapse card-text small">
  <p>{% trans '"Add a new chapter" allows you to add a new chapter, "modify" allows you to modify it and "delete" allows you to remove the chapter.' %}</p>
  <p>{% trans 'Start playback of the video, pause the video and click on "Get time from the player" to fill in the field untitled "Start time".' %}</p>
  <p>{% trans 'The chapters cannot start at the same time.' %}</p>

pod/completion/templates/video_completion.html

@@ -58,17 +58,20 @@
  </span>
  &nbsp;
  <div class="breadcrumb">
- <p><a class="btn btn-secondary" href="{% url 'video:completion:video_caption_maker' slug=video.slug %}" title="{% trans 'to create your subtitles and/or caption(s) files' %}">{% trans 'Video Caption Maker' %}</a></p>
+ <p>
+ <a class="btn btn-secondary" href="{% url 'video:completion:video_caption_maker' slug=video.slug %}">{% trans 'Video Caption Maker' %}</a>
+ <span class="form-text">{% trans 'To create your subtitles and/or caption(s) files' %}</span>
+ </p>
  <span id="form_track">
  {% if form_track %}
- {% include 'track/form_track.html' with form_track=form_track %}
+  {% include 'track/form_track.html' with form_track=form_track %}
  {% endif %}
  </span>
  <form class="form_new completion" id="form_new_track" action="{% url 'video:completion:video_completion_track' slug=video.slug %}" method="POST">
  {% csrf_token %}
  <input type="hidden" name="action" value="new">
  <input type="submit" value="{% trans 'Add a new subtitle or caption file' %}" class="new_track btn btn-primary">
- <span>{% trans 'The file must be in VTT format.' %}</span>
+ <span class="form-text">{% trans 'The file must be in VTT format.' %}</span>
  </form>
  </div>
  </li>
@@ -133,19 +136,19 @@ <h2 class="card-header card-title pod-card__title h4"><i class="bi bi-gear"></i>
 {% endif %}
 <div id="contributor-info" class="card">
  <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
- <button class="btn rounded-0 pod-btn" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
+ <button class="btn rounded-0 pod-btn" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
  {% trans 'Contributor(s)' %}
  </button>
- <div id="collapse-1" class="card-body collapse hide card-text small">
+ <div id="collapse-1" class="card-body collapse card-text small">
  <p>{% trans 'List of people related to this video.' %}</p>
  <p>{% trans 'A contributor must at least have a name and a role. You can also join the email of this contributor as well as a link (professional website for example).' %}</p>
  </div>
 </div>
 <div id="track-info" class="card">
- <button class="btn rounded-0 pod-btn" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">
+ <button class="btn rounded-0 pod-btn" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
  {% trans 'Subtitle(s) and Caption(s)' %}
  </button>
- <div id="collapse-2" class="card-body collapse hide card-text small">
+ <div id="collapse-2" class="card-body collapse card-text small">
  <p>{% trans 'Subtitle(s) and/or captions(s) related to this video.' %}</p>
  <!-- <p>{% trans 'Several web sites allows you to subtitle or caption videos (for example: Amara)' %}</p> -->
  <p>{% trans 'You can add several subtitle or caption files to a signle video (for example, in order to subtitle or caption this video in several languages' %}</p>
@@ -163,19 +166,19 @@ <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
  </div>
 </div>
 <div id="document-info" class="card">
- <button class="btn rounded-0 pod-btn" id="heading-3" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="true" aria-controls="collapse-3">
+ <button class="btn rounded-0 pod-btn" id="heading-3" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
  {% trans 'Additional resource(s)' %}
  </button>
- <div id="collapse-3" class="card-body collapse hide card-text small">
+ <div id="collapse-3" class="card-body collapse card-text small">
  <p>{% trans 'Document(s) related to this video. These documents will be downloadable by users.' %}</p>
  <p>{% trans 'Be careful, not to be confused with enrichment. These documents are attached to the video, not integrated.' %}</p>
  </div>
 </div>
 <div id="overlay-info" class="card">
- <button class="btn rounded-0 pod-btn" id="heading-4" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="true" aria-controls="collapse-4">
+ <button class="btn rounded-0 pod-btn" id="heading-4" data-bs-toggle="collapse" data-bs-target="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
  {% trans 'Overlay(s)' %}
  </button>
- <div id="collapse-4" class="card-body collapse hide card-text small">
+ <div id="collapse-4" class="card-body collapse card-text small">
  <p>{% trans 'Overlay allows you to display text (with ou without html tag) over the video at specific times and positions.' %}</p>
  <p>{% trans 'You can add a solid background or a transparent background to the text you want to display with the option "Show background"' %}</p>
  </div>

pod/cut/templates/video_cut.html

@@ -112,10 +112,10 @@ <h2 class="card-header card-title pod-card__title h4"><i class="bi bi-gear"></i>
  {% endif %}
  <div id="cut-info" class="card">
  <h2 class="card-header card-title pod-card__title h4">{% trans "Help"%}</h2>
- <button class="btn rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="true" aria-controls="collapse-0">
+ <button class="btn rounded-0 pod-btn" id="heading-0" data-bs-toggle="collapse" data-bs-target="#collapse-0" aria-expanded="false" aria-controls="collapse-0">
  {% trans 'Cut' %}
  </button>
- <div id="collapse-0" class="card-body collapse hide card-text small">
+ <div id="collapse-0" class="card-body collapse card-text small">
  <p>{% trans 'The video cut allows you to set a start and an end to trim your video.' %}</p>
  <p>{% trans 'Your original video is kept and you can therefore modify your changes at any time.' %}</p>
  <p>{% trans 'When saving your cut, an encoding is restarted to replace the old one.' %}</p>

pod/enrichment/templates/enrichment/group_enrichment.html

@@ -39,7 +39,7 @@ <h3>{% trans "Editing group for the enrichment of the video" %} "{{video.title}}
  {% endfor %}
  {% for field in form.visible_fields %}
  {% spaceless %}
- <div class="{% if "description_" in field.name or "title_" in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
+ <div class="{% if "description_" in field.name or "title_" in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
  <div class="list-group-item">
  <div class="{% if field.name == "groups"%}form-row {% endif %}form-group {% if field.field.required %}form-group-required{% endif %}">
  {{ field.errors }}

pod/import_video/templates/import_video/add_or_edit.html

@@ -187,28 +187,28 @@ <h2 class="card-header card-title pod-card__title h4">{% trans "Terms of Service
  <p>{% trans "It is necessary to respect the terms of use of the various services before being able to upload a video from their site to this platform." %}</p>
 
  <div class="card">
- <button class="btn btn-link" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
+ <button class="btn btn-link" id="heading-1" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
  {% trans "Big Blue Button" %}
  </button>
- <div id="collapse-1" class="card-body collapse hide card-text small" aria-labelledby="heading-1" data-bs-parent="#formfields">
+ <div id="collapse-1" class="card-body collapse card-text small" aria-labelledby="heading-1" data-bs-parent="#formfields">
  <p><a href="https://docs.bigbluebutton.org/support/faq/" target="_blank">{% trans "More infomations on Big Blue Button" %}</a></p>
  </div>
  </div>
 
  <div class="card">
- <button class="btn btn-link" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="true" aria-controls="collapse-2">
+ <button class="btn btn-link" id="heading-2" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
  {% trans "PeerTube" %}
  </button>
- <div id="collapse-2" class="card-body collapse hide card-text small" aria-labelledby="heading-2" data-bs-parent="#formfields">
+ <div id="collapse-2" class="card-body collapse card-text small" aria-labelledby="heading-2" data-bs-parent="#formfields">
  <p><a href="https://joinpeertube.org/fr/faq" target="_blank">{% trans "More infomations on PeerTube" %}</a></p>
  </div>
  </div>
 
  <div class="card">
- <button class="btn btn-link" id="heading-3" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="true" aria-controls="collapse-3">
+ <button class="btn btn-link" id="heading-3" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
  {% trans "YouTube" %}
  </button>
- <div id="collapse-3" class="card-body collapse hide card-text small" aria-labelledby="heading-3" data-bs-parent="#formfields">
+ <div id="collapse-3" class="card-body collapse card-text small" aria-labelledby="heading-3" data-bs-parent="#formfields">
  <p>{% trans "Their terms of service state that you are not allowed to download any content unless permitted by YouTube or the person who owns the copyright to the content." %}</p>
  <p><a href="https://www.youtube.com/t/terms#e8b39011d8" target="_blank">{% trans "YouTube's Terms of Service" %}</a></p>
  </div>

pod/live/templates/live/event_immediate_edit.html

@@ -51,7 +51,7 @@
  {% endfor %}
  {% for field in form.visible_fields %}
  {% spaceless %}
- <div class="{% if "description_" in field.name or "title_" in field.name %}collapse hide{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
+ <div class="{% if "description_" in field.name or "title_" in field.name %}collapse{% else %}{% endif %}{% if "description_" in field.name %} description{% endif %}{% if "title_" in field.name %} title{% endif %}">
  <div class="list-group-item">
  <div class="{% if field.name == "owners" or field.name == "users" %}form-row {% endif %}form-group {% if field.field.required %}form-group-required {% endif %}">
  {{ field.errors }}

pod/main/static/css/dark.css

@@ -123,10 +123,10 @@
  border-color: var(--pod-background);
 }
 
-[data-theme="dark"] .navbar-nav .nav-link:focus,
+/*[data-theme="dark"] .navbar-nav .nav-link:focus,
 [data-theme="dark"] .navbar-nav .nav-link:hover {
  color: var(--pod-activelink-color);
-}
+}*/
 
 [data-theme="dark"] .btn-link.disabled,
 [data-theme="dark"] .dropdown-item,
@@ -145,11 +145,11 @@
  color: inherit;
 }*/
 
-[data-theme="dark"] .btn-link:focus,
+/*[data-theme="dark"] .btn-link:focus,
 [data-theme="dark"] .btn-link:active,
 [data-theme="dark"] .btn-link:hover {
  color: var(--pod-activelink-color);
-}
+}*/
 
 [data-theme="dark"] .btn-light {
  background-color: var(--bs-dark);

pod/main/static/css/pod.css

@@ -77,6 +77,10 @@
  --bs-link-color-rgb: var(--pod-link-color-rgb);
  --bs-link-hover-color: var(--pod-activelink-color);
  --bs-card-color: var(--pod-font-color);
+ /* better contrast on sidebar background */
+ --bs-danger: #DC2028;
+ /* better contrasts */
+ --bs-border-color: #8E969D;
 
  /* Use system font (faster load) */
  --font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Verdana, sans-serif;
@@ -122,8 +126,8 @@
 .navbar-toggler:focus,
 .navbar-toggler:hover {
  transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
- color: var(--pod-primary);
- border-color: var(--pod-primary);
+ color: var(--bs-link-color);
+ border-color: var(--bs-link-color);
 }
 
 .navbar-light .navbar-brand:focus,
@@ -502,10 +506,10 @@ tr,
  padding: .25rem .5rem;
 }*/
 
-button.nav-link {
+/*button.nav-link {
  background: none;
  border: none;
-}
+}*/
 
 .btn .userpicture {
  border: 1px solid transparent;
@@ -1010,14 +1014,14 @@ body {
  font-size: 12px;
 }
 
-.btn{
+/*.btn{
  --bs-btn-hover-color: #FFF;
 }
 
 .btn-link {
  --bs-btn-hover-color: var(--pod-activelink-color);
  --bs-btn-active-color: var(--pod-activelink-color);
-}
+}*/
 
 .btn-primary,
 .btn-outline-primary {
@@ -1035,6 +1039,17 @@ body {
  --bs-btn-color: var(--pod-btn-text);
 }
 
+/* dark navbars (see in "my files") */
+.bg-primary {
+ --bs-link-color: #F5F5F5;
+}
+.bg-primary .nav-link {
+ --bs-nav-link-color : var(--bs-link-color);
+}
+.bg-primary .nav-link:focus-visible {
+ box-shadow: 0 0 0 .25rem rgba(255,255,255,.5);
+}
+
 /* used in badges (# of videos in channel) */
 .text-bg-primary {
  background-color: var(--pod-primary) !important;
@@ -1055,7 +1070,7 @@ body {
 
 .pod-params-button {
  color: var(--pod-font-color);
- --bs-btn-hover-color: var(--pod-primary);
+ --bs-btn-hover-color: var(--bs-link-color);
  font-size: 1.4rem;
  display: flex;
 }
@@ -1141,14 +1156,15 @@ body {
 
 .pod-footer__credits {
  font-size: 85%;
- opacity: .8;
+ /*opacity: .8;*/
 }
 
 .pod-footer__links {
  display: flex;
  justify-content: space-around;
  gap: .5rem;
  font-weight: 600;
+ flex-wrap: wrap;
 }
 
 .pod-footer a {
@@ -1593,15 +1609,6 @@ table .alert.alert-danger.btn.pod-btn-social {
  font-size: 11px;
 }
 
-/* My Files font color fix */
-
-.navbar-brand {
- color: var(--pod-font-color) !important;
-}
-
-.navbar-brand:focus, .navbar-brand:hover {
- text-decoration: underline;
-}
 
 /* Upload page */
 

pod/main/templates/navbar.html

@@ -120,7 +120,7 @@ <h5 id="pod-navbar__menusettingsLabel">{% trans 'Configuration'%}</h5>
  <form action="/i18n/setlang/" method="post">
  {% csrf_token %}
  <input name="language" value="{{ language.code }}" type="hidden">
- <input value="{{ language.name_local }} ({{ language.code }})" class="dropdown-item" type="submit">
+ <input value="{{ language.name_local }} ({{ language.code }})" class="dropdown-item" type="submit" lang="{{ language.code }}">
  </form>
  {% endif %}
  {% endfor %}

pod/main/templates/navbar_collapse.html

@@ -28,7 +28,7 @@ <h2 class="modal-title"><i class="bi bi-play-btn"></i>&nbsp;{% blocktrans count
  {{channel.title}}</a></span>
  <span class="text-nowrap">
  {% if channel.themes.all.count > 0 %}
- <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseThemes{{channel.id}}" aria-expanded="true" aria-controls="collapseThemes{{channel.id}}">
+ <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseThemes{{channel.id}}" aria-expanded="false" aria-controls="collapseThemes{{channel.id}}">
  {% blocktrans count counter=channel.themes.all.count %}{{counter}} Theme{% plural %}{{counter}} Themes{% endblocktrans %} <i class="bi bi-chevron-down"></i>
  </button>
  {% endif %}
@@ -71,7 +71,7 @@ <h2 class="modal-title"><i class="bi bi-play-btn"></i>&nbsp;{% blocktrans count
  {{channel.title}}</a></span>
  <span class="text-nowrap">
  {% if channel.themes.all.count > 0 %}
- <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseThemes{{channel.id}}" aria-expanded="true" aria-controls="collapseThemes{{channel.id}}">
+ <button class="btn btn-link" data-bs-toggle="collapse" data-bs-target="#collapseThemes{{channel.id}}" aria-expanded="false" aria-controls="collapseThemes{{channel.id}}">
  {% blocktrans count counter=channel.themes.all.count %}{{counter}} Theme{% plural %}{{counter}} Themes{% endblocktrans %} <i class="bi bi-chevron-down" class="chevron-down m-0 p-0"></i>
  </button>
  {% endif %}

pod/meeting/static/css/meeting.css

@@ -8,7 +8,7 @@
 
 .meeting-text-copied {
  position: absolute;
- top: 50%; 
+ top: 50%;
  left: 50%;
  width: 170px;
 }
@@ -46,7 +46,7 @@
  border-radius: 50%;
  width: 50px;
  height: 50px;
- animation: recording-spin 3s linear infinite; 
+ animation: recording-spin 3s linear infinite;
 }
 
 @-webkit-keyframes recording-spin {