fix: Button that redirects to different page should have accessibleRole link (#4087)

* Button that redirects to different page should have accessibleRole link

* Assessible name and description for extks

* Remove unused import

Author: akucharska

src/components/Extensibility/components/ExternalLink.js

@@ -52,6 +52,9 @@ export const ExternalLink = ({
   if (structure.type === 'button') {
     return (
       <Button
+        accessibleRole="Link"
+        accessibleName={tExt(value)}
+        accessibleDescription="Open in new tab link"
         className="sap-margin-x-tiny"
         endIcon="inspect"
         onClick={() => {
@@ -65,7 +68,13 @@ export const ExternalLink = ({
   }
 
   return (
-    <Link href={href} target="_blank" rel="noopener noreferrer">
+    <Link
+      href={href}
+      target="_blank"
+      rel="noopener noreferrer"
+      accessibleName={tExt(value)}
+      accessibleDescription="Open in new tab link"
+    >
       {tExt(value)}
       <Icon
         design="Information"

src/components/Extensibility/components/ExternalLinkButton.js

@@ -6,6 +6,9 @@ export function ExternalLinkButton({ structure }) {
 
   return (
     <Button
+      accessibleRole="Link"
+      accessibleName={structure?.name ?? t('common.buttons.learn-more')}
+      accessibleDescription="Open in new tab link"
       endIcon="inspect"
       design={structure?.emphasized ? 'Emphasized' : 'Default'}
       inline={true}

src/components/KymaCompanion/components/AIBanner/AIBanner.tsx

@@ -64,6 +64,9 @@ export function AIBanner({
             {t('kyma-companion.banner.buttons.try-joule')}
           </Button>
           <Button
+            accessibleRole="Link"
+            accessibleName={t('feedback.give-feedback')}
+            accessibleDescription="Open in new tab link"
             key="ai-feedback"
             endIcon="inspect"
             onClick={() => {
@@ -78,6 +81,9 @@ export function AIBanner({
             {t('feedback.give-feedback')}
           </Button>
           <Button
+            accessibleRole="Link"
+            accessibleName={t('kyma-companion.banner.buttons.documentation')}
+            accessibleDescription="Open in new tab link"
             key="ai-documentation"
             endIcon="inspect"
             onClick={() => {

src/components/KymaCompanion/components/Chat/FeedbackMessage/FeedbackMessage.tsx

@@ -26,6 +26,9 @@ export default function FeedbackMessage(): JSX.Element {
           subtitle={<Text>{t('kyma-companion.feedback.subtitle')}</Text>}
         >
           <Button
+            accessibleRole="Link"
+            accessibleName={t('feedback.give-feedback')}
+            accessibleDescription="Open in new tab link"
             key="ai-feedback-chat"
             endIcon="inspect"
             design="Emphasized"

src/header/Feedback/FeedbackPopover.tsx

@@ -113,6 +113,9 @@ export default function FeedbackPopover() {
                 </FlexBox>
                 <Text className="info-text">{t('feedback.joule.info')}</Text>
                 <Button
+                  accessibleRole="Link"
+                  accessibleName={t('feedback.give-feedback')}
+                  accessibleDescription="Open in new tab link"
                   design="Emphasized"
                   endIcon="inspect"
                   onClick={() => {
@@ -140,6 +143,9 @@ export default function FeedbackPopover() {
             </Title>
             <Text className="info-text">{t('feedback.kyma.info')}</Text>
             <Button
+              accessibleRole="Link"
+              accessibleName={t('feedback.give-feedback')}
+              accessibleDescription="Open in new tab link"
               endIcon="inspect"
               design={
                 !isKymaCompanionEnabled || !companionFeedbackLink

src/shared/components/ExternalLink/ExternalLink.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { Button, FlexBox, Icon, Link } from '@ui5/webcomponents-react';
 
 type LinkProps = {
@@ -35,6 +36,9 @@ export const ExternalLink = ({
   if (type === 'button') {
     return (
       <Button
+        accessibleRole="Link"
+        accessibleName={text || children?.toString() || url}
+        accessibleDescription="Open in new tab link"
         endIcon="inspect"
         design={buttonDesign}
         className="sap-margin-x-tiny"
@@ -49,7 +53,14 @@ export const ExternalLink = ({
   }
 
   return (
-    <Link design={design} href={url} target="_blank" className={linkClassName}>
+    <Link
+      design={design}
+      href={url}
+      target="_blank"
+      className={linkClassName}
+      accessibleName={text || children?.toString() || url}
+      accessibleDescription="Open in new tab link"
+    >
       <FlexBox alignItems="Center">
         {text || children || url}
         <Icon