feat: Add a player option noUITitleAttributes to prevent title attr…

…ibutes in the UI (#7134)

Fixes #6767

docs/guides/options.md

@@ -28,8 +28,11 @@
   * [language](#language)
   * [languages](#languages)
   * [liveui](#liveui)
+  * [liveTracker.trackingThreshold](#livetrackertrackingthreshold)
+  * [liveTracker.liveTolerance](#livetrackerlivetolerance)
   * [nativeControlsForTouch](#nativecontrolsfortouch)
   * [notSupportedMessage](#notsupportedmessage)
+  * [noUITitleAttributes](#nouititleattributes)
   * [fullscreen](#fullscreen)
     * [options](#options)
   * [playbackRates](#playbackrates)
@@ -276,15 +279,13 @@ and you will not be able click the text to seek to the live edge. `liveui` will
 
 An option for the liveTracker component of the player that controls when the liveui should be shown. By default if a stream has less than 30s on the seekBar then we do not show the new liveui even with the liveui option set.
 
-
 ### `liveTracker.liveTolerance`
 
 > Type: `number`
 > Default: `15`
 
 An option for the liveTracker component of the player that controls how far from the seekable end should be considered live playback. By default anything further than 15s from the live seekable edge is considered behind live and everything else is considered live. Any user interaction to seek backwards will ignore this value as a user would expect.
 
-
 ### `nativeControlsForTouch`
 
 > Type: `boolean`
@@ -297,6 +298,13 @@ Explicitly set a default value for [the associated tech option](#nativecontrolsf
 
 Allows overriding the default message that is displayed when Video.js cannot play back a media source.
 
+### `noUITitleAttributes`
+
+> Type: `boolean`
+> Default: `false`
+
+Control whether UI elements have a `title` attribute. A `title` attribute is shown on mouse hover, which can be helpful for usability, but has drawbacks for accessibility. Setting `noUITitleAttributes` to `true` prevents the `title` attribute from being added to UI elements, allowing for more accessible tooltips to be added to controls by a plugin or external framework.
+
 ### `fullscreen`
 
 > Type: `Object`
@@ -421,9 +429,7 @@ Defines the order in which Video.js techs are preferred. By default, this means
 
 > Type: `boolean|function`
 
-Controls how double-clicking on the player/tech operates. If set to `false`, double-clicking is disabled. If undefined or set to
-`true`, double-clicking is enabled and toggles fullscreen mode. To override the default double-click handling, set `userActions.doubleClick`
-to a function which accepts a `dblclick` event:
+Controls how double-clicking on the player/tech operates. If set to `false`, double-clicking is disabled. If undefined or set to `true`, double-clicking is enabled and toggles fullscreen mode. To override the default double-click handling, set `userActions.doubleClick` to a function which accepts a `dblclick` event:
 
 ```js
 function myDoubleClickHandler(event) = {

docs/translations-needed.md

@@ -13,6 +13,7 @@ This default value is hardcoded as a default to the localize method in the SeekB
 ## Status of translations
 
 <!-- START langtable -->
+
 | Language file           | Missing translations                                                                |
 | ----------------------- | ----------------------------------------------------------------------------------- |
 | ar.json (missing 3)     | progress bar timing: currentTime={1} duration={2}                                   |
@@ -944,4 +945,5 @@ This default value is hardcoded as a default to the localize method in the SeekB
 | zh-CN.json (Complete)   |                                                                                     |
 | zh-TW.json (missing 2)  | Exit Picture-in-Picture                                                             |
 |                         | Picture-in-Picture                                                                  |
+
 <!-- END langtable -->

index.html

@@ -24,6 +24,7 @@ <h2>Navigation</h2>
     <li><a href="sandbox/language.html">Laungage Demo</a></li>
     <li><a href="sandbox/hls.html">Hls Demo</a></li>
     <li><a href="sandbox/autoplay-tests.html">Autoplay Tests</a></li>
+    <li><a href="sandbox/noUITitleAttributes.html">noUITitleAttributes Demo</a></li>
     <li><a href="sandbox/debug.html">Videojs debug build test page</a></li>
   </ul>
 

sandbox/noUITitleAttributes.html.example

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <title>Video.js without title attribute on UI controls example</title>
+
+  <!-- Load the source files -->
+  <link href="../dist/video-js.css" rel="stylesheet" type="text/css">
+  <script src="../dist/video.js"></script>
+  <script src="../node_modules/videojs-flash/dist/videojs-flash.js"></script>
+
+  <!-- Set the location of the flash SWF -->
+  <script>
+    videojs.options.flash.swf = '../node_modules/videojs-flash/node_modules/videojs-swf/dist/video-js.swf';
+  </script>
+</head>
+<body>
+  <div style="background-color:#eee; border: 1px solid #777; padding: 10px; margin-bottom: 20px; font-size: .8em; line-height: 1.5em; font-family: Verdana, sans-serif;">
+    <p>You can use /sandbox/ for writing and testing your own code. Nothing in /sandbox/ will get checked into the repo, except files that end in .example (so don't edit or add those files). To get started make a copy of index.html.example and rename it to index.html.</p>
+    <pre><b>npm start</b> will automatically copy these files over from .example if they don't already exist.</pre>
+    <pre>open http://localhost:9999/sandbox/noUITitleAttributes.html</pre>
+  </div>
+
+  <video id="vid1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
+      poster="http://vjs.zencdn.net/v/oceans.png"
+      data-setup='{"controlBar": {"volumePanel": {"inline": false}}, "noUITitleAttributes" : true}'>
+    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
+    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm">
+    <source src="http://vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
+    <track kind="captions" src="../docs/examples/shared/example-captions.vtt" srclang="en" label="English">
+    <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
+  </video>
+  <p>This demo shows the effect of setting the <strong>noUITitleAttributes</strong> option for video.js. It also includes the <strong>:focus-visible</strong> polyfill (see focus-visible.html)</p>
+  <script>
+    var vid = document.getElementById("vid1");
+    var player = videojs(vid);
+
+  </script>
+  <script src="https://unpkg.com/focus-visible"></script>
+</body>
+</html>

src/js/clickable-component.js

@@ -129,7 +129,7 @@ class ClickableComponent extends Component {
 
     this.controlText_ = text;
     Dom.textContent(this.controlTextEl_, localizedText);
-    if (!this.nonIconControl) {
+    if (!this.nonIconControl && !this.player_.options_.noUITitleAttributes) {
       // Set title attribute if only an icon is shown
       el.setAttribute('title', localizedText);
     }