fix: Card no accessible name (#4084)

akucharska · web-flow · commit 1cc5103cde14 · 2025-08-05T09:04:46.000+02:00
* fix: Card no accessible name

* Fix placement
diff --git a/src/components/Clusters/views/ClusterOverview/ClusterStats.js b/src/components/Clusters/views/ClusterOverview/ClusterStats.js
@@ -120,6 +120,7 @@ export default function ClusterStats({ nodesData }) {
         <div className="item-wrapper card-tall">
           <Card
             className="radial-chart-card item"
+            accessibleName={t('cluster-overview.statistics.cpu-usage')}
             header={
               <CardHeader
                 titleText={t('cluster-overview.statistics.cpu-usage')}
@@ -153,6 +154,7 @@ export default function ClusterStats({ nodesData }) {
         <div className="item-wrapper card-tall">
           <Card
             className="radial-chart-card item"
+            accessibleName={t('cluster-overview.statistics.memory-usage')}
             header={
               <CardHeader
                 titleText={t('cluster-overview.statistics.memory-usage')}
diff --git a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ClusterValidation.tsx
@@ -243,6 +243,7 @@ export const ClusterValidation = () => {
 const InfoTile = ({ title, content }: { title?: string; content?: string }) => {
   return (
     <Card
+      accessibleName={title}
       header={<CardHeader titleText={title} subtitleText={content} />}
       style={{ width: 'fit-content', margin: '5px' }}
     ></Card>
@@ -265,6 +266,7 @@ const Section = ({
   return (
     <FlexBox alignItems="Center" justifyContent="Center">
       <Card
+        accessibleName={titleText}
         header={
           titleText ?? subtitleText ?? status ? (
             <CardHeader
diff --git a/src/components/Clusters/views/ClusterOverview/ClusterValidation/ScanConfiguration.ts b/src/components/Clusters/views/ClusterOverview/ClusterValidation/ScanConfiguration.ts
@@ -16,7 +16,7 @@ const systemNamespaces = [
 ];
 
 export const getDefaultScanConfiguration = (
-  namespaces: string[],
+  namespaces: string[] | null,
   policies: string[],
 ): ScanConfiguration => {
   const userNamespaces =
diff --git a/src/components/Extensibility/components/RadialChart.js b/src/components/Extensibility/components/RadialChart.js
@@ -35,6 +35,7 @@ export const RadialChart = ({ structure, value, originalResource }) => {
     <div className="item-wrapper card-tall">
       <Card
         className="radial-chart-card"
+        accessibleName={t(structure?.name)}
         header={<CardHeader titleText={t(structure?.name)} />}
       >
         <UI5RadialChart
diff --git a/src/components/KymaCompanion/components/KymaCompanion.tsx b/src/components/KymaCompanion/components/KymaCompanion.tsx
@@ -58,6 +58,7 @@ export default function KymaCompanion() {
     <div id="companion_wrapper">
       <Card
         className="kyma-companion"
+        accessibleName={t('kyma-companion.name')}
         header={
           <div
             className={`kyma-companion__${
diff --git a/src/components/Modules/community/components/CommunityModuleCard.js b/src/components/Modules/community/components/CommunityModuleCard.js
@@ -52,7 +52,11 @@ export default function CommunityModuleCard({
   }, [module]);
 
   return (
-    <Card key={`card-${module.name}`} className="addModuleCard">
+    <Card
+      accessibleName={module.name}
+      key={`card-${module.name}`}
+      className="addModuleCard"
+    >
       <ListItemStandard
         className="moduleCardHeader"
         key={`list-${module.name}`}
diff --git a/src/components/Modules/components/ModulesCard.js b/src/components/Modules/components/ModulesCard.js
@@ -100,7 +100,11 @@ export default function ModulesCard({
   };
 
   return (
-    <Card key={module.name} className="addModuleCard">
+    <Card
+      accessibleName={module.name}
+      key={module.name}
+      className="addModuleCard"
+    >
       <ListItemStandard
         className="moduleCardHeader"
         onClick={() => {
diff --git a/src/components/Nodes/NodeResources/NodeResources.js b/src/components/Nodes/NodeResources/NodeResources.js
@@ -15,6 +15,7 @@ export function NodeResources({ metrics, resources }) {
     <>
       <Card
         className="radial-chart-card"
+        accessibleName={t('cluster-overview.statistics.cpu-usage')}
         header={
           <CardHeader titleText={t('cluster-overview.statistics.cpu-usage')} />
         }
@@ -36,6 +37,7 @@ export function NodeResources({ metrics, resources }) {
       </Card>
       <Card
         className="radial-chart-card"
+        accessibleName={t('cluster-overview.statistics.memory-usage')}
         header={
           <CardHeader
             titleText={t('cluster-overview.statistics.memory-usage')}
@@ -53,6 +55,7 @@ export function NodeResources({ metrics, resources }) {
       </Card>
       <Card
         className="radial-chart-card"
+        accessibleName={t('cluster-overview.statistics.cpu-requests')}
         header={
           <CardHeader
             titleText={t('cluster-overview.statistics.cpu-requests')}
@@ -84,6 +87,7 @@ export function NodeResources({ metrics, resources }) {
       </Card>
       <Card
         className="radial-chart-card"
+        accessibleName={t('cluster-overview.statistics.memory-requests')}
         header={
           <CardHeader
             titleText={t('cluster-overview.statistics.memory-requests')}
@@ -105,6 +109,7 @@ export function NodeResources({ metrics, resources }) {
       </Card>
       <Card
         className="radial-chart-card"
+        accessibleName={t('cluster-overview.statistics.cpu-limits')}
         header={
           <CardHeader titleText={t('cluster-overview.statistics.cpu-limits')} />
         }
@@ -134,6 +139,7 @@ export function NodeResources({ metrics, resources }) {
       </Card>
       <Card
         className="radial-chart-card"
+        accessibleName={t('cluster-overview.statistics.memory-limits')}
         header={
           <CardHeader
             titleText={t('cluster-overview.statistics.memory-limits')}
diff --git a/src/resources/Namespaces/ResourcesUsage.js b/src/resources/Namespaces/ResourcesUsage.js
@@ -23,6 +23,7 @@ export const ResourcesUsage = ({ namespace }) => {
     return (
       <div className="item-wrapper card-small pods-metrics-error">
         <Card
+          accessibleName={t('namespaces.overview.resources.error')}
           className="item"
           header={
             <CardHeader titleText={t('namespaces.overview.resources.error')} />
@@ -36,6 +37,7 @@ export const ResourcesUsage = ({ namespace }) => {
     <>
       <div className="item-wrapper card-tall">
         <Card
+          accessibleName={t('cluster-overview.statistics.cpu-usage')}
           className="radial-chart-card item"
           header={
             <CardHeader
@@ -69,6 +71,7 @@ export const ResourcesUsage = ({ namespace }) => {
       </div>
       <div className="item-wrapper card-tall">
         <Card
+          accessibleName={t('cluster-overview.statistics.memory-usage')}
           className="radial-chart-card item"
           header={
             <CardHeader
diff --git a/src/resources/Namespaces/YamlUpload/YamlResourcesList.js b/src/resources/Namespaces/YamlUpload/YamlResourcesList.js
@@ -135,6 +135,7 @@ export function YamlResourcesList({ resourcesData }) {
               }}
             >
               <Card
+                accessibleName={t('upload-yaml.upload-progress')}
                 header={
                   <CardHeader
                     titleText={t('upload-yaml.upload-progress')}
diff --git a/src/resources/ResourceQuotas/ResourceQuotaDetails.tsx b/src/resources/ResourceQuotas/ResourceQuotaDetails.tsx
@@ -106,6 +106,7 @@ export default function ResourceQuotaDetails(props: any) {
                 >
                   <Card
                     className="radial-chart-card"
+                    accessibleName={t(chartData.headerTitle)}
                     header={<CardHeader titleText={t(chartData.headerTitle)} />}
                   >
                     <UI5RadialChart
diff --git a/src/shared/components/CardWithTooltip/CardWithTooltip.js b/src/shared/components/CardWithTooltip/CardWithTooltip.js
@@ -13,6 +13,7 @@ const TooltipWrapper = ({ tooltipProps, children }) => {
 export const CardWithTooltip = ({ title, tooltip, children, icon }) => {
   return (
     <Card
+      accessibleName={title}
       header={
         <CardHeader
           titleText={title}
diff --git a/src/shared/components/CountingCard/CountingCard.tsx b/src/shared/components/CountingCard/CountingCard.tsx
@@ -42,6 +42,7 @@ export const CountingCard = ({
 
   return (
     <Card
+      accessibleName={title}
       className={`counting-card ${className}`}
       style={{
         width: extraInfo ? '325px' : '175px',
diff --git a/src/shared/components/FeatureCard/FeatureCard.tsx b/src/shared/components/FeatureCard/FeatureCard.tsx
@@ -100,7 +100,7 @@ export function FeatureCardBanner({
   const illustration = getIllustration(image, theme);
   return (
     <div className={`sap-margin-top-small ${className}`}>
-      <Card className="feature-card-container">
+      <Card accessibleName={title} className="feature-card-container">
         <div className="feature-card" style={getBackgroundStyle(design)}>
           <Button
             design="Transparent"
diff --git a/src/shared/components/PodTemplate/PodTemplate.js b/src/shared/components/PodTemplate/PodTemplate.js
@@ -13,6 +13,7 @@ export function PodTemplate({ template }) {
   return (
     <div className="sap-margin-x-small sap-margin-bottom-small">
       <Card
+        accessibleName={t('pods.labels.pod-template')}
         className="pod-template"
         key="pod-template"
         header={<CardHeader titleText={t('pods.labels.pod-template')} />}
diff --git a/src/shared/components/ResourceDetails/ResourceDetailsCard.js b/src/shared/components/ResourceDetails/ResourceDetailsCard.js
@@ -9,7 +9,11 @@ export default function ResourceDetailsCard({
 }) {
   return (
     <div className={`${wrapperClassname}`}>
-      <Card className={className} header={<CardHeader titleText={titleText} />}>
+      <Card
+        accessibleName={titleText}
+        className={className}
+        header={<CardHeader titleText={titleText} />}
+      >
         <div className="cluster-overview__details-grid sap-margin-small sap-margin-top-tiny">
           {content}
         </div>
diff --git a/src/shared/components/ResourceStatusCard/ResourceStatusCard.js b/src/shared/components/ResourceStatusCard/ResourceStatusCard.js
@@ -15,6 +15,7 @@ export function ResourceStatusCard({
   return (
     <div>
       <Card
+        accessibleName={t('common.headers.status')}
         header={
           <div className="resource-status-card__header">
             <CardHeader titleText={t('common.headers.status')} />

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ export const RadialChart = ({ structure, value, originalResource }) => {`
`35`	`35`	`<div className="item-wrapper card-tall">`
`36`	`36`	`<Card`
`37`	`37`	`className="radial-chart-card"`
	`38`	`+ accessibleName={t(structure?.name)}`
`38`	`39`	`header={<CardHeader titleText={t(structure?.name)} />}`
`39`	`40`	`>`
`40`	`41`	`<UI5RadialChart`
Original file line number	Diff line number	Diff line change
`@@ -135,6 +135,7 @@ export function YamlResourcesList({ resourcesData }) {`
`135`	`135`	`}}`
`136`	`136`	`>`
`137`	`137`	`<Card`
	`138`	`+ accessibleName={t('upload-yaml.upload-progress')}`
`138`	`139`	`header={`
`139`	`140`	`<CardHeader`
`140`	`141`	`titleText={t('upload-yaml.upload-progress')}`