-
Notifications
You must be signed in to change notification settings - Fork 69
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #330 from rdkcentral/dev
v5.0.0
- Loading branch information
Showing
47 changed files
with
6,374 additions
and
3,979 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| # Accessibility | ||
|
|
||
| The Accessibility plugin provides functionality to easily make your App more accessible. | ||
|
|
||
| Currently it provides functionality to apply a **Colorshifting filter** to your App, helping people with different types of color blindness to properly use your App. | ||
|
|
||
| ## Usage | ||
|
|
||
| The Accessibility plugin is automatically included in the root of your App. In most cases there is no need to specifically import the Accessibility plugin into your App code. | ||
|
|
||
| ## Colorshift filter | ||
|
|
||
| When you want to apply a colorshift filter over your _entire App_, you can do so by calling the | ||
| `colorshift` method attached to the root `application`. | ||
|
|
||
| A reference to the root application is made available in every Lightning component (via `this.application`), allowing you to invoke this function from anywhere in your App. | ||
|
|
||
| ### colorshift | ||
|
|
||
| Applies a color filter and optional _brightness_, _contrast_ and _gamma_ configuration. | ||
|
|
||
| ```js | ||
| const type = 'deuteranopia' | ||
| const config = { | ||
| brightness: 18, | ||
| contrast: 69, | ||
| gamma: 42 | ||
| } | ||
| this.application.colorshift(type, config) | ||
| ``` | ||
|
|
||
| #### type | ||
|
|
||
| Valid values for Colorshift types are: | ||
|
|
||
| - `deuteranopia` (red-green, green weak) | ||
| - `protanopia` (red-green, red weak) | ||
| - `tritanopia` (blue-yellow) | ||
| - `monochromacy` (grayscale) | ||
| - `normal` (normal vision) | ||
|
|
||
| When passing `false` the entire colorshift filter is disabled. | ||
|
|
||
| #### config | ||
|
|
||
| `config` is an object where the _brightness_, _contrast_ and _gamma_ of each color filter can be tweaked. The values are expected to be between `0` and `100`, and default to `50`. | ||
|
|
||
| It's not required to pass in the entire object. Keys that are omitted are automatically assumed to have the default value (of `50`). | ||
|
|
||
| The `normal` type color filter should be used for cases where you only want to adjust the brightness, contrast or gamma values, without applying any specific color blindness filter. | ||
|
|
||
|
|
||
| ### Advanced use | ||
|
|
||
| The typical use of the colorshift filter is to apply it over the entire app (using `this.application.colorshift()`). But there may also be cases where you want to apply it only to a single element (for demo purposes or during in-app configuration of the color settings, for example). | ||
|
|
||
| In this case you should import the `Accessibility` plugin into your component. | ||
|
|
||
| ```js | ||
| import { Accessibility } from '@lightningjs/sdk' | ||
| ``` | ||
|
|
||
| Next you can use the `colorshift` method similarly to the standard use. With the exception that the first argument refers to the Lightning element you want to apply the colorshift filter to. | ||
|
|
||
| ```js | ||
| const type = 'protanopia' | ||
| const config = { | ||
| brightness: 54, | ||
| } | ||
| const element = this.tag('Logo') | ||
| Accessibility.colorshift(element, type, config) | ||
| ``` | ||
|
|
||
| Important to remember is that the element you apply the colorshift filter to shouldn't already have a _shader_ applied to it, nor can it have `rtt` set to `true`. In these cases you could create a wrapper and apply the colorshift filter to the wrapper instead. | ||
|
|
||
| <!-- | ||
| Todo | ||
| ### Colorshift configuration UX | ||
| To make it as easy as possible to make your App colorblindness friendly, we have made available a standard importable [UI component](...) to set and configure the colorshift settings for your App. | ||
| Feel free to use this UI component directly inside your App. Or use it as inspiration to build your own configuration screen. | ||
| --> |
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.