[ML] (Accessibility) Fix page heading structure (#56741)

* [ML] (Accessibility) Fix page heading structure * [ML] Fix file datavisualizer SCSS import * [ML] Switch to EuiTitle for influencers list and data viz cards * [ML] Fix positioning of chart tooltip in Single Metric Viewer
elastic · Feb 6, 2020 · 595c869 · 595c869
1 parent 927be66
commit 595c869
Show file tree

Hide file tree

Showing 37 changed files with 1,547 additions and 1,358 deletions.
diff --git a/...cy/plugins/ml/public/application/components/create_job_link_card/create_job_link_card.tsx b/...cy/plugins/ml/public/application/components/create_job_link_card/create_job_link_card.tsx
@@ -67,7 +67,7 @@ export const CreateJobLinkCard: FC<Props> = ({
           </EuiFlexItem>
           <EuiFlexItem>
             <EuiTitle size="s">
-              <h4>{title}</h4>
+              <h3>{title}</h3>
             </EuiTitle>
             <EuiText color="subdued">
               <p>{description}</p>

diff --git a/...k/legacy/plugins/ml/public/application/components/influencers_list/_influencers_list.scss b/...k/legacy/plugins/ml/public/application/components/influencers_list/_influencers_list.scss
@@ -15,23 +15,23 @@
   }
 
   .progress {
-    display:inline-block;
-    width: calc(100% - 34px); // SASSTODO: Calc porper value
+    display: inline-block;
+    width: calc(100% - 34px); // SASSTODO: Calc proper value
     height: 22px;
     min-width: 70px;
     margin-bottom: 0px;
     color: $euiColorDarkShade;
-    background-color : transparent;
+    background-color: transparent;
 
     .progress-bar-holder {
-      width: calc(100% - 28px); // SASSTODO: Calc porper value
+      width: calc(100% - 28px); // SASSTODO: Calc proper value
     }
 
     .progress-bar {
       height: $euiSizeXS / 2;
       margin-top: $euiSizeM;
       text-align: right;
-      line-height: 18px; // SASSTODO: Calc porper value
+      line-height: 18px; // SASSTODO: Calc proper value
       display: inline-block;
       transition: none;
     }
@@ -42,6 +42,7 @@
     .progress-bar {
       background-color: $mlColorCritical;
     }
+
     .score-label {
       border-color: $mlColorCritical;
     }
@@ -51,6 +52,7 @@
     .progress-bar {
       background-color: $mlColorMajor;
     }
+
     .score-label {
       border-color: $mlColorMajor;
     }
@@ -60,6 +62,7 @@
     .progress-bar {
       background-color: $mlColorMinor;
     }
+
     .score-label {
       border-color: $mlColorMinor;
     }
@@ -69,6 +72,7 @@
     .progress-bar {
       background-color: $mlColorWarning;
     }
+
     .score-label {
       border-color: $mlColorWarning;
     }
@@ -99,8 +103,7 @@
   }
 }
 
-  // SASSTODO: Can .eui-textBreakAll
+// SASSTODO: Can .eui-textBreakAll
 .ml-influencers-list-tooltip {
   word-break: break-all;
 }
-
diff --git a/x-pack/legacy/plugins/ml/public/application/components/influencers_list/influencers_list.js b/x-pack/legacy/plugins/ml/public/application/components/influencers_list/influencers_list.js
@@ -11,7 +11,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText, EuiTitle, EuiToolTip } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle, EuiToolTip } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { abbreviateWholeNumber } from '../../formatters/abbreviate_whole_number';
@@ -115,7 +115,7 @@ function InfluencersByName({ influencerFieldName, influencerFilter, fieldValues
   return (
     <React.Fragment key={influencerFieldName}>
       <EuiTitle size="xs" data-test-subj={`mlInfluencerFieldName ${influencerFieldName}`}>
-        <h4>{influencerFieldName}</h4>
+        <h3>{influencerFieldName}</h3>
       </EuiTitle>
       <EuiSpacer size="xs" />
       {influencerValues}
@@ -131,17 +131,17 @@ InfluencersByName.propTypes = {
 export function InfluencersList({ influencers, influencerFilter }) {
   if (influencers === undefined || Object.keys(influencers).length === 0) {
     return (
-      <EuiFlexGroup justifyContent="spaceAround">
+      <EuiFlexGroup justifyContent="spaceAround" className="ml-influencers-list">
         <EuiFlexItem grow={false}>
           <EuiSpacer size="xxl" />
-          <EuiText>
-            <h4>
+          <EuiTitle size="xs" className="influencer-title">
+            <h3>
               <FormattedMessage
                 id="xpack.ml.influencersList.noInfluencersFoundTitle"
                 defaultMessage="No influencers found"
               />
-            </h4>
-          </EuiText>
+            </h3>
+          </EuiTitle>
         </EuiFlexItem>
       </EuiFlexGroup>
     );

diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx b/x-pack/legacy/plugins/ml/public/application/datavisualizer/datavisualizer_selector.tsx
@@ -62,12 +62,12 @@ export const DatavisualizerSelector: FC = () => {
           <EuiFlexGroup gutterSize="xl">
             <EuiFlexItem grow={false}>
               <EuiTitle size="l">
-                <h2>
+                <h1>
                   <FormattedMessage
                     id="xpack.ml.datavisualizer.selector.dataVisualizerTitle"
                     defaultMessage="Data Visualizer"
                   />
-                </h2>
+                </h1>
               </EuiTitle>
             </EuiFlexItem>
           </EuiFlexGroup>

diff --git a/.../legacy/plugins/ml/public/application/datavisualizer/file_based/_file_datavisualizer.scss b/.../legacy/plugins/ml/public/application/datavisualizer/file_based/_file_datavisualizer.scss
diff --git a/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/_index.scss b/x-pack/legacy/plugins/ml/public/application/datavisualizer/file_based/_index.scss
@@ -1,2 +1 @@
-@import 'file_datavisualizer';
 @import 'components/index';
diff --git a/...ins/ml/public/application/datavisualizer/file_based/components/about_panel/about_panel.js b/...ins/ml/public/application/datavisualizer/file_based/components/about_panel/about_panel.js
@@ -60,12 +60,12 @@ export function LoadingPanel() {
         <EuiPageContent className="file-datavisualizer-about-panel__content" paddingSize="l">
           <div style={{ textAlign: 'center' }}>
             <EuiTitle size="s">
-              <h3 role="alert">
+              <h1 role="alert">
                 <FormattedMessage
                   id="xpack.ml.fileDatavisualizer.aboutPanel.analyzingDataTitle"
                   defaultMessage="Analyzing data"
                 />
-              </h3>
+              </h1>
             </EuiTitle>
 
             <EuiSpacer size="l" />

diff --git a/...ml/public/application/datavisualizer/file_based/components/about_panel/welcome_content.js b/...ml/public/application/datavisualizer/file_based/components/about_panel/welcome_content.js
@@ -27,7 +27,7 @@ export function WelcomeContent() {
       </EuiFlexItem>
       <EuiFlexItem>
         <EuiTitle size="m">
-          <h3>
+          <h1>
             <FormattedMessage
               id="xpack.ml.fileDatavisualizer.welcomeContent.visualizeDataFromLogFileTitle"
               defaultMessage="Visualize data from a log file&nbsp;{experimentalBadge}"
@@ -44,7 +44,7 @@ export function WelcomeContent() {
                 ),
               }}
             />
-          </h3>
+          </h1>
         </EuiTitle>
         <EuiSpacer size="s" />
         <EuiText>

diff --git a/...lic/application/datavisualizer/file_based/components/analysis_summary/analysis_summary.js b/...lic/application/datavisualizer/file_based/components/analysis_summary/analysis_summary.js
@@ -15,12 +15,12 @@ export function AnalysisSummary({ results }) {
   return (
     <React.Fragment>
       <EuiTitle size="s">
-        <h3>
+        <h2>
           <FormattedMessage
             id="xpack.ml.fileDatavisualizer.analysisSummary.summaryTitle"
             defaultMessage="Summary"
           />
-        </h3>
+        </h2>
       </EuiTitle>
 
       <EuiSpacer size="m" />

diff --git a/...ml/public/application/datavisualizer/file_based/components/file_contents/file_contents.js b/...ml/public/application/datavisualizer/file_based/components/file_contents/file_contents.js
@@ -22,12 +22,12 @@ export function FileContents({ data, format, numberOfLines }) {
   return (
     <React.Fragment>
       <EuiTitle size="s">
-        <h3>
+        <h2>
           <FormattedMessage
             id="xpack.ml.fileDatavisualizer.fileContents.fileContentsTitle"
             defaultMessage="File contents"
           />
-        </h3>
+        </h2>
       </EuiTitle>
 
       <div>

diff --git a/...datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js b/...datavisualizer/file_based/components/file_datavisualizer_view/file_datavisualizer_view.js
@@ -36,6 +36,7 @@ export class FileDataVisualizerView extends Component {
 
     this.state = {
       files: {},
+      fileName: '',
       fileContents: '',
       fileSize: 0,
       fileTooLarge: false,
@@ -71,6 +72,7 @@ export class FileDataVisualizerView extends Component {
         loading: files.length > 0,
         bottomBarVisible: files.length > 0,
         loaded: false,
+        fileName: '',
         fileContents: '',
         fileSize: 0,
         fileTooLarge: false,
@@ -93,6 +95,7 @@ export class FileDataVisualizerView extends Component {
         const data = fileContents.data;
         this.setState({
           fileContents: data,
+          fileName: file.name,
           fileSize: file.size,
         });
 
@@ -110,6 +113,7 @@ export class FileDataVisualizerView extends Component {
         loaded: false,
         loading: false,
         fileTooLarge: true,
+        fileName: file.name,
         fileSize: file.size,
       });
     }
@@ -240,6 +244,7 @@ export class FileDataVisualizerView extends Component {
       loaded,
       results,
       fileContents,
+      fileName,
       fileSize,
       fileTooLarge,
       fileCouldNotBeRead,
@@ -256,7 +261,7 @@ export class FileDataVisualizerView extends Component {
         : [];
 
     return (
-      <div className="file-datavisualizer__content">
+      <div>
         {mode === MODE.READ && (
           <React.Fragment>
             {!loading && !loaded && <AboutPanel onFilePickerChange={this.onFilePickerChange} />}
@@ -275,6 +280,7 @@ export class FileDataVisualizerView extends Component {
             {loaded && (
               <ResultsView
                 results={results}
+                fileName={fileName}
                 data={fileContents}
                 showEditFlyout={() => this.showEditFlyout()}
               />
@@ -304,8 +310,8 @@ export class FileDataVisualizerView extends Component {
           <React.Fragment>
             <ImportView
               results={results}
+              fileName={fileName}
               fileContents={fileContents}
-              fileSize={fileSize}
               indexPatterns={this.props.indexPatterns}
               kibanaConfig={this.props.kibanaConfig}
               showBottomBar={this.showBottomBar}