Update icon related components after update of core-ui: Improve accessbility for icon with meaning, add tooltip to icon only button

Author: JeanMarcMilletScality

ui/src/components/DashboardGlobalHealth.tsx

@@ -61,7 +61,7 @@ const DashboardGlobalHealth = () => {
         <Box flex="1" display="flex">
           <PlatformStatusIcon>
             <StatusWrapper status={platformStatus}>
-              <StatusIcon status={platformStatus} name="Datacenter" />
+              <StatusIcon status={platformStatus} name="Datacenter" entity='Platform' />
             </StatusWrapper>
           </PlatformStatusIcon>
 

ui/src/components/DashboardInventory.tsx

@@ -102,9 +102,9 @@ const DashboardInventory = () => {
                 <InventoryIcon>
                   <StatusWrapper status={nodesStatus}>
                     <Icon
-                      name="Node-backend"
+                      name="Exclamation-circle"
                       color={getStatusColor(nodesStatus)}
-                      ariaLabel={nodesStatus}
+                      ariaLabel={`Nodes status is ${nodesStatus}`}
                     />
                   </StatusWrapper>
                 </InventoryIcon>
@@ -139,7 +139,7 @@ const DashboardInventory = () => {
                     <Icon
                       name="Volume-backend"
                       color={getStatusColor(volumesStatus)}
-                      ariaLabel={volumesStatus}
+                      ariaLabel={`Volumes status is ${volumesStatus}`}
                     />
                   </StatusWrapper>
                 </InventoryIcon>

ui/src/components/StatusIcon.tsx

@@ -7,7 +7,7 @@ import {
   STATUS_HEALTH,
 } from '../constants';
 
-const StatusIcon = ({ name, status }) => {
+const StatusIcon = ({ name, status, entity }) => {
   const color = (() => {
     switch (status) {
       case STATUS_SUCCESS:
@@ -30,7 +30,7 @@ const StatusIcon = ({ name, status }) => {
     }
   })();
 
-  return <Icon color={color} name={name} />;
+  return <Icon color={color} name={name} ariaLabel={`${entity} status is ${status}`}/>;
 };
 
 export default StatusIcon;

ui/src/containers/AlertPage.tsx

@@ -118,7 +118,7 @@ function AlertPageHeader({
         <Title>
           <AlertStatusIcon>
             <StatusWrapper status={alertStatus}>
-              <StatusIcon status={alertStatus} name="Alert" />
+              <StatusIcon status={alertStatus} name="Alert" entity='Alerts' />
             </StatusWrapper>
           </AlertStatusIcon>
           <>

ui/src/containers/CreateVolume.tsx

@@ -818,6 +818,9 @@ const CreateVolume = (props) => {
                               icon={<Icon name="Delete" />}
                               type="button"
                               onClick={() => removeLabel(key)}
+                              tooltip={{
+                                overlay: "Remove label",
+                              }}
                             />
                           </LabelsKeyValue>
                         ))}