fix(rtl): prevent horizontal scrollbar on RTL (#468)

Fixes #466 - Add workaround to prevent horizontal scrollbar appearing when charts is in RTL. - Add test to check if the scrollWidth is affected by RTL
vaadin · Apr 29, 2020 · 8334485 · 8334485
1 parent a9bfd10
commit 8334485
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 1 deletion.
diff --git a/src/vaadin-chart.html b/src/vaadin-chart.html
@@ -1074,6 +1074,19 @@
           } else {
             this.configuration = Highcharts.chart(this.$.chart, options);
           }
+
+          // Workaround for https://github.com/highcharts/highcharts/issues/9978
+          const elementsToChange = [
+            ...Array.from(this.$.chart.getElementsByTagName('h4'))
+              .filter(el => el.style.left === '-9999px'),
+            this.configuration.screenReaderRegion,
+            this.configuration.tabExitAnchor
+          ];
+
+          elementsToChange.forEach(el => {
+            el.style.left = '';
+            el.style.top = '-999em';
+          });
         }
 
         /** @private */

diff --git a/test/chart-in-rtl-test.html b/test/chart-in-rtl-test.html
@@ -0,0 +1,40 @@
+<!doctype html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>vaadin-chart tests</title>
+  <script src="../../web-component-tester/browser.js"></script>
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../../test-fixture/test-fixture.html">
+  <link rel="import" href="../../vaadin-ordered-layout/vaadin-horizontal-layout.html">
+  <link rel="import" href="../vaadin-chart.html">
+</head>
+
+<body>
+  <test-fixture id="default">
+    <template>
+      <vaadin-chart>
+        <vaadin-chart-series values="[1,7,3,1,5,6]"></vaadin-chart-series>
+      </vaadin-chart>
+    </template>
+  </test-fixture>
+  <script>
+    describe('Chart In RTL', function() {
+
+      before(function(done) {
+        fixture('default');
+
+        requestAnimationFrame(() => {
+          done();
+        });
+      });
+
+      it('chart should not create horizontal scroll on RTL', function() {
+        const scrollWidthBeforeRTL = document.documentElement.scrollWidth;
+        document.dir = 'rtl';
+
+        expect(scrollWidthBeforeRTL).to.be.equal(document.documentElement.scrollWidth);
+      });
+    });
+  </script>
+</body>
diff --git a/test/test-suites.js b/test/test-suites.js
@@ -18,5 +18,6 @@ window.VaadinChartsSuites = [
   'style-test.html',
   'element-json-merge-test.html',
   'theme-test.html',
-  'moving-chart-test.html'
+  'moving-chart-test.html',
+  'chart-in-rtl-test.html'
 ];