fix: Accesibility reading columns and values except tags (#4122)

* fix reading columns and values except tags

* fix status badge

* fix test

Author: dbadura

src/shared/components/DynamicPageComponent/DynamicPageComponent.js

@@ -86,8 +86,12 @@ const Column = ({ title, children, columnSpan, image, style = {} }) => {
     <div className="page-header__column" style={styleComputed}>
       {image && <div className="image">{image}</div>}
       <div className="content-container">
-        <div className="title bsl-has-color-status-4 ">{title}:</div>
-        <span className="content bsl-has-color-text-1">{children}</span>
+        <div className="title bsl-has-color-status-4 " tabIndex={0}>
+          {title}:
+        </div>
+        <span className="content bsl-has-color-text-1" tabIndex={0}>
+          {children}
+        </span>
       </div>
     </div>
   );

src/shared/components/Labels/Labels.js

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import classNames from 'classnames';
 import { EMPTY_TEXT_PLACEHOLDER } from 'shared/constants';
-import { Tag, Label } from '@ui5/webcomponents-react';
+import { Label, Tag } from '@ui5/webcomponents-react';
 
 import './Labels.scss';
 

src/shared/components/StatusBadge/StatusBadge.js

@@ -131,7 +131,7 @@ export const StatusBadge = ({
     }
   }
 
-  // tooltipContent is DEPRECATED. Use the TooltipBadge component if a Badge with a simple Tooltip is needed.
+  // TODO: tooltipContent is DEPRECATED. Use the TooltipBadge component if a Badge with a simple Tooltip is needed.
   if (tooltipContent) {
     return (
       <PopoverBadge
@@ -145,7 +145,7 @@ export const StatusBadge = ({
   } else if (noTooltip) {
     return (
       <ObjectStatus
-        aria-label="Status"
+        aria-label={badgeContent}
         role="status"
         inverted
         state={type}

tests/integration/tests/namespace/test-jobs.spec.js

@@ -117,9 +117,7 @@ context('Test Jobs', () => {
       .should('exist');
 
     // status
-    cy.get('[aria-label="Status"]', { timeout: 75 * 1000 })
-      .first()
-      .contains('Completed');
+    cy.get('[aria-label="Completed"]', { timeout: 75 * 1000 });
 
     // check logs
     checkJobLogs({