Skip to content

Commit 7fca8bb

Browse files
authored
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
1 parent 391240c commit 7fca8bb

File tree

6 files changed

+40
-2
lines changed

6 files changed

+40
-2
lines changed

src/components/Extensibility/components/ExternalLink.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ export const ExternalLink = ({
5252
if (structure.type === 'button') {
5353
return (
5454
<Button
55+
accessibleRole="Link"
56+
accessibleName={tExt(value)}
57+
accessibleDescription="Open in new tab link"
5558
className="sap-margin-x-tiny"
5659
endIcon="inspect"
5760
onClick={() => {
@@ -65,7 +68,13 @@ export const ExternalLink = ({
6568
}
6669

6770
return (
68-
<Link href={href} target="_blank" rel="noopener noreferrer">
71+
<Link
72+
href={href}
73+
target="_blank"
74+
rel="noopener noreferrer"
75+
accessibleName={tExt(value)}
76+
accessibleDescription="Open in new tab link"
77+
>
6978
{tExt(value)}
7079
<Icon
7180
design="Information"

src/components/Extensibility/components/ExternalLinkButton.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ export function ExternalLinkButton({ structure }) {
66

77
return (
88
<Button
9+
accessibleRole="Link"
10+
accessibleName={structure?.name ?? t('common.buttons.learn-more')}
11+
accessibleDescription="Open in new tab link"
912
endIcon="inspect"
1013
design={structure?.emphasized ? 'Emphasized' : 'Default'}
1114
inline={true}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,9 @@ export function AIBanner({
6464
{t('kyma-companion.banner.buttons.try-joule')}
6565
</Button>
6666
<Button
67+
accessibleRole="Link"
68+
accessibleName={t('feedback.give-feedback')}
69+
accessibleDescription="Open in new tab link"
6770
key="ai-feedback"
6871
endIcon="inspect"
6972
onClick={() => {
@@ -78,6 +81,9 @@ export function AIBanner({
7881
{t('feedback.give-feedback')}
7982
</Button>
8083
<Button
84+
accessibleRole="Link"
85+
accessibleName={t('kyma-companion.banner.buttons.documentation')}
86+
accessibleDescription="Open in new tab link"
8187
key="ai-documentation"
8288
endIcon="inspect"
8389
onClick={() => {

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,9 @@ export default function FeedbackMessage(): JSX.Element {
2626
subtitle={<Text>{t('kyma-companion.feedback.subtitle')}</Text>}
2727
>
2828
<Button
29+
accessibleRole="Link"
30+
accessibleName={t('feedback.give-feedback')}
31+
accessibleDescription="Open in new tab link"
2932
key="ai-feedback-chat"
3033
endIcon="inspect"
3134
design="Emphasized"

src/header/Feedback/FeedbackPopover.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,9 @@ export default function FeedbackPopover() {
113113
</FlexBox>
114114
<Text className="info-text">{t('feedback.joule.info')}</Text>
115115
<Button
116+
accessibleRole="Link"
117+
accessibleName={t('feedback.give-feedback')}
118+
accessibleDescription="Open in new tab link"
116119
design="Emphasized"
117120
endIcon="inspect"
118121
onClick={() => {
@@ -140,6 +143,9 @@ export default function FeedbackPopover() {
140143
</Title>
141144
<Text className="info-text">{t('feedback.kyma.info')}</Text>
142145
<Button
146+
accessibleRole="Link"
147+
accessibleName={t('feedback.give-feedback')}
148+
accessibleDescription="Open in new tab link"
143149
endIcon="inspect"
144150
design={
145151
!isKymaCompanionEnabled || !companionFeedbackLink

src/shared/components/ExternalLink/ExternalLink.tsx

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ReactNode } from 'react';
22
import { useTranslation } from 'react-i18next';
3+
34
import { Button, FlexBox, Icon, Link } from '@ui5/webcomponents-react';
45

56
type LinkProps = {
@@ -35,6 +36,9 @@ export const ExternalLink = ({
3536
if (type === 'button') {
3637
return (
3738
<Button
39+
accessibleRole="Link"
40+
accessibleName={text || children?.toString() || url}
41+
accessibleDescription="Open in new tab link"
3842
endIcon="inspect"
3943
design={buttonDesign}
4044
className="sap-margin-x-tiny"
@@ -49,7 +53,14 @@ export const ExternalLink = ({
4953
}
5054

5155
return (
52-
<Link design={design} href={url} target="_blank" className={linkClassName}>
56+
<Link
57+
design={design}
58+
href={url}
59+
target="_blank"
60+
className={linkClassName}
61+
accessibleName={text || children?.toString() || url}
62+
accessibleDescription="Open in new tab link"
63+
>
5364
<FlexBox alignItems="Center">
5465
{text || children || url}
5566
<Icon

0 commit comments

Comments
 (0)