Vocalize the type of layer, the status and the direction when the marker has one

ID: issue-0-16
Test: Ensure that key features are usable with screen readers
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/aides-techniques/#sassurer-que-les-principales-fonctionnalites-sont-utilisables-avec-les-lecteurs-decran

Description

• Vocalize the type of layer, the status.
• Vocalize the direction when the marker has one

With iotmapmanager version 2.0.1, the popups are slightly too far left.

Observed with Firefox and Chrome.

In popup.css, the rule is :

.marker-selected > .marker-popup {
  left: -100px
}

It would rather work for me with left: -85px or width set to something like 240px 🤷

This issue concerns both the removing of markers and clusters (individually or by group).

Considering the following test:

console.log('°°°°°°°°°°°°°°°°°°°°°°(1) this.iotMapClusterManager.getAllClusters()', Object.keys(this.iotMapClusterManager.getAllClusters()).sort(function(a,b){
  return a.localeCompare(b);
}));
this.iotMapClusterManager.removeClusters(Object.keys(this.iotMapClusterManager.getAllClusters()));
/*Object.keys(this.iotMapClusterManager.getAllClusters()).forEach(id => {
  this.iotMapClusterManager.removeCluster(id);
})*/
console.log('°°°°°°°°°°°°°°°°°°°°°°(2) this.iotMapClusterManager.getAllClusters()', Object.keys(this.iotMapClusterManager.getAllClusters()).sort(function(a,b){
  return a.localeCompare(b);
}));
this.iotMapClusterManager.addClusters(this.clustersList);
console.log('°°°°°°°°°°°°°°°°°°°°°°(3) this.iotMapClusterManager.getAllClusters()', Object.keys(this.iotMapClusterManager.getAllClusters()).sort(function(a,b){
  return a.localeCompare(b);
}));

The result is:

°°°°°°°°°°°°°°°°°°°°°°(1) this.iotMapClusterManager.getAllClusters() 
Array(161) [ "ezm", "ezq", "ezr", "ezt", "ezv", "ezw", "ezx", "ezy", "ezz", "gbj", … ]
°°°°°°°°°°°°°°°°°°°°°°(2) this.iotMapClusterManager.getAllClusters() 
Array(161) [ "ezm", "ezq", "ezr", "ezt", "ezv", "ezw", "ezx", "ezy", "ezz", "gbj", … ]
°°°°°°°°°°°°°°°°°°°°°°(3) this.iotMapClusterManager.getAllClusters() 
Array(169) [ "ez", "ezm", "ezq", "ezr", "ezt", "ezv", "ezw", "ezx", "ezy", "ezz", … ]

The clusters are well added but the previous ones are not deleted.
However, they are not displayed anymore in the map!

The problem seems to come from the removeCluster function in https://github.com/Orange-OpenSource/IOT-Map-Component/blob/master/src/iotMapManager/src/iot-map-cluster-manager.ts and especially the following part which is never executed in my case:

clusterToRemove.removeCluster() // Note: this delete the cluster from the map
const index = this.clustersObjects.indexOf(clusterToRemove, 0)      
  if (index > -1) { // Note: we never get there so the cluster remains in the array
     this.clustersObjects.splice(index, 1)
  }
}

We are able to hack this issue from outside in our code by doing this:

// Clusters hack
this.iotMapClusterManager.removeClusters(Object.keys(this.iotMapClusterManager.getAllClusters()));
Object.keys(this.iotMapClusterManager.getAllClusters()).forEach(key => {
   delete this.iotMapClusterManager.clustersObjects[key];
});

// Markers hack
this.iotMapMarkerManager.removeMarkers(Object.keys(this.iotMapMarkerManager.getAllMarkers()));
Object.keys(this.iotMapMarkerManager.getAllMarkers()).forEach(key => {
  delete this.iotMapMarkerManager.markersObjects[key];
});

With the same logging system presented at the beginning of the issue, as a proof:

