orange-confort-plus

v1.0.3

Published

a year ago

React component for Orange Confort+ accessibility toolbar

0High
0Medium
0Low

guillermo_at

Orange Confort Plus React

📖 Overview

Orange Confort Plus React is a React-based integration for the Orange Confort+ accessibility toolbar. It allows developers to easily add accessibility features to their applications with minimal configuration.

🚀 Installation

To install the package, run:

npm install orange-confort-plus

or using yarn:

yarn add orange-confort-plus

📂 Copy Required Static Files (Manual Opt-in)

To ensure that the toolbar assets are correctly served, you must manually copy the required static files from the package into your public/ directory. Run the following command in your consumer app:

npx orange-confort-plus copy-dist-serveur

This will copy the necessary files from node_modules/orange-confort-plus/dist/serveur/ into public/orangeconfortplus/ in your project.

🛠️ Usage

1️⃣ React Component Implementation (Recommended)

The recommended way to integrate Orange Confort+ in your React application is to use the provided OrangeConfortPlus component.

import React from 'react';
import { OrangeConfortPlus } from 'orange-confort-plus';

function App() {
  return (
    <>
      <div id="toolbar-container"></div>
      <OrangeConfortPlus
        config={{
          idLinkModeContainer: "toolbar-container",
          cssLinkModeClassName: "accessibility-link"
        }}
      />
      {/* Rest of your app */}
    </>
  );
}

export default App;

Configuration Options

The config prop for OrangeConfortPlus allows customization of various aspects of the toolbar. Below are the available options:

| Option | Description | |----------------------------|-------------| | idLinkModeContainer | The ID of the HTML container where the accessibility toolbar should be injected. | | cssLinkModeClassName | The CSS class applied to the toolbar link. | | idSkipLinkIdLinkMode | The ID of the container for skip links. If left empty, the script may insert its own. | | cssSkipLinkClassName | The CSS class applied on the skip link. | | toolbarScriptUrl | The URL to load the toolbar script from. If not provided, it is computed from hebergementDomaine and hebergementFullPath. | | hebergementDomaine | The base URL where the toolbar is hosted. Default is https://confort-plus.orange.com. | | hebergementFullPath | The path appended to hebergementDomaine, typically pointing to the folder where the service is located. |

2️⃣ Advanced Usage with Custom Hosting

If you are hosting the toolbar assets on your own domain, provide a custom domain and path:

<OrangeConfortPlus
  config={{
    hebergementDomaine: "https://your-domain.com",
    hebergementFullPath: "/accessibility",
    idLinkModeContainer: "toolbar-container",
    cssLinkModeClassName: "custom-link",
    idSkipLinkIdLinkMode: "skip-links",
    cssSkipLinkClassName: "skip-link"
  }}
/>

3️⃣ Traditional HTML Implementation (For Reference)

If you are not using React and prefer a standard HTML-based implementation:

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    var hebergementDomaine = 'https://example.com';
    var hebergementFullPath = hebergementDomaine + '/myconfortplus/';

    var accessibilitytoolbar_custom = {
      idLinkModeContainer: "toolbar-container",
      cssLinkModeClassName: "accessibility-link"
    };
  </script>
</head>
<body>
  <div id="toolbar-container"></div>
  <script type="text/javascript" src="https://example.com/myconfortplus/js/toolbar.min.js"></script>
</body>
</html>

🔥 Key Features

✅ Automatic Accessibility Toolbar Injection
✅ React Component with TypeScript Support
✅ Customizable Hosting for Toolbar Scripts
✅ Easy Integration with Minimal Code Changes
✅ Manual Opt-in for Copying Static Files

📌 Notes

If using Vite, ensure that static assets are placed in the public/ directory so they are served correctly.
Running npx orange-confort-plus copy-dist-serveur should be done after every update to orange-confort-plus to ensure the latest static assets are included.
The <OrangeConfortPlus> component does not render the container div (idLinkModeContainer). The consuming application is responsible for adding it manually before rendering the component.

📜 License

This project is licensed under the very invasive GPL v2, check a11y-button for an MIT licence.

📞 Support

For issues or questions, please open a GitHub issue or reach out to the Orange Confort Plus team.