feat(ui): improve accessibility (#198)

* feat(ui): improve accessibility * feat(ui): add title property to filter button * feat(ui): add C Button * remove tailwind margin on title column * add new version of rds, add align right in variables column and output column * add faC icon * feat(ui): restore my-4 margin inlist
radicalbit · Nov 18, 2024 · 8ea1e23 · 8ea1e23
1 parent 7842eb1
commit 8ea1e23
Show file tree

Hide file tree

Showing 54 changed files with 760 additions and 767 deletions.
diff --git a/ui/package.json b/ui/package.json
@@ -17,7 +17,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@grafana/faro-react": "^1.8.2",
     "@radicalbit/formbit": "1.0.0",
-    "@radicalbit/radicalbit-design-system": "^1.5.0",
+    "@radicalbit/radicalbit-design-system": "^1.6.0",
     "@reduxjs/toolkit": "^2.2.4",
     "@vitejs/plugin-react": "^4.2.1",
     "ace-builds": "^1.33.2",

diff --git a/ui/src/components/charts/predicted-actual-chart/options.js b/ui/src/components/charts/predicted-actual-chart/options.js
@@ -43,6 +43,9 @@ export default function chartOptions(dataset, xAxisLabel, yAxisLabel, color) {
     ],
     legend: {
       show: true,
+      textStyle: {
+        color: CHART_COLOR.REFERENCE_LIGHT,
+      },
       right: 0,
     },
   };

diff --git a/ui/src/container/models/Details/binary-classification/current/data-drift/list/index.jsx b/ui/src/container/models/Details/binary-classification/current/data-drift/list/index.jsx
@@ -4,7 +4,6 @@ import {
   DRIFT_FEATURE_TYPE_ENUM,
   DRIFT_TEST_ENUM_LABEL, numberFormatter,
 } from '@Src/constants';