°°°°°°°°°°°°°°°°°°°°°°(1) this.iotMapClusterManager.getAllClusters() 
Array(161) [ "ezm", "ezq", "ezr", "ezt", "ezv", "ezw", "ezx", "ezy", "ezz", "gbj", … ]
°°°°°°°°°°°°°°°°°°°°°°(2) this.iotMapClusterManager.getAllClusters() 
Array []
°°°°°°°°°°°°°°°°°°°°°°(3) this.iotMapClusterManager.getAllClusters() 
Array(8) [ "ez", "gb", "sp", "sr", "sx", "u0", "u2", "u8" ]

Would it be possible to go back to the previous state (see the 3 markers in the markercluster group) after having clicked outside the marker's popup?

Goal: go back to

Simulated in local mode (to have the latest version of IoT Map Component) with the following Knobs > markersList data:

  {
    "id": "s1",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    },
    "popup": {
      "title": "title",
      "body": "Lorem ipsum"
    }
  },
  {
    "id": "s1000",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    },
    "popup": {
      "title": "title",
      "body": "Lorem ipsum"
    }
  },
  {
    "id": "s2000",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    }
  },

We met a problem with autozoom on a cluser.

We have this definition of a cluster :
{"id":"u09","location":{"lat":48.871960972901434,"lng":2.346397452056408},"contentLabel":"Devices","childCount":4,"aggregation":[{"singularState":"Activated","pluralState":"Activated","count":3,"color":"#32c832"},{"singularState":"Initializing","pluralState":"Initializing","count":1,"color":"#32c832"}],"markersArea":{"_southWest":{"lat":48.87180808070116,"lng":2.34507473744452},"_northEast":{"lat":48.87211386510171,"lng":2.347720166668296}}}

But the zoom does not include the north bounds

We have implemented a switch between the manual and automatic clustering. So this is our first test for using automatic clustering in our hybrid Angular JS / Angular project.

In development mode (an equivalent of ng serve), we don't have any problems.

In production mode, the compilation is OK but when we display the map in automatic clustering, we can see the following error:

L.MarkerClusterGroup is not a constructor

