Orange Confort+ aims to enhance user experience on websites. It works best when said websites are fully accessible.
[!CAUTION] Orange Confort+ does not improve website accessibility: blocking points still stay blocking points, with or without Orange Confort+.
To deploy Orange Confort+ onto your domain, a prepackaged version is available: simply add the dist/serveur
folder to your website.
[!IMPORTANT] If
dist/serveur/
content is placed at your website root, you do not need the following action.
Edit JavaScript files to change the following variables, or define them in your own script before Confort+ scripts inclusion:
var hebergementDomaine = 'https://example.com'; // Your website origin
var hebergementFullPath = hebergementDomaine + '/myconfortplus/'; // Path to Confort+ folder
[!TIP] Pay attention to the protocol you are using, HTTPS or HTTP.
To initialize Confort+, call it before the body
closing tag using the correct path:
<script type="text/javascript" src="https://example.com/myconfortplus/js/toolbar.min.js"></script>
[!NOTE] User settings are saved onto your domain and are never shared with other websites, or extension.
If the button doesn't comply with your brand, you can create a link that will trigger Confort+. To do so, just include those scripts along with the aforementioned:
<script type="text/javascript">
accessibilitytoolbar_custom = {
// MANDATORY
// ID of the target container which will include the link. If not null, activate the display in link mode. The link will be added as the last element of the target container.
idLinkModeContainer : "id_target_container",
// OPTIONAL
// CSS class applied on the link to unify its appearance with the site.
cssLinkModeClassName : "linkClass",
// OPTIONAL
// When the service is displayed as a link in the page, a skip link is automatically added at the top of the page. If you already have a group of skip links, you can specify the target container where the skip link will be added. The link will be added as the last element of the target container.
idSkipLinkIdLinkMode : "",
// OPTIONAL
// CSS class applied on the skip link
cssSkipLinkClassName : ""
};
</script>
git clone https://github.com/Orange-OpenSource/Orange-Confort-plus.git
npm ci
npm start
It should build all the things and open your browser to http://localhost:9010
.
You're ready to update files in /src
: any changes will trigger a build and reload your browser.
For mor specific needs, take a look at existing scripts in our package.json
.
To build HTML, CSS, JS and static assets for both the docs and the extension, run:
npm run build
We're using Mozilla's web-ext to ease our development workflow.
A packaging script based on web-ext build
exists for both Firefox and chromium, taking care of their specific manifest.json
using npm pre
-hook.
npm run zip
Based on web-ext lint
(using addons-linter under the hood), we're linting the Firefox package.
npm run lint:ext
web-ext run
is used to load extension. There's a separate script for Firefox and Chrome.
npm run load:firefox
npm run load:chrome
[!Warning] As of today, those scripts are quite buggy on Ubuntu if you use Firefox through snap. See #108 for more context.
If you need to work on Confort+ very own website, there's a specific script:
npm run start:docs
A custom icon-font is used in Confort+ toolbar. If you need to modify it, you're encouraged to use IcoMoon app and import existing IcoMoon settings.
You can find a detailed workflow in Boosted v4.6 documentation for icons.
Have a bug or a feature request? Please first check the issues and search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.
Code copyright 2014 - 2023 Orange. Code released under the GPLV2 license.
Luciole Font Family © Laurent Bourcellier & Jonathan Perez, CC-BY.