-import { fa1, faC } from '@fortawesome/free-solid-svg-icons';
 import {
   Board,
   Button,
@@ -16,6 +15,7 @@ import {
   Tag,
 } from '@radicalbit/radicalbit-design-system';
 import { Virtuoso } from 'react-virtuoso';
+import { fa1, faC } from '@fortawesome/free-solid-svg-icons';
 import useGetFilteredFeatures from '../use-get-filtered-features';
 
 function DataDriftList() {

diff --git a/...container/models/Details/binary-classification/current/data-drift/search-filter/index.jsx b/...container/models/Details/binary-classification/current/data-drift/search-filter/index.jsx
@@ -69,6 +69,7 @@ function NumericalFilter() {
       <Toggle checked={isNumericalSelected} onClick={handleOnClick}>
         <Button
           shape="circle"
+          title="1"
           type={type}
         >
           <FontAwesomeIcon icon={fa1} />
@@ -94,6 +95,7 @@ function CategoricalFilter() {
       <Toggle checked={isCategoricalSelected} onClick={handleOnClick}>
         <Button
           shape="circle"
+          title="C"
           type={type}
         >
           <FontAwesomeIcon icon={faC} />

diff --git a/...dels/Details/binary-classification/current/data-quality/data-point-distribution/index.jsx b/...dels/Details/binary-classification/current/data-quality/data-point-distribution/index.jsx
@@ -72,9 +72,9 @@ function DataPointDistributionCounter() {
             <div className="text-3xl">{letter}</div>
           </div>
 
-          <span>
+          <p>
             {`${fullNumber} data point`}
-          </span>
+          </p>
 
         </div>
       )}
@@ -114,13 +114,13 @@ function DataPointDistributionChart() {
                 <div className="flex flex-row gap-1 items-center">
                   <Pin color={CHART_COLOR.REFERENCE_LIGHT} size="small" />
 
-                  <label>Reference</label>
+                  <span>Reference</span>
                 </div>
 
                 <div className="flex flex-row gap-1 items-center">
                   <Pin color={CHART_COLOR.CURRENT_LIGHT} size="small" />
 
-                  <label>Current</label>
+                  <span>Current</span>
                 </div>
               </div>
 

diff --git a/...-classification/current/data-quality/data-quality-list/categorical/left-table/columns.jsx b/...-classification/current/data-quality/data-quality-list/categorical/left-table/columns.jsx
@@ -1,12 +1,12 @@
 const columns = [
   {
-    title: '',
+    title: 'Metrics',
     key: 'label',
     dataIndex: 'label',
     render: (label) => <div className="font-[var(--coo-font-weight-bold)]">{label}</div>,
   },
   {
-    title: '',
+    title: 'Value',
     key: 'value',
     dataIndex: 'value',
     align: 'right',

diff --git a/...ner/models/Details/binary-classification/current/data-quality/data-quality-list/index.jsx b/...ner/models/Details/binary-classification/current/data-quality/data-quality-list/index.jsx
@@ -1,7 +1,5 @@
+import NoFeaturesAvailable from '@Components/ErrorPage/no-features';
 import { FEATURE_TYPE } from '@Container/models/Details/constants';
-import {
-  fa1, faC,
-} from '@fortawesome/free-solid-svg-icons';
 import {
   Board,
   Button,
@@ -12,7 +10,7 @@ import {
   Tag,
 } from '@radicalbit/radicalbit-design-system';
 import { Virtuoso } from 'react-virtuoso';
-import NoFeaturesAvailable from '@Components/ErrorPage/no-features';
+import { fa1, faC } from '@fortawesome/free-solid-svg-icons';
 import useGetFilteredFeatures from '../use-get-filtered-features';
 import CategoricalLeftTable from './categorical/left-table/index';
 import CategoricalRightTable from './categorical/right-table';
@@ -61,6 +59,7 @@ function NumericalFeature({ item }) {
               <Button
                 shape="circle"
                 size="small"
+                title="1"
                 type="primary"
               >
                 <FontAwesomeIcon icon={fa1} />
@@ -110,6 +109,7 @@ function CategoricalFeature({ item }) {
               <Button
                 shape="circle"
                 size="small"
+                title="C"
                 type="primary"
               >
                 <FontAwesomeIcon icon={faC} />

diff --git a/.../binary-classification/current/data-quality/data-quality-list/numerical/table/columns.jsx b/.../binary-classification/current/data-quality/data-quality-list/numerical/table/columns.jsx
@@ -1,12 +1,12 @@
 const columns = [
   {
-    title: '',
+    title: 'Metrics',
     key: 'label',
     dataIndex: 'label',
     render: (label) => <div className="font-[var(--coo-font-weight-bold)]">{label}</div>,
   },
   {
-    title: '',
+    title: 'Value',
     key: 'value',
     dataIndex: 'value',
     align: 'right',

diff --git a/...ntainer/models/Details/binary-classification/current/data-quality/search-filter/index.jsx b/...ntainer/models/Details/binary-classification/current/data-quality/search-filter/index.jsx
@@ -71,6 +71,7 @@ function NumericalFilter() {
         <Button
           onClick={handleOnClick}
           shape="circle"
+          title="1"
           type={type}
         >
           <FontAwesomeIcon icon={fa1} />
@@ -96,6 +97,7 @@ function CategoricalFilter() {
       <Toggle checked={isCategoricalSelected} onClick={handleOnClick}>
         <Button
           shape="circle"
+          title="C"
           type={type}
         >
           <FontAwesomeIcon icon={faC} />

diff --git a/ui/src/container/models/Details/binary-classification/current/imports/columns.jsx b/ui/src/container/models/Details/binary-classification/current/imports/columns.jsx
@@ -23,7 +23,7 @@ export const getColumns = (activeFilters, activeSorter) => [
     render: (date) => moment(date).format('DD MMM YYYY HH:mm:ss').toString(),
   }),
   columnFactory({
-    title: '',
+    title: 'S',
     key: 'status',
     activeFilters,
     activeSorter,

diff --git a/ui/src/container/models/Details/binary-classification/overview/outputs-tab/columns.jsx b/ui/src/container/models/Details/binary-classification/overview/outputs-tab/columns.jsx
@@ -3,10 +3,10 @@ import { OVERVIEW_ROW_TYPE } from '@Container/models/Details/constants';
 
 const outputsColumns = (dataSource) => [
   {
-    title: '',
+    title: '#',
     key: 'index',
     width: '30px',
-    render: (_, record) => <label>{dataSource.indexOf(record) + 1}</label>,
+    render: (_, record) => <span>{dataSource.indexOf(record) + 1}</span>,
   }, {
     title: 'Name',
     dataIndex: 'name',
@@ -16,7 +16,8 @@ const outputsColumns = (dataSource) => [
     dataIndex: 'type',
     key: 'type',
   }, {
-    title: '',
+    title: 'Label',
+    align: 'right',
     dataIndex: 'outputType',
     key: 'outputType',
     render: (_, record) => {

diff --git a/ui/src/container/models/Details/binary-classification/overview/variables-tab/columns.jsx b/ui/src/container/models/Details/binary-classification/overview/variables-tab/columns.jsx
@@ -1,24 +1,27 @@
-import { FEATURE_TYPE, OVERVIEW_ROW_TYPE } from '@Container/models/Details/constants';
+import {
+  FEATURE_TYPE,
+  OVERVIEW_ROW_TYPE,
+} from '@Container/models/Details/constants';
 import { useFormbitContext } from '@radicalbit/formbit';
 import { Select, Tag } from '@radicalbit/radicalbit-design-system';
 import useHandleOnSubmit from './useHandleOnSubmit';
 
 const featuresColumns = (dataSource) => [
   {
-    title: '',
+    title: '#',
     key: 'index',
     width: '2rem',
-    render: (_, record) => <label>{dataSource.indexOf(record) + 1}</label>,
-  }, {
+    render: (_, record) => <span>{dataSource.indexOf(record) + 1}</span>,
+  },
+  {
     title: 'Name',
     dataIndex: 'name',
     key: 'name',
-
-  }, {
+  },
+  {
     title: 'Type',
     dataIndex: 'type',
     key: 'type',
-
   },
   {
     title: 'Field type',
@@ -27,13 +30,18 @@ const featuresColumns = (dataSource) => [
     width: '10rem',
   },
   {
-    title: '',
+    title: 'Label',
     dataIndex: 'type',
     key: 'type',
+    align: 'right',
     width: '15rem',
     render: (_, { rowType }) => {
       if (rowType) {
-        const tagType = rowType === OVERVIEW_ROW_TYPE.GROUND_TRUTH ? 'full' : rowType === OVERVIEW_ROW_TYPE.TIMESTAMP ? 'light' : '';
+        const tagType = rowType === OVERVIEW_ROW_TYPE.GROUND_TRUTH
+          ? 'full'
+          : rowType === OVERVIEW_ROW_TYPE.TIMESTAMP
+            ? 'light'
+            : '';
         return (
           <div className="flex justify-end">
             <Tag type={tagType}>{rowType}</Tag>
@@ -47,36 +55,41 @@ const featuresColumns = (dataSource) => [
 
 const featuresColumnsWithSelection = (dataSource) => [
   {
-    title: '',
+    title: '#',
     key: 'index',
     width: '2rem',
     render: (_, record) => <label>{dataSource.indexOf(record) + 1}</label>,
-  }, {
+  },
+  {
     title: 'Name',
     dataIndex: 'name',
     key: 'name',
-
-  }, {
+  },
+  {
     title: 'Type',
     dataIndex: 'type',
     key: 'type',
-
   },
   {
     title: 'Field type',
     key: 'fieldType',
     width: '10rem',
     onCell: () => ({ style: { height: '3.5rem' } }),
-    render: (_, __, idx) => (<FieldTypeSelection variableIdx={idx} />),
+    render: (_, __, idx) => <FieldTypeSelection variableIdx={idx} />,
   },
   {
-    title: '',
+    title: 'Label',
     dataIndex: 'type',
     key: 'type',
+    align: 'right',
     width: '15rem',
     render: (_, { rowType }) => {
       if (rowType) {
-        const tagType = rowType === OVERVIEW_ROW_TYPE.GROUND_TRUTH ? 'full' : rowType === OVERVIEW_ROW_TYPE.TIMESTAMP ? 'light' : '';
+        const tagType = rowType === OVERVIEW_ROW_TYPE.GROUND_TRUTH
+          ? 'full'
+          : rowType === OVERVIEW_ROW_TYPE.TIMESTAMP
+            ? 'light'
+            : '';
         return (
           <div className="flex justify-end">
             <Tag type={tagType}>{rowType}</Tag>
@@ -106,7 +119,10 @@ function FieldTypeSelection({ variableIdx }) {
   ];
 
   const handleOnChange = (valueSelected) => {
-    write(`variables[${variableIdx}]`, { ...variables[variableIdx], fieldType: valueSelected });
+    write(`variables[${variableIdx}]`, {
+      ...variables[variableIdx],
+      fieldType: valueSelected,
+    });
   };
 
   if (typeNotEditable.includes(`${type}`) || rowType !== '') {

diff --git a/...ls/Details/binary-classification/reference/data-quality/data-point-distribution/index.jsx b/...ls/Details/binary-classification/reference/data-quality/data-point-distribution/index.jsx
@@ -74,9 +74,7 @@ function DataPointDistributionCounter() {
             <div className="text-3xl">{letter}</div>
           </div>
 
-          <label>
-            <p>{`${fullNumber} data point`}</p>
-          </label>
+          <p>{`${fullNumber} data point`}</p>
 
         </div>
       )}
@@ -113,7 +111,7 @@ function DataPointDistributionChart() {
               <div className="flex flex-row gap-1 items-center">
                 <Pin color={CHART_COLOR.REFERENCE_LIGHT} size="small" />
 
-                <label>Reference</label>
+                <span>Reference</span>
               </div>
 
             ),

diff --git a/...s/Details/binary-classification/reference/data-quality/data-point-distribution/options.js b/...s/Details/binary-classification/reference/data-quality/data-point-distribution/options.js
@@ -27,7 +27,6 @@ export default function chartOptions(title, dataset) {
       },
     ],
   };
-  console.debug('🚀 ~ chartOptions ~ options:', options);
 
   return options;
 }
diff --git a/...lassification/reference/data-quality/data-quality-list/categorical/left-table/columns.jsx b/...lassification/reference/data-quality/data-quality-list/categorical/left-table/columns.jsx
@@ -1,12 +1,12 @@
 const columns = [
   {
-    title: '',
+    title: 'Label',
     key: 'label',
     dataIndex: 'label',
     render: (label) => <div className="font-[var(--coo-font-weight-bold)]">{label}</div>,
   },
   {
-    title: '',
+    title: 'Value',
     key: 'value',
     dataIndex: 'value',
     align: 'right',

diff --git a/...r/models/Details/binary-classification/reference/data-quality/data-quality-list/index.jsx b/...r/models/Details/binary-classification/reference/data-quality/data-quality-list/index.jsx
@@ -1,8 +1,5 @@
+import NoFeaturesAvailable from '@Components/ErrorPage/no-features';
 import { FEATURE_TYPE } from '@Container/models/Details/constants';
-import {
-  fa1,
-  faC,
-} from '@fortawesome/free-solid-svg-icons';
 import {
   Board,
   Button,
@@ -13,7 +10,7 @@ import {
   Tag,
 } from '@radicalbit/radicalbit-design-system';
 import { Virtuoso } from 'react-virtuoso';
-import NoFeaturesAvailable from '@Components/ErrorPage/no-features';
+import { fa1, faC } from '@fortawesome/free-solid-svg-icons';
 import useGetFilteredFeatures from '../use-get-filtered-features';
 import CategoricalLeftTable from './categorical/left-table/index';
 import CategoricalRightTable from './categorical/right-table';
@@ -62,6 +59,7 @@ function NumericalFeature({ item }) {
               <Button
                 shape="circle"
                 size="small"
+                title="1"
                 type="primary"
               >
                 <FontAwesomeIcon icon={fa1} />
@@ -89,8 +87,8 @@ function NumericalFeature({ item }) {
           </div>
         </div>
       )}
+      modifier="my-4 "
       size="small"
-
     />
   );
 }
@@ -108,6 +106,7 @@ function CategoricalFeature({ item }) {
               <Button
                 shape="circle"
                 size="small"
+                title="C"
                 type="primary"
               >
                 <FontAwesomeIcon icon={faC} />
-Original file line number
+Diff line change
@@ Expand Up / @@ -27,7 +27,6 @@ export default function chartOptions(title, dataset) { @@
           },
         ],
       };
-      console.debug('🚀 ~ chartOptions ~ options:', options);
       return options;
     }