This is linked to the content of the private initLayer function:

} else { // clusterables marker
      layer = L.markerClusterGroup({
        maxClusterRadius: this.config.map.clusterRadius,
        showCoverageOnHover: false,
        iconCreateFunction: this.getClusterIcon.bind(this)
      })

This is probably a problem of typings as we had in #18.

We found a way of making it work that wasn't needed before. In our index.ts, we now have to add:

// Leaflet
import 'leaflet';
import 'leaflet.markercluster';

I haven't dug into the problem more than that, but it would be nice not having to do that which is a bit tricky to find.

Insufficient contrast for icons carrying information (marker)

ID: issue-0-6
Test: Ensure sufficient contrast between text and background / components
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#assurer-un-contraste-suffisant-entre-les-couleurs-de-premier-plan-et-de-fond

Description

The contrast must be sufficient to transmit the information.

Fix

Ensure a minimum contrast of 3:1 for the icons.

List of identified a11y issues after the a11y audit by @SimonF30

• #39
• #40
• #41
• #42
• #43
• #44
• #45
• #46
• #47
• #48
• #49
• #50
• #51
• #52
• #53
• #54

Elements for clusters should not be vocalized

ID: issue-0-15
Test: Ensure that key features are usable with screen readers
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/aides-techniques/#sassurer-que-les-principales-fonctionnalites-sont-utilisables-avec-les-lecteurs-decran

Description

• For clusters the circles are vocalized white circle,
• The number that is placed in the middle of the cluster should not be vocalized either

Fix

aria-hidden=true to prevent vocalization to the screen reader

Check the compatibility of this project with both Boosted 4 and 5.
See https://github.com/Orange-OpenSource/IOT-Map-Component/blob/master/package.json where Boosted 4 is declared.

There is a compilation error in Angular project using the 0.4.2 version of iotmapmanager.

ERROR in node_modules/iotmapmanager/iotMapManager.ts(91,18): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/iotmapmanager/node_modules/@types/leaflet/index"' has no exported member 'MarkerClusterGroup'.
node_modules/iotmapmanager/iotMapManager.ts(95,17): error TS2339: Property 'markerClusterGroup' does not exist on type 'typeof import("/Users/ju/LO/portal/node_modules/iotmapmanager/node_modules/@types/leaflet/index")'.
node_modules/iotmapmanager/iotMapManager.ts(118,40): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/iotmapmanager/node_modules/@types/leaflet/index"' has no exported member 'MarkerClusterGroup'.
node_modules/iotmapmanager/iotMapManager.ts(119,18): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/iotmapmanager/node_modules/@types/leaflet/index"' has no exported member 'MarkerClusterGroup'.

For example, in iotMapManager.ts (line 91) :

let layer: L.MarkerClusterGroup | L.FeatureGroup;

but L references 'leaflet' and not 'leaflet.markercluster'

import * as L from 'leaflet';
import 'leaflet.markercluster';

This is probably where one of the errors comes from.

Non-logical focus shift

ID: issue-0-11
Test: Make the focus path sequential and logical without keyboard traps
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/navigation-clavier/#rendre-le-parcours-du-focus-sequentiel-et-logique-sans-piege-clavier

Description

• The focus movement does not follow a logical order (reading direction).
• The zoom buttons and the layer display should take the focus first
• (see Leaflet/Leaflet#7479)

Is there any type definition for Marker like :

export interface IOTMarker {
  id: string;
  location: { [0]: number; [1]: number };
  popup?: string;
  shape?: {
    shape?: string;
    color?: string;
    anchored?: boolean;
    plain?: boolean;
  };
  inner: {
    color: string;

    icon?: string;
    // *** OR ***
    label?: string;
  };
  gauge?: {
    color?: string;
    percent?: number;
  };
}

When using a marker with a shape poi, I got a 404 on
Request URL: http://localhost:64215/assets/img/POI_SQR_Shadow.png
or Request URL: http://localhost:64215/assets/img/POI_SQR_PIN_Shadow.png

Links have a button behavior (zoom)

ID: issue-0-2
Test: Respect the HTML semantics
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#respecter-la-semantique-html

Description

The zoom + and zoom - buttons are links with the button role

Fix

Directly use <button> or <input type="button"> semantics

Context

• Hybrid Angular JS / Angular 7 application
• "webpack": "4.28.2"
• "typescript": "^3.2.4"
• "@asymmetrik/ngx-leaflet": "^4.0.0"
• "leaflet": "^1.4.0"
• "@types/leaflet": "^1.4.1"

Feedback

Here is a feedback after having integrated the map component (v0.2.1) of this repo (without npm) in our project. Considering the fact that we're working on an hybrid application with an old version of Typescript and Angular, it could be irrelevant 🤷‍♂️ .
If necessary, I could extract some of these modifications into a PR; please let me know.

Integration into our project

• Copied the content of the zip file into src/app/IOT-Map-Component-0.2.1
• npm i leaflet.markercluster => "@leaflet.markercluster": "^1.4.1"
• npm i @types/leaflet.markercluser => "@types/leaflet.markercluster": "^1.4.3" (not sure if this is mandatory)
• Integrated it into an account page (chosen randomly) just to display the example

diff --git a/src/app/account/account.module.ts b/src/app/account/account.module.ts
index fa3aba1cf..c4e78e541 100644
--- a/src/app/account/account.module.ts
+++ b/src/app/account/account.module.ts
@@ -7,12 +7,15 @@ import { AccountComponent } from './components/account/account.component';
 import { ACCOUNT_STATES } from './account.route';
 import { TenantQuotasModule } from '../tenant/quotas/tenant-quotas.module';

+import { MapModule } from '../IOT-Map-Component-0.1.2/src/map/map.module';
+
 @NgModule({
   providers: [],
   imports: [
     CommonLOModule,
     UIRouterUpgradeModule.forChild({ states: ACCOUNT_STATES }),
     TenantQuotasModule,
+    MapModule,
   ],
   declarations: [AccountComponent],
   entryComponents: [],
diff --git a/src/app/account/components/account/account.component.tpl.html b/src/app/account/components/account/account.component.tpl.html
index e37fec265..ebd7667ea 100644
--- a/src/app/account/components/account/account.component.tpl.html
+++ b/src/app/account/components/account/account.component.tpl.html
@@ -8,6 +8,8 @@
     <span translate>lo.account.account-information</span>
   </lo-panel-header>
   <lo-panel-body>
+    <map-component></map-component>
+
     <div class="form-group row">
       <label class="col-2 col-form-label" translate="lo.account.name"></label>
       <div class="col-10">
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4069f0ac6..6030d869e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -72,6 +72,7 @@ import { ResourceService } from './resource/services/resource.service';
 import { DeviceParametersModule } from './device/parameters/device-params.module';
 import { AssetModule } from './asset/asset.module';
 import { TreeModule } from 'angular-tree-component';
+import { MapModule } from './IOT-Map-Component-0.1.2/src/map/map.module';

 @NgModule({
   providers: [
@@ -137,6 +138,7 @@ import { TreeModule } from 'angular-tree-component';
     DeviceParametersModule,
     AssetModule,
     TreeModule.forRoot(),
+    MapModule
   ],
   exports: [],
   declarations: [],

• Because of the json files used in iotMapManger.json, I had to do:

diff --git a/tsconfig.base.json b/tsconfig.base.json
index 801f43985..928fe4cc8 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -7,6 +7,7 @@
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "sourceMap": true,
-    "lib": ["es2018", "dom"]
+    "lib": ["es2018", "dom"],
+    "resolveJsonModule": true
   }
 }

Modifications of IOT-Map-Component files to make it compile and to display the example

• src/iotMapManager/iotMapManager.ts

43c43
<     this.map = L.map(selector).setView(config.map.DEFAULT_COORDINATES, config.map.DEFAULT_ZOOM_LEVEL);
---
>     this.map = L.map(selector).setView(L.latLng(config.map.DEFAULT_COORDINATES[0],config.map.DEFAULT_COORDINATES[1]), config.map.DEFAULT_ZOOM_LEVEL);
49c49
<     const geoportailLayer = L.tileLayer(config.map.geoportailLayer, {
---
>     const geoportailLayer = L.tileLayer.wms(config.map.geoportailLayer, {
51c51
<       apikey: 'choisirgeoportail',
---
>       //apikey: 'choisirgeoportail',
53c53
<       style: 'normal'
---
>       styles: 'normal'
66c66
<
---
> b
69c69
<     let layer = new L.markerClusterGroup({
---
>     let layer = L.markerClusterGroup({
71c71
<       clusterType: clusterType,
---
>       //clusterType: clusterType,
115c115
<     let html = '';
---
>     let html: L.DivIcon;
180c180
<       const newMarker = L.marker(marker.location, {icon: this.iotMapMarkers.getMarker(marker)}).bindPopup(popupText);
---
>       const newMarker: any = L.marker(marker.location, {icon: this.iotMapMarkers.getMarker(marker)}).bindPopup(popupText);

• src/iotMapManager/iotMapMarkers/iotMapMarkers.ts

46c46,48
<     const iconSize = (selected) ? [selectedMarkerSize.width, selectedMarkerSize.height] : [unselectedMarkerSize.width, unselectedMarkerSize.height];
---
>     const iconSize: L.Point = selected
>       ? L.point(selectedMarkerSize.width, selectedMarkerSize.height)
>       : L.point(unselectedMarkerSize.width, unselectedMarkerSize.height);

• src/map/map.component.css renamed in src/map/map.component.scss
• src/map/map.component.ts

11c11
<   styleUrls: ['./map.component.css']
---
>   styleUrls: ['./map.component.scss']

• src/map/map.component.html

1,2d0
< <!--The content below is only a placeholder and can be replaced.-->
<
5d2
< <router-outlet></router-outlet>

• src/map/map.module.ts

10a11,13
>   exports: [
>     MapComponent
>   ],
12,13c15,16
<     BrowserModule,
<     MapRoutingModule
---
>     //BrowserModule,
>     //MapRoutingModule
16c19
<   bootstrap: [MapComponent]
---
>   //bootstrap: [MapComponent]
18a22,23
>
>

Inner color defined in statuses or templates is defined according to functional color, to highlight the inner. In the case of a dark functional color, the inner color is set to "white".

However in the case of "plain = false" or a gauge, the background is white and the border of the functional color => invisible inner.

→ Force the inner color to "black"

In Map Component:

• Functional color and additional ones proposed by @mccart77 will be available through default status and templates, defined for markers (see https://github.com/Orange-OpenSource/IOT-Map-Component#presentation)
• But we also will leave the developer free to use another color

At the same time, we would like to simplify the use of the component by setting the color of label/icon to white vs. black according to the background color of the marker.

Can be done according to the following algorithm (which is aligned with @mccart77 specifications for functional markers color):

• Background Luminance = .3R+.6V+.1B
• If Luminance >= 128 set the icon / label in black
• If Luminance < 128 set the icon / label in white

Map focus and screen reader

ID: issue-0-13
Test: Ensure that key features are usable with screen readers
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/aides-techniques/#sassurer-que-les-principales-fonctionnalites-sont-utilisables-avec-les-lecteurs-decran

Description

When the map takes the focus the screen reader should indicate that it is a Map (see Leaflet/Leaflet#7193)

For clusters the tables are used for layout purposes

ID: issue-0-4
Test: Structuring data tables
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#structurer-les-tableaux-de-donnees

Description

For clusters the tables are used for layout purposes

Fix

Remove tables and use a correct layout

• bugs of accuracy circles?

No ALT on images

ID: issue-0-5
Test: Provide a text equivalent for images and frames/images
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/contenu-non-textuel/#fournir-un-equivalent-textuel-pour-les-images-et-les-cadres

Description

• All images must have an ALT attribute.
• Issues with image shadows and for markers where an image is added inside

Fix

• Add an ALT attribute to images <img alt="[...]" [...]>
• Note: can be empty for decorative images

Lack of HTML button semantics (layers filters)

ID: issue-0-3
Test: Respect the HTML semantics
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#respecter-la-semantique-html

Description

The filter for the layers should be a button and not a link

Fix

Use <button> or <input type="button"> semantics

Item not usable with keyboard

ID: issue-0-10
Test: Allow the use of the application with the keyboard
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/navigation-clavier/#permettre-dutiliser-les-principales-fonctionnalites-de-lapplication-au-clavier

Description

• An element is not usable from a keyboard navigation.
• Clusters and markers are not usable from keyboards.

Maintainers use a local project in order to evaluate non-regression.
Keep the content of the test cases but integrate it in a testing framework here (Robot Framework, Cypress, etc.)

Unidentifiable link in a body of text

ID: issue-0-8
Test: Do not use color or sensory information as the only source of information/color
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#assurer-un-contraste-suffisant-entre-les-couleurs-de-premier-plan-et-de-fond

Description

The links at the bottom right of the map are not identifiable

Fix

Apply a visually identifiable medium (underline, bold, etc.). Ensure a 3:1 contrast between text, background and links and that there is a means other than color to identify them on hover and focus.

Vertical centering is different with browsers

Lack of HTML button semantics (marker / cluster)

ID: issue-0-1
Test: Respect the HTML semantics
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/contenu-textuel/#respecter-la-semantique-html

Description

• Interactive elements that trigger an action must use HTML button semantics.
• Markers trigger an action on click
• Same for clusters

Fix

Directly use role=button semantics

• Remove NOTICE.txt 2 files because we don't embed the font here. It is handled by Boosted.
• Remove @import '~boosted/dist/css/orangeHelvetica.min.css' from https://github.com/Orange-OpenSource/IOT-Map-Component/blob/master/src/iotMapManager/iot-map-manager.css because it must be done by the project when it loads Boosted by itself.
• In CSS files which declare font-family: "Helvetica Neue", 'helvetica'. Do the same thing than in Boosted.

I'm observing something strange when I try to use fitBounds Leaflet function.

Within our project

When I use the following code

import * as L from 'leaflet';
// [...]
this.commonIotMap.getIotMap().fitBounds(L.latLngBounds(L.latLng(40.712, -74.227), L.latLng(40.774, -74.125)));

I got the following error

Error: Bounds are not valid.

I added logs in node_modules/iotmapmanager/dist/index.js in toLatLngBounds(a, b) (which is used by fitBounds) and I see the execution doesn't enter in if (a instanceof LatLngBounds) which causes an empty object returned which causes the exception Bounds are not valid.

On the other hand, if I rather use this code without the types, it works as expected

import * as L from 'leaflet';
// [...]
this.commonIotMap.getIotMap().fitBounds([[40.712, -74.227], [40.774, -74.125]]);

Within IoT Map Component

If I modify the code of map.component.ts within Iot Map Component project

diff --git a/src/map/map.component.ts b/src/map/map.component.ts
index 786643c..08c5777 100644
--- a/src/map/map.component.ts
+++ b/src/map/map.component.ts
@@ -15,6 +15,8 @@ import {
   IotMapPathManager
 } from 'iotmapmanager'

+import * as L from 'leaflet';
+
 @Component({
   selector: 'map-component',
   templateUrl: './map.component.html',
@@ -518,6 +520,8 @@ export class MapComponent implements AfterViewInit {
     this.iotMapUserMarkerManager.addUserMarker(this.userMarker)
     this.iotMapPathManager.addPath(this.chemin)

+    this.commonIotMap.getIotMap().fitBounds(L.latLngBounds(L.latLng(40.712, -74.227), L.latLng(40.774, -74.125)));
+
     setTimeout(() => { this.iotMapMarkerManager.updateMarker('s1', {shape: {accuracy: 600}})}, 3000)
     setTimeout(() => { this.iotMapMarkerManager.removeMarker('s1')}, 5000)
     setTimeout(() => { this.iotMapMarkerManager.updateMarker('s5', {shape : { accuracy: undefined}})}, 5000)

it works!

But the package.json uses "iotmapmanager": "^2.0.0". If I change it to 2.0.1, I have this error

ERROR TypeError: L.MarkerClusterGroup is not a constructor
    markerClusterGroup leaflet.markercluster-src.js:1385
    initLayer iot-map-manager.ts:94
    getLayer iot-map-manager.ts:132
    addElement iot-map-manager.ts:176
    addMarker iot-map-marker-manager.ts:45
    addMarkers iot-map-marker-manager.ts:60
    addMarkers iot-map-marker-manager.ts:59
    ngAfterViewInit map.component.ts:518

Note: I have this same error if try to use fitBounds in Storybook.

Hi,

The display of a cluster of marker localized at the same place fails.

The leaflet cluster management plugin explodes the cluster to display the markers on a spiral.
But the display of the hover on the cluster interacts with the display of the marker popups and when you click on a marker, it closes the cluster, you click again on the cluster, the marker popup is displayed...
Here is a demo using storybook

Impossible to close an additional content without moving the focus or the pointer

ID: issue-0-9
Test: Ensure that the user remains in control during interactions - Content on Hover or Focus
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/navigation-generale/#sassurer-que-lutilisateur-garde-le-controle-lors-des-interactions

Description

Impossible to close an additional content (tooltip, popin, etc...) without moving the focus or the pointer.
After opening the additional content, the user cannot close it without moving the focus or the mouse pointer.

Fix

Provide a mechanism for users to close additional content without moving the focus or mouse (e.g., closing from the Escape key).

We could install & run the previous version of iotmapmanager (0.2.4) in our Angular project with the following package.json configuration:

"iotmapmanager": "^0.2.4",
"leaflet": "^1.4.0",
"leaflet.markercluster": "^1.4.1",
"@types/leaflet": "^1.4.1",
"@types/leaflet.markercluster": "^1.4.3",

With the new 0.3.1 version, I can see the following errors:

ERROR in node_modules/iotmapmanager/iotMapClusters.ts(23,49): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/@types/leaflet/index"' has no exported member 'divIcon'.
node_modules/iotmapmanager/iotMapManager.ts(38,35): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/@types/leaflet/index".Control' has no exported member 'Layer'.
node_modules/iotmapmanager/iotMapManager.ts(85,18): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/@types/leaflet/index"' has no exported member 'markerClusterGroup'.
node_modules/iotmapmanager/iotMapManager.ts(111,40): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/@types/leaflet/index"' has no exported member 'markerClusterGroup'.
node_modules/iotmapmanager/iotMapManager.ts(112,18): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/@types/leaflet/index"' has no exported member 'markerClusterGroup'.
node_modules/iotmapmanager/iotMapManager.ts(192,44): error TS2345: Argument of type '{ lat: number; lon: number; }' is not assignable to parameter of type 'LatLngExpression'.
  Property 'lng' is missing in type '{ lat: number; lon: number; }' but required in type 'LatLngLiteral'.
node_modules/iotmapmanager/iotMapManager.ts(193,17): error TS2339: Property 'markerInfo' does not exist on type 'Marker<any>'.
node_modules/iotmapmanager/iotMapManager.ts(200,36): error TS2345: Argument of type '{ lat: number; lon: number; }' is not assignable to parameter of type 'LatLngExpression'.
  Type '{ lat: number; lon: number; }' is not assignable to type 'LatLngLiteral'.
node_modules/iotmapmanager/iotMapManager.ts(222,42): error TS2339: Property 'markerInfo' does not exist on type 'Marker<any>'.
node_modules/iotmapmanager/iotMapManager.ts(243,65): error TS2339: Property 'markerInfo' does not exist on type 'Marker<any>'.
node_modules/iotmapmanager/iotMapManager.ts(247,23): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/@types/leaflet/index"' has no exported member 'markerClusterGroup'.
node_modules/iotmapmanager/iotMapManager.ts(347,40): error TS2345: Argument of type '{ lat: number; lon: number; }' is not assignable to parameter of type 'LatLngExpression'.
  Type '{ lat: number; lon: number; }' is not assignable to type 'LatLngLiteral'.
node_modules/iotmapmanager/iotMapManager.ts(407,25): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/@types/leaflet/index"' has no exported member 'latLngBounds'.
node_modules/iotmapmanager/iotMapManager.ts(422,47): error TS2345: Argument of type '{ lat: number; lon: number; }' is not assignable to parameter of type 'LatLngExpression'.
  Property 'lng' is missing in type '{ lat: number; lon: number; }' but required in type 'LatLngLiteral'.
node_modules/iotmapmanager/iotMapManager.ts(425,20): error TS2339: Property 'markerInfo' does not exist on type 'Marker<any>'.
node_modules/iotmapmanager/iotMapManager.ts(464,70): error TS2339: Property 'markerInfo' does not exist on type 'Marker<any>'.
node_modules/iotmapmanager/iotMapMarkers.ts(23,53): error TS2694: Namespace '"/Users/ju/LO/portal/node_modules/@types/leaflet/index"' has no exported member 'divIcon'.

It is possible that the versions we use aren't compatible with this new version of iotmapmanager, but I can't find the matching leaflet* a/o @types/leaflet* packages versions in the documentation. This could be improved with #6.

Considering only the first error of the list, relative to iotMapClusters.ts :

public getClusterIcon(cluster: IotCluster): L.divIcon

Shouldn't the return type be L.DivIcon here? divIcon rather seems to be an exported function in node_modules/@types/leaflet/index.d.ts.

If you have several markers co-localized near the side of the Map with the auto clustering feature,

When you click on the cluster is is exploded to display the included marker.

But if you then click on one of the marker displayed, the popup tries to open.

But the automatic position change of the map to display the popup inside the map close the exploded cluster and indirectly close the popup.

If you click again on the cluster, it is exploded again and the previously opened popup is still opened.

Map focus and screen reader

ID: issue-0-14
Test: Ensure that key features are usable with screen readers
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/aides-techniques/#sassurer-que-les-principales-fonctionnalites-sont-utilisables-avec-les-lecteurs-decran

Description

Markers should be announced as buttons (see Leaflet/Leaflet#7428)

We can see a "ghost" 👻 cluster popup when hovering the center of the cluster when markers are displayed. Would it be possible to hide it?

Simulated in local mode (to have the latest version of IoT Map Component) with the following Knobs > markersList data:

{
    "id": "s1",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    }
  },
  {
    "id": "s1000",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    },
    "popup": {
      "title": "title",
      "body": "Lorem ipsum"
    }
  },
  {
    "id": "s2000",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    }
  },

When several projects instanciate IotMapManager, le config is shared between them.
Configuration should be duplicated and updatable by each project independently.

Color is the only way to convey information (percentage)

ID: issue-0-7
Test: Do not use color or sensory information as the only source of information/color
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/couleurs-et-contrastes/#ne-pas-utiliser-la-couleur-ou-linformation-sensorielle-comme-seule-source-dinformation

Description

For percentages on a marker, the information is only given by the color

Fix

Complement the color with explicit text, or other visual information (e.g.: icons use colors, but also different shapes).

This is a border case but overriding a status which defines a inner / label by another one not defining it causes an issue: the label stays but can be changed by an attribute update.

Considering a markercluster group:

If I click on the bottom marker, its popup is displayed under the other markers:

Simulated in local mode (to have the latest version of IoT Map Component) with the following Knobs > markersList data:

{
    "id": "s1",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    }
  },
  {
    "id": "s1000",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    },
    "popup": {
      "title": "title",
      "body": "Lorem ipsum"
    }
  },
  {
    "id": "s2000",
    "location": {
      "lat": 44.895,
      "lng": 4.87
    },
    "template": "square",
    "status": "warning",
    "tab": {
      "content": "H",
      "type": 0
    },
    "shape": {
      "type": 1,
      "anchored": true,
      "plain": false,
      "color": "#FFCC00"
    },
    "layer": "default",
    "inner": {
      "color": "black"
    }
  },

Needs more information from Live Objects

Focus display (outline) is disabled

ID: issue-0-12
Test: Make the focus visible in all circumstances / outline
Recommendations: https://a11y-guidelines.orange.com/fr/web/developper/navigation-clavier/#rendre-visible-le-focus-en-toute-circonstance

Description

• The outline must not be disabled.
• No focus on buttons or markers

Fix

• Check that the outline is not deleted from a css property (e.g. outline:none;).
• outline:none is present

In 2.2.1, with layerControl: false defined, the selector is still displayed and doesn't work, and the markers/clusters are not displayed anymore:

In 2.1.0, it works as expected.

Popup title link color is displayed blue instead of black.

Study how to display a north-south oriented background map.

• Can the map be switched too?
• Handle map tiles?

Comment from @sandrinegateau: To make turn an overlay image: https://jsfiddle.net/3an8re7z/2/

See https://github.com/Orange-OpenSource/IOT-Map-Component/tree/rotateMap

So far, marker shadows (PNG files) are not rightly seen through the use of the component. Then markers appear on map with "broken images" behing them.

--> To bypass this issue, you need to copy PNG files contained in iotmapmanager/img and to paste them in your project (in assets/img)