From 5f59391a7437e56492eaf9a51dacdf6b946ec527 Mon Sep 17 00:00:00 2001 From: Owen Edwards Date: Tue, 23 Mar 2021 14:47:16 -0700 Subject: [PATCH] feat: Add a player option `noUITitleAttributes` to prevent title attributes in the UI (#7134) Fixes #6767 --- docs/guides/options.md | 16 ++++++--- docs/translations-needed.md | 2 ++ index.html | 1 + sandbox/noUITitleAttributes.html.example | 41 ++++++++++++++++++++++++ src/js/clickable-component.js | 2 +- 5 files changed, 56 insertions(+), 6 deletions(-) create mode 100644 sandbox/noUITitleAttributes.html.example diff --git a/docs/guides/options.md b/docs/guides/options.md index e86f80523..a9555b018 100644 --- a/docs/guides/options.md +++ b/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,7 +279,6 @@ 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` @@ -284,7 +286,6 @@ An option for the liveTracker component of the player that controls when the liv 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) = { diff --git a/docs/translations-needed.md b/docs/translations-needed.md index 3d307bd33..21a8233ce 100644 --- a/docs/translations-needed.md +++ b/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 + | 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 | + diff --git a/index.html b/index.html index 39e2143b0..a9412853b 100644 --- a/index.html +++ b/index.html @@ -24,6 +24,7 @@
  • Laungage Demo
  • Hls Demo
  • Autoplay Tests
    • +
  • noUITitleAttributes Demo
  • Videojs debug build test page
    • diff --git a/sandbox/noUITitleAttributes.html.example b/sandbox/noUITitleAttributes.html.example new file mode 100644 index 000000000..3b9faed90 --- /dev/null +++ b/sandbox/noUITitleAttributes.html.example @@ -0,0 +1,41 @@ + + + + + Video.js without title attribute on UI controls example + + + + + + + + + + +
    +

    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.

    + 
    npm start will automatically copy these files over from .example if they don't already exist.
    + 
    open http://localhost:9999/sandbox/noUITitleAttributes.html
    +
    + + +

    This demo shows the effect of setting the noUITitleAttributes option for video.js. It also includes the :focus-visible polyfill (see focus-visible.html)

    + + + + diff --git a/src/js/clickable-component.js b/src/js/clickable-component.js index f0f7e94d3..60b1626a7 100644 --- a/src/js/clickable-component.js +++ b/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); }