feat: ability to configure which features is enabled for widget (#21)

* feat: when initializing astral added options to filter which widgets to see, also added more detail in readme

* chore: changed variable name, docs: updated README file

* updating prettier

* fixing variable name change

* fixing typo

* Updating README.md with customization instructions

* fixing prettier

* test: adding cypress tests for feature filtering (#25)

* feat: when initializing astral added options to filter which widgets to see, also added more detail in readme

* chore: enabled all widgets

* chore: changed variable name, docs: updated README file

* test: adding cypress tests to check if enabling of features work

---------

Co-authored-by: smalik <smalik@verto.ca>

* fix(e2e): chrome ERRCONNRESET bug when running cypress

---------

Co-authored-by: shameerrehman <shameerrehman.inbox@gmail.com>
Co-authored-by: shameerrehman <94149351+shameerrehman@users.noreply.github.com>
Co-authored-by: Cho Yin Yong <choyiny@gmail.com>

README.md

@@ -21,19 +21,66 @@ started this project [here](blue.verto.health/advancing-accessibility-with-astra
 - Saturation
 - Text Size
 - Text Spacing
+- Screen Mask
+- Line Height
 - More to come!
 
+| Key             | Capability                                                                                                                                                                                                                                                                                                 |
+| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Screen Reader` | Screen reader is a tool where it would reads out texts on screen where user clicks on. For any html elements, if an aria label is available, the content from aria label would be read out loud, otherwise, it reads the text content of the element. There are 3 different speeds, normal, fast and slow. |
+| `Contrast`      | Contrast is a tool that removes background and replaces it with black or white to increase the difference in colours between text and the background to increase legibility. There are 3 modes, the invert colours, high contrast, and dark high contrast.                                                 |
+| `Saturation`    | Saturation is a tool that adjusts how colourful the colours are on screen, it has 3 different modes to lower saturation, increase saturation, or remove all the colours on screen (black and white).                                                                                                       |
+| `Bigger Text`   | Bigger Text is a tool that increases the size of the texts on screen.                                                                                                                                                                                                                                      |
+| `Text Spacing`  | Text Spacing is a tool that increases the spacing between each character on the screen to increase legibility and readibility.                                                                                                                                                                             |
+| `Screen Mask`   | Screen Mask is a tool which dims the background and has a smaller focused area which follows the cursor sliding up and down the page.                                                                                                                                                                      |
+| `Line Spacing`  | Line Spacing is a tool which increases the space between lines for greater readability.                                                                                                                                                                                                                    |
+
 ## Usage
 
 Astral is built with Angular Elements. You can use it in your website in under 30 seconds. To add it, simply include the Javascript and initialize it:
 
+Note: By default this function all will add all available features, for enabling only certain features, see the section below on Customizing Widget.
+
 ```html
 <script src="https://astral-accessibility.pages.dev/main.js"></script>
 <script>
   initializeAstral();
 </script>
 ```
 
+## Customizing Widget
+
+Astral-Accessibility allows you to customize the widget to your needs. This mean you can enable the features you want and hide the features you may not need.
+You can choose which widgets should appear by passing an object inside of the `inititalizeAstral` function call. Inside the object include a key called `enabledFeatures` with the value of a list containing strings of which features you want enabled.
+
+Here's an example:
+
+```html
+<script>
+  initializeAstral({
+    filterWidget: ["Contrast", "Bigger Text", "Screen Mask"],
+  });
+</script>
+```
+
+Optionally we can choose which widgets should appear by passing an object inside of function call:
+
+```html
+<script>
+  initializeAstral({
+    enabledFeatures: [
+      "Screen Reader",
+      "Contrast",
+      "Saturation",
+      "Bigger Text",
+      "Text Spacing",
+      "Screen Mask",
+      "Line Height",
+    ],
+  });
+</script>
+```
+
 ## Development Setup
 
 1. Clone the repository

cypress.config.ts

@@ -11,6 +11,7 @@ export default defineConfig({
 
   env: {
     baseUrl: "http://localhost:8000",
+    blankUrl: "http://localhost:8000/blank-page.html",
   },
 
   e2e: {

cypress/e2e/filter-feature.cy.ts

@@ -0,0 +1,113 @@
+describe("tests the enabling of different features", () => {
+  it("passes", () => {
+    //checks contract component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", { enabledFeatures: ["Contrast"] });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-contrast");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks screen reader component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Screen Reader"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-screen-reader");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks saturation component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Saturation"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-saturate");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks text size component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Bigger Text"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-text-size");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks text spacing component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Text Spacing"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-text-spacing");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks screen mask component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Screen Mask"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-screen-mask");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-line-height").should("not.exist");
+    cy.clearLocalStorage();
+
+    //checks line height component
+    cy.visit(Cypress.env("blankUrl")).then(() => {
+      cy.window().invoke("initializeAstral", {
+        enabledFeatures: ["Line Height"],
+      });
+    });
+    cy.waitForResource("main.js");
+    cy.document().find("astral-line-height");
+    cy.get("astral-screen-reader").should("not.exist");
+    cy.get("astral-contrast").should("not.exist");
+    cy.get("astral-saturate").should("not.exist");
+    cy.get("astral-text-size").should("not.exist");
+    cy.get("astral-text-spacing").should("not.exist");
+    cy.get("astral-screen-mask").should("not.exist");
+    cy.clearLocalStorage();
+  });
+});

package.json

@@ -35,7 +35,7 @@
     "@angular/compiler-cli": "^14.1.0",
     "@types/jasmine": "~4.0.0",
     "bootstrap": "^5.3.1",
-    "cypress": "^12.5.1",
+    "cypress": "^12.17.4",
     "jasmine-core": "~4.2.0",
     "karma": "~6.4.2",
     "karma-chrome-launcher": "~3.2.0",

projects/astral-accessibility/src/lib/astral-accessibility.component.html

@@ -40,25 +40,28 @@
       <!-- <div class="action">
         <astral-invert></astral-invert>
       </div> -->
-      <div class="action">
+      <div
+        class="action"
+        *ngIf="this.enabledFeatures.includes('Screen Reader')"
+      >
         <astral-screen-reader></astral-screen-reader>
       </div>
-      <div class="action">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Contrast')">
         <astral-contrast></astral-contrast>
       </div>
-      <div class="action">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Saturation')">
         <astral-saturate></astral-saturate>
       </div>
-      <div class="action">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Bigger Text')">
         <astral-text-size></astral-text-size>
       </div>
-      <div class="action">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Text Spacing')">
         <astral-text-spacing></astral-text-spacing>
       </div>
-      <div class="action d-none d-sm-block">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Screen Mask')">
         <astral-screen-mask></astral-screen-mask>
       </div>
-      <div class="action">
+      <div class="action" *ngIf="this.enabledFeatures.includes('Line Height')">
         <astral-line-height></astral-line-height>
       </div>
     </div>

projects/astral-accessibility/src/lib/astral-accessibility.component.ts

@@ -32,8 +32,18 @@ export class AstralAccessibilityComponent {
   userAgent = navigator.userAgent;
   astralAccessibilityPanel = "astral-modal";
   astralAccessibilityIcon = "astral-icon";
+  options: Record<string, any> = {};
+  enabledFeatures: String[] = [];
 
   ngOnInit() {
+    const astralElement = document.querySelector("astral-accessibility");
+    const astralOptions = astralElement?.getAttribute("astral-features");
+
+    if (astralOptions) {
+      this.options = JSON.parse(astralOptions);
+      this.enabledFeatures = this.options["enabledFeatures"];
+    }
+
     const phones =
       /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|mobile|CriOS/i;
     if (phones.test(this.userAgent)) {

projects/astral-accessibility/src/main.ts

@@ -4,15 +4,40 @@ import { createApplication } from "@angular/platform-browser";
 import { AstralAccessibilityComponent } from "./lib/astral-accessibility.component";
 import "zone.js";
 
-(window as any).initializeAstral = async function initializeAstral() {
+(window as any).initializeAstral = async function initializeAstral(
+  features?: Record<string, any>,
+) {
   try {
+    //When no options are given by default all widgets are allowed
+    if (!features) {
+      features = {
+        enabledFeatures: [
+          "Screen Reader",
+          "Contrast",
+          "Saturation",
+          "Bigger Text",
+          "Text Spacing",
+          "Screen Mask",
+          "Line Height",
+        ],
+      };
+    }
+
     const app = await createApplication();
     const widget = createCustomElement(AstralAccessibilityComponent, {
       injector: app.injector,
     });
     customElements.define("astral-accessibility", widget);
+
     const doc = app.injector.get(DOCUMENT);
-    doc.body.appendChild(doc.createElement("astral-accessibility"));
+    const astralAccessibilityElement = doc.createElement(
+      "astral-accessibility",
+    );
+    astralAccessibilityElement.setAttribute(
+      "astral-features",
+      JSON.stringify(features),
+    );
+    doc.body.appendChild(astralAccessibilityElement);
   } catch (err) {
     console.error(err);
   }

projects/demo/blank-page.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Astral Accessibility</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <p>Filter Feature Test</p>
+    <script src="main.js"></script>
+  </body>
+</html>