diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md
index 42188682a9e..f01ddf6a5c1 100644
--- a/packages/terra-core-docs/CHANGELOG.md
+++ b/packages/terra-core-docs/CHANGELOG.md
@@ -3,19 +3,17 @@
## Unreleased
* Added
+ * Added accessibility guide for `terra-hyperlink`
* Added Accessibility guideline for `terra-heading`
* Added examples for for `terra-list`
-
-* Changed
- * Added tests for `terra-list`.
- * Fix second example on default Paginator doc page
-
-* Added
* Added Accessibility Guide for `terra-section-header`
* Added accessibility guide for `terra-progress-bar`
* Added accessibility guide for `terra-avatar`
-
+
* Changed
+ * Added tests for `terra-list`.
+ * Fix second example on default Paginator doc page
+ * Updated example for `terra-hyperlink`
* Updated example for `terra-progress-bar`
## 1.23.0 - (March 1, 2023)
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/About.1.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/About.1.doc.mdx
index 4deb04d0f35..6843bea760e 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/About.1.doc.mdx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/About.1.doc.mdx
@@ -1,12 +1,11 @@
import { Badge } from 'terra-hyperlink/package.json?dev-site-package';
import DefaultHyperlink from './example/DefaultHyperlink?dev-site-example';
+import DefaultHyperlinkButton from './example/DefaultHyperlinkButton?dev-site-example';
import Audio from './example/AudioHyperlink?dev-site-example';
-import Disabled from './example/DisabledHyperlink?dev-site-example';
import Document from './example/DocumentHyperlink?dev-site-example';
import External from './example/ExternalHyperlink?dev-site-example';
import Image from './example/ImageHyperlink?dev-site-example';
-import UnderlineHidden from './example/UnderlineHiddenHyperlink?dev-site-example';
import Video from './example/VideoHyperlink?dev-site-example';
import HyperlinkPropsTable from 'terra-hyperlink/src/Hyperlink?dev-site-props-table';
@@ -17,6 +16,13 @@ import HyperlinkPropsTable from 'terra-hyperlink/src/Hyperlink?dev-site-props-ta
The terra hyperlink component allows linking to other web pages, files, locations within the same page, email addresses, or any other URL.
+
+## Terra Hyperlink Button
+
+Similar to the standard hyperlinks, there are times when applications may need to use a button element and add a onClick function to navigate the user, instead of a traditional anchor `` element with an `href` attribute for URL routing.
+
+Terra Hyperlink Button can be created by providing callback / handler to `onClick` prop. Hyperlink Button is intended to communicate both visually to sighted users and to accessible users relying on assistive technology, that the interactive element is still a link, with the intention of navigating a user somewhere (contrasted with standard buttons which communicate that user can take an action).
+
## Getting Started
- Install with [npmjs](https://www.npmjs.com):
@@ -31,6 +37,7 @@ This component requires the following peer dependencies be installed in your app
|-|-|
| react | ^16.8.5 |
| react-dom | ^16.8.5 |
+| react-intl | ^2.8.0 |
@@ -46,13 +53,12 @@ import Hyperlink from 'terra-hyperlink';
## Examples
-
+
-
## Hyperlink Props
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/AccessibilityGuide.2.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/AccessibilityGuide.2.doc.mdx
new file mode 100644
index 00000000000..90e08705769
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/AccessibilityGuide.2.doc.mdx
@@ -0,0 +1,124 @@
+import { Badge } from 'terra-hyperlink/package.json?dev-site-package';
+import { Notice } from '@cerner/terra-docs';
+import Whitespace from "../../common/layout-helpers/Whitespace";
+
+
+
+# Accessibility Guide for Terra Hyperlink
+
+
+
+1. For each use of Terra Hyperlink, special care needs to be taken to ensure **the link text alone should convey the function and purpose of the link**.
+2. Hyperlinks **must have a non-empty href** in order to be considered true links and to be accessible to keyboard users.
+
+
+
+
+
+### Why is this important?
+
+Hyperlinks are one of HTML's foundational elements, so making links accessible is essential. Hyperlinks are a vital tool for creating an intuitive user experience. However, because links are so fundamental to the functionality of web content, inaccessible or improperly implemented links can be a severe barrier to overall accessibility.
+
+Accessible hyperlinks are critical to ensure all users can effectively understand and use them. For example:
+
+- **Blind screen reader users** do not necessarily interact with pages in a linear fashion and can use hyperlinks out of context. They need the words within the link to be descriptive of purpose.
+- **People using speech input software** require unique links to effectively activate the link they would like to follow.
+- **Keyboard only users** navigate the page using only a keyboard. A visible keyboard focus is crucial to see where they are on the page.
+- **People unable to perceive colors** need links to be perceivably distinct from the surrounding text. The use of underlines or other non-colored indicators will help users who may not see color.
+
+
+
+## Accessibility Considerations:
+
+### Code Considerations
+
+Terra Hyperlink can be used as: _Hyperlink_ and _Hyperlink Button_. The table below explains the difference between the two.
+
+| Variant | Purpose | Example import |
+| --- | --- | --- |
+| Hyperlink | Represents a basic HTML hyperlink (a hypertext anchor) labeled by its contents. This variant must have an `href` prop. |
+| Hyperlink Button | Represents a basic HTML button that triggers hyperlink navigation via the required `onClick` event handler prop. |
+
+#### Developers must ensure the following code considerations:
+
+- Do not override `role=link`.
+ - Use the component variant that best matches the intended usage.
+- If non-unique link text must be used, e.g. `Learn more`, ensure the link is programmatically associated with other content that describes its purpose.
+- Ensure that action is not taken on a hyperlink when it receives focus or when the focus leaves a hyperlink.
+- Action on a hyperlink always occurs on the `onmouseup` or `onkeyup` event.
+- Links must have a non-empty `href` to be considered proper links and accessible to keyboard users.
+- Link Buttons must have an callback provided for `onClick` and must ignore `href` to be considered proper link buttons and accessible to keyboard users.
+- Ensure that links with icons follow meaningful or decorative use guidelines.
+ - Meaningful icons must have appropriate alternative text in the `alt` attribute.
+ - Decorative icons must be marked as decorative.
+
+
+
+### Content Considerations:
+
+> It is most important for link text to make sense without the surrounding sentences or content. The link text alone should convey the function and purpose of the link. Link text should also be unique and easy to speak out loud.
+>
+> Consider these guidelines when writing link text:
+>
+> - Use text that is unique and descriptive of the link's purpose.
+> - Avoid link text like “Click Here,” “More,” and “Read More.” These kinds of links can be confusing when a screen reader reads them out of context. These types of non-unique links prevent speech input users may from accurately activating them.
+> - It is OK to link a full sentence, but avoid longer.
+> - Use judgment when linking full URLs. When linking a URL, consider screen reader users that must listen to their device announcing the linked URL.
+>
+> _ — excerpt from ["Usability & Web Accessibility Articles: Links"](https://usability.yale.edu/web-accessibility/articles/links)_[[1]](/components/cerner-terra-core-docs/hyperlink/accessibility-guide#linked-references)
+
+
+
+## Usability Expectations:
+
+Users expect links to open a new page, take them somewhere on the page, or to download a file.
+
+### Interaction Details
+
+Mouse users expect the cursor to change to a hand with pointing finger when the link is hovered. Keyboard only users expect to see a visible keyboard focus indicator when the link is in focus.
+
+### Keyboard Navigation
+
+Hyperlinks have the following keyboard navigation expectations:
+
+| Key/Sequence | Description |
+|---|---|
+|**Tab**| Puts Focus on the hyperlink. |
+|**Enter**| Executes the link and moves focus to the link target. |
+
+## Support Compliance
+
+Terra is committed to ensuring its components provide maximum possible accessibility. However, using Terra components will not automatically make a product accessible.
+
+Final responsibility lies with the consumers of Terra components — ensuring proper usage, engineers following correct implementation patterns, and authors crafting content that follows best practice guidance — to make a product fully accessible.
+
+### WCAG Resources
+
+#### Success Criteria
+
+_Terra Hyperlink **must** meet the following success criteria:_
+
+- [**1.1.1 Non-text Content**](https://www.w3.org/WAI/WCAG21/quickref/#non-text-content) - All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed\[...\]. (Level A)
+- [**1.3.1 Info and Relationships**](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) - The intent of this Success Criterion is to ensure that information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes. For example, the presentation format changes when the content is read by a screen reader.
+- [**2.4.4 Link Purpose**](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context.html) - The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.
+- [**2.5.3 Label in Name**](https://www.w3.org/WAI/WCAG21/Understanding/label-in-name.html) — For user interface components with labels that include text or images of text, the name contains the text that is presented visually.
+- [**3.2.4 Consistent Identification**](https://www.w3.org/WAI/WCAG21/Understanding/consistent-identification.html) — Content creators must ensure icons used within hyperlinks are used consistently for the same function.
+
+### Supported Features & Technology
+
+- JAWS Support with Chrome (PC)
+- NVDA Support with Chrome (PC)
+- VoiceOver Support with Chrome, Safari (MAC)
+- Mobile Touch Interactions with Screen Reader assistive technology
+- Speech Input Interactions with assistive technology
+
+### Partial Support & Requiring Further Enhancement
+
+- None identified
+- [Report a problem with this component on **GitHub**](https://github.com/cerner/terra-core/issues/new/choose)
+
+_For more information about Accessibility Support with Terra — go to [Component Standards: Accessibility (A11y)](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#accessibility-a11y)._
+
+## Linked References:
+
+1. Yale staff (2022) ["Usability & Web Accessibility Articles: Links"](https://usability.yale.edu/web-accessibility/articles/links). Yale. Retrieved 21 April 2022.
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/ChangeLog.3.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/ChangeLog.4.doc.mdx
similarity index 100%
rename from packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/ChangeLog.3.doc.mdx
rename to packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/ChangeLog.4.doc.mdx
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/UpgradeGuide.2.doc.mdx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/UpgradeGuide.3.doc.mdx
similarity index 100%
rename from packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/UpgradeGuide.2.doc.mdx
rename to packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/UpgradeGuide.3.doc.mdx
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/AudioHyperlink.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/AudioHyperlink.jsx
index 1d80ae4d86d..255d31da6f7 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/AudioHyperlink.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/AudioHyperlink.jsx
@@ -1,4 +1,4 @@
import React from 'react';
import Hyperlink from 'terra-hyperlink';
-export default () => Audio hyperlink;
+export default () => ;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DefaultHyperlink.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DefaultHyperlink.jsx
index 01a154d3228..fc0c60358d7 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DefaultHyperlink.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DefaultHyperlink.jsx
@@ -1,4 +1,4 @@
import React from 'react';
import Hyperlink from 'terra-hyperlink';
-export default () => Default hyperlink;
+export default () => ;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DefaultHyperlinkButton.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DefaultHyperlinkButton.jsx
new file mode 100644
index 00000000000..17924278878
--- /dev/null
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DefaultHyperlinkButton.jsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import HyperlinkButton from 'terra-hyperlink';
+
+export default () => {}} text="Default hyperlink button" />;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DisabledHyperlink.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DisabledHyperlink.jsx
deleted file mode 100644
index a962b76e740..00000000000
--- a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DisabledHyperlink.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-import Hyperlink from 'terra-hyperlink';
-
-export default () => Disabled hyperlink;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DocumentHyperlink.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DocumentHyperlink.jsx
index 4ec06d5aa3e..4d7030bd5ea 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DocumentHyperlink.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/DocumentHyperlink.jsx
@@ -1,4 +1,4 @@
import React from 'react';
import Hyperlink from 'terra-hyperlink';
-export default () => Document hyperlink;
+export default () => ;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/ExternalHyperlink.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/ExternalHyperlink.jsx
index bcf44554956..ffc19cf705e 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/ExternalHyperlink.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/ExternalHyperlink.jsx
@@ -1,4 +1,4 @@
import React from 'react';
import Hyperlink from 'terra-hyperlink';
-export default () => External hyperlink;
+export default () => ;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/ImageHyperlink.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/ImageHyperlink.jsx
index 9e64e6e2d49..90882d30f83 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/ImageHyperlink.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/ImageHyperlink.jsx
@@ -1,4 +1,4 @@
import React from 'react';
import Hyperlink from 'terra-hyperlink';
-export default () => Image hyperlink;
+export default () => ;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/UnderlineHiddenHyperlink.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/UnderlineHiddenHyperlink.jsx
deleted file mode 100644
index 57102f94ac7..00000000000
--- a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/UnderlineHiddenHyperlink.jsx
+++ /dev/null
@@ -1,4 +0,0 @@
-import React from 'react';
-import Hyperlink from 'terra-hyperlink';
-
-export default () => Underline hidden hyperlink;
diff --git a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/VideoHyperlink.jsx b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/VideoHyperlink.jsx
index 07ac2e6e29b..371c2919895 100644
--- a/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/VideoHyperlink.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/doc/hyperlink/example/VideoHyperlink.jsx
@@ -1,4 +1,4 @@
import React from 'react';
import Hyperlink from 'terra-hyperlink';
-export default () => Video hyperlink;
+export default () => ;
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/AudioHyperlink.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/AudioHyperlink.test.jsx
index 4b04c74f6dd..cf17f362e44 100644
--- a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/AudioHyperlink.test.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/AudioHyperlink.test.jsx
@@ -3,6 +3,6 @@ import Hyperlink from 'terra-hyperlink';
export default () => (
- Audio hyperlink
+
);
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DefaultHyperlink.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DefaultHyperlink.test.jsx
index d3231c07e77..5e44093cb96 100644
--- a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DefaultHyperlink.test.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DefaultHyperlink.test.jsx
@@ -3,6 +3,6 @@ import Hyperlink from 'terra-hyperlink';
export default () => (
- Default hyperlink
+
);
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DisabledHyperlink.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DisabledHyperlink.test.jsx
index 0499686a92f..42b3520aeb4 100644
--- a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DisabledHyperlink.test.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DisabledHyperlink.test.jsx
@@ -3,8 +3,8 @@ import Hyperlink from 'terra-hyperlink';
export default () => (
- Disabled hyperlink
+
- Disabled icon hyperlink
+
);
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DocumentHyperlink.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DocumentHyperlink.test.jsx
index 6bdafce7939..2d3634465bd 100644
--- a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DocumentHyperlink.test.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/DocumentHyperlink.test.jsx
@@ -3,6 +3,6 @@ import Hyperlink from 'terra-hyperlink';
export default () => (
- Document hyperlink
+
);
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ExternalHyperlink.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ExternalHyperlink.test.jsx
index f7dc657e74f..f3782b399d0 100644
--- a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ExternalHyperlink.test.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ExternalHyperlink.test.jsx
@@ -3,6 +3,6 @@ import Hyperlink from 'terra-hyperlink';
export default () => (
- External hyperlink
+
);
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/IconNonWrappingHyperlink.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/IconNonWrappingHyperlink.test.jsx
index d0d4fddb559..c1a24c397fc 100644
--- a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/IconNonWrappingHyperlink.test.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/IconNonWrappingHyperlink.test.jsx
@@ -4,7 +4,7 @@ import Hyperlink from 'terra-hyperlink';
export default () => (
Example of a hyperlink inside some content that will wrap. With this, the icon should not wrap onto a separate line without the link text. I am a
- Document hyperlink
+
{' '}
that is forced to wrap due to space constraints. My icon wraps with me.
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ImageHyperlink.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ImageHyperlink.test.jsx
index 8c6aad8fdba..8af42aa39cc 100644
--- a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ImageHyperlink.test.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ImageHyperlink.test.jsx
@@ -3,6 +3,6 @@ import Hyperlink from 'terra-hyperlink';
export default () => (
- Image hyperlink
+
);
diff --git a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ProgrammaticFocus.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ProgrammaticFocus.test.jsx
index beece5024cf..8e4c71530b0 100644
--- a/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ProgrammaticFocus.test.jsx
+++ b/packages/terra-core-docs/src/terra-dev-site/test/hyperlink/ProgrammaticFocus.test.jsx
@@ -4,7 +4,10 @@ import Hyperlink from 'terra-hyperlink';
export default () => (
<>
- Hyperlink
+
+
+
+ {}} text="Hyperlink Button" />
);
}
}
@@ -216,4 +283,4 @@ Hyperlink.defaultProps = defaultProps;
Hyperlink.contextType = ThemeContext;
export { variants as HyperlinkVariants };
-export default Hyperlink;
+export default injectIntl(Hyperlink);
diff --git a/packages/terra-hyperlink/src/Hyperlink.module.scss b/packages/terra-hyperlink/src/Hyperlink.module.scss
index a1d7533a7ed..6c1e739bd13 100644
--- a/packages/terra-hyperlink/src/Hyperlink.module.scss
+++ b/packages/terra-hyperlink/src/Hyperlink.module.scss
@@ -9,7 +9,9 @@
cursor: pointer;
display: inline-block; // prevents variant icon from breaking onto its own line
outline: none;
- text-decoration: var(--terra-hyperlink-text-decoration, none);
+ text-decoration: var(--terra-hyperlink-text-decoration, underline);
+ touch-action: manipulation; // Enable fast tap interaction in webkit browsers; see https://webkit.org/blog/5610/more-responsive-tapping-on-ios/
+ vertical-align: baseline;
&:visited,
&.is-visited {
@@ -47,6 +49,7 @@
cursor: default;
pointer-events: none;
text-decoration: var(--terra-hyperlink-disabled-text-decoration, none);
+ touch-action: auto;
}
}
@@ -76,6 +79,71 @@
}
.icon {
- margin-left: var(--terra-hyperlink-icon-margin-left, 0.5em);
+ display: inline-block;
+ font-size: var(--terra-hyperlink-icon-font-size, 1em);
+ margin-left: var(--terra-hyperlink-icon-margin-left, 0.28571em);
+ overflow: visible;
+ position: relative;
}
+
+ .audio {
+ .icon {
+ font-size: var(--terra-hyperlink-audio-icon-font-size, 0.92857em);
+ }
+ }
+
+ .document {
+ .icon {
+ margin-left: var(--terra-hyperlink-document-icon-margin-left, 0.21428em);
+ }
+ }
+
+ .external {
+ .icon {
+ bottom: var(--terra-hyperlink-external-icon-bottom, 0.03571em);
+ font-size: var(--terra-hyperlink-external-icon-font-size, 0.85714em);
+ margin-left: var(--terra-hyperlink-external-icon-margin-left, 0.28571em);
+ }
+ }
+
+ .image {
+ .icon {
+ bottom: var(--terra-hyperlink-image-icon-bottom, -0.07142em);
+ }
+ }
+
+ .video {
+ .icon {
+ bottom: var(--terra-hyperlink-video-icon-bottom, -0.07142em);
+ }
+ }
+
+ // Resets for Hyperlink-Button
+ .button-reset {
+ border: 0 none;
+ display: inline-block; // prevents variant icon from breaking onto its own line
+ font-family: inherit;
+ font-size: 1em;
+ left: 0; // reset for IE
+ line-height: inherit;
+ margin: 0; // reset for Safari, defaults to 2px
+ outline: none;
+ overflow: visible; // reset for IE
+ padding: 0;
+ pointer-events: auto;
+ position: relative; // reset for IE
+ text-align: left;
+ top: 0; // reset for IE
+ touch-action: manipulation; // Enable fast tap interaction in webkit browsers; see https://webkit.org/blog/5610/more-responsive-tapping-on-ios/
+ vertical-align: baseline;
+
+ .button-inner {
+ font-family: inherit;
+ left: 0; // reset for IE
+ line-height: inherit;
+ min-width: 0;
+ position: relative; // reset for IE
+ top: 0; // reset for IE
+ }
+ }
}
diff --git a/packages/terra-hyperlink/src/clinical-lowlight-theme/Hyperlink.module.scss b/packages/terra-hyperlink/src/clinical-lowlight-theme/Hyperlink.module.scss
index 7d10486f089..d023bdc0a32 100644
--- a/packages/terra-hyperlink/src/clinical-lowlight-theme/Hyperlink.module.scss
+++ b/packages/terra-hyperlink/src/clinical-lowlight-theme/Hyperlink.module.scss
@@ -1,7 +1,7 @@
:local {
.clinical-lowlight-theme {
--terra-hyperlink-color: #007ee0;
- --terra-hyperlink-text-decoration: none;
+ --terra-hyperlink-text-decoration: underline;
--terra-hyperlink-visited-color: #007ee0;
--terra-hyperlink-visited-focus-color: #007ee0;
--terra-hyperlink-hover-background-color: transparent;
@@ -20,6 +20,14 @@
--terra-hyperlink-underline-hidden-hover-color: #007ee0;
--terra-hyperlink-underline-hidden-visited-color: #007ee0;
--terra-hyperlink-underline-hidden-visited-focus-color: #007ee0;
- --terra-hyperlink-icon-margin-left: 0.5em;
+ --terra-hyperlink-icon-font-size: 1em;
+ --terra-hyperlink-icon-margin-left: 0.28571em;
+ --terra-hyperlink-icon-audio-font-size: 0.92857em;
+ --terra-hyperlink-icon-document-margin-left: 0.21428em;
+ --terra-hyperlink-icon-external-bottom: 0.03571em;
+ --terra-hyperlink-icon-external-font-size: 0.85714em;
+ --terra-hyperlink-icon-external-margin-left: 0.28571em;
+ --terra-hyperlink-icon-image-bottom: -0.07142em;
+ --terra-hyperlink-icon-video-bottom: -0.07142em;
}
}
diff --git a/packages/terra-hyperlink/src/orion-fusion-theme/Hyperlink.module.scss b/packages/terra-hyperlink/src/orion-fusion-theme/Hyperlink.module.scss
index 691c476fda6..eade5fa7c3a 100644
--- a/packages/terra-hyperlink/src/orion-fusion-theme/Hyperlink.module.scss
+++ b/packages/terra-hyperlink/src/orion-fusion-theme/Hyperlink.module.scss
@@ -1,7 +1,7 @@
:local {
.orion-fusion-theme {
--terra-hyperlink-color: #0065a3;
- --terra-hyperlink-text-decoration: none;
+ --terra-hyperlink-text-decoration: underline;
--terra-hyperlink-visited-color: #0065a3;
--terra-hyperlink-visited-focus-color: #004c76;
--terra-hyperlink-hover-background-color: transparent;
@@ -20,6 +20,14 @@
--terra-hyperlink-underline-hidden-hover-color: #004c76;
--terra-hyperlink-underline-hidden-visited-color: #0065a3;
--terra-hyperlink-underline-hidden-visited-focus-color: #004c76;
- --terra-hyperlink-icon-margin-left: 0.5em;
+ --terra-hyperlink-icon-font-size: 1.16667em;
+ --terra-hyperlink-icon-margin-left: 0.375em;
+ --terra-hyperlink-audio-icon-font-size: 1.08333em;
+ --terra-hyperlink-document-icon-margin-left: 0.25em;
+ --terra-hyperlink-external-icon-bottom: 0;
+ --terra-hyperlink-external-icon-font-size: 1em;
+ --terra-hyperlink-external-icon-margin-left: 0.41667em;
+ --terra-hyperlink-image-icon-bottom: -0.08333em;
+ --terra-hyperlink-video-icon-bottom: -0.08333em;
}
}
diff --git a/packages/terra-hyperlink/tests/jest/Hyperlink.test.jsx b/packages/terra-hyperlink/tests/jest/Hyperlink.test.jsx
index 6b4a8943f3f..bd35f7eef9c 100644
--- a/packages/terra-hyperlink/tests/jest/Hyperlink.test.jsx
+++ b/packages/terra-hyperlink/tests/jest/Hyperlink.test.jsx
@@ -1,4 +1,6 @@
import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { mountWithIntl, renderWithIntl } from 'terra-enzyme-intl';
import ThemeContextProvider from 'terra-theme-context/lib/ThemeContextProvider';
import Hyperlink from '../../src/Hyperlink';
@@ -6,59 +8,64 @@ import Hyperlink from '../../src/Hyperlink';
describe('Hyperlink', () => {
// Snapshot Tests
it('should render a default hyperlink', () => {
- const wrapper = render(Default hyperlink);
+ const wrapper = renderWithIntl();
expect(wrapper).toMatchSnapshot();
});
it('should render a disabled hyperlink', () => {
- const wrapper = render(Disabled hyperlink);
+ const wrapper = renderWithIntl();
expect(wrapper).toMatchSnapshot();
});
it('should render a audio hyperlink', () => {
- const wrapper = render(Audio hyperlink);
+ const wrapper = renderWithIntl();
expect(wrapper).toMatchSnapshot();
});
it('should render a document hyperlink', () => {
- const wrapper = render(Document hyperlink);
+ const wrapper = renderWithIntl();
expect(wrapper).toMatchSnapshot();
});
it('should render a external hyperlink', () => {
- const wrapper = render(External hyperlink);
+ const wrapper = renderWithIntl();
expect(wrapper).toMatchSnapshot();
});
it('should render a image hyperlink', () => {
- const wrapper = render(Image hyperlink);
+ const wrapper = renderWithIntl();
expect(wrapper).toMatchSnapshot();
});
it('should render a underline hidden hyperlink', () => {
- const wrapper = render(Underline hidden hyperlink);
+ const wrapper = renderWithIntl();
expect(wrapper).toMatchSnapshot();
});
it('should render a video hyperlink', () => {
- const wrapper = render(Video hyperlink);
+ const wrapper = renderWithIntl();
expect(wrapper).toMatchSnapshot();
});
it('should render with custom props', () => {
- const wrapper = render(Custom props hyperlink);
+ const wrapper = renderWithIntl();
expect(wrapper).toMatchSnapshot();
});
it('should render with custom props with external variant', () => {
- const wrapper = render(Custom target and rel props external hyperlink);
+ const wrapper = renderWithIntl();
+ expect(wrapper).toMatchSnapshot();
+ });
+
+ it('should render a hyperlink button when oonClick is provided', () => {
+ const wrapper = renderWithIntl( {}} />);
expect(wrapper).toMatchSnapshot();
});
it('correctly applies the theme context className', () => {
- const wrapper = mount(
+ const wrapper = mountWithIntl(
- Default hyperlink
+
,
);
expect(wrapper).toMatchSnapshot();
diff --git a/packages/terra-hyperlink/tests/jest/__snapshots__/Hyperlink.test.jsx.snap b/packages/terra-hyperlink/tests/jest/__snapshots__/Hyperlink.test.jsx.snap
index 5bb60052458..2ba2ee6cb34 100644
--- a/packages/terra-hyperlink/tests/jest/__snapshots__/Hyperlink.test.jsx.snap
+++ b/packages/terra-hyperlink/tests/jest/__snapshots__/Hyperlink.test.jsx.snap
@@ -2,30 +2,91 @@
exports[`Hyperlink correctly applies the theme context className 1`] = `
-
-
- Default hyperlink
-
-
+
+ Default hyperlink
+
+
+
`;
@@ -44,11 +105,13 @@ exports[`Hyperlink should render a audio hyperlink 1`] = `
class="tui-Icon icon"
focusable="false"
height="1em"
- role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
+
+ Terra.hyperlink.iconLabel.audio
+
@@ -69,13 +132,14 @@ exports[`Hyperlink should render a default hyperlink 1`] = `
`;
exports[`Hyperlink should render a disabled hyperlink 1`] = `
-
Disabled hyperlink
-
+
`;
exports[`Hyperlink should render a document hyperlink 1`] = `
@@ -94,11 +158,13 @@ exports[`Hyperlink should render a document hyperlink 1`] = `
data-name="Layer 1"
focusable="false"
height="1em"
- role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
+
+ Terra.hyperlink.iconLabel.document
+
@@ -124,11 +190,13 @@ exports[`Hyperlink should render a external hyperlink 1`] = `
class="tui-Icon icon"
focusable="false"
height="1em"
- role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
+
+ Terra.hyperlink.iconLabel.external
+
@@ -137,6 +205,20 @@ exports[`Hyperlink should render a external hyperlink 1`] = `
`;
+exports[`Hyperlink should render a hyperlink button when oonClick is provided 1`] = `
+
+
+ Default hyperlink button
+
+
+`;
+
exports[`Hyperlink should render a image hyperlink 1`] = `
+
+ Terra.hyperlink.iconLabel.image
+
@@ -191,11 +275,13 @@ exports[`Hyperlink should render a video hyperlink 1`] = `
class="tui-Icon icon is-bidi"
focusable="false"
height="1em"
- role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
+
+ Terra.hyperlink.iconLabel.video
+
@@ -234,11 +320,13 @@ exports[`Hyperlink should render with custom props with external variant 1`] = `
class="tui-Icon icon"
focusable="false"
height="1em"
- role="presentation"
viewBox="0 0 48 48"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
+
+ Terra.hyperlink.iconLabel.external
+
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/audio.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/audio.png
index ab5c3be175b..705106d8de0 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/audio.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/audio.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/default.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/default.png
index a0a3d37800a..34ed6b45497 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/default.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/default.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/disabled.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/disabled.png
index a456cf49e08..edda1ad8016 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/disabled.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/disabled.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/document.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/document.png
index a194e6e29a5..8b216767fa6 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/document.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/document.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/external.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/external.png
index 1209f90e6c8..3e2687b7d27 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/external.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/external.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png
index a21701b2c33..0b5e8f6ffd3 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png
new file mode 100644
index 00000000000..ff1dd016bfa
Binary files /dev/null and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png
new file mode 100644
index 00000000000..786a036c59f
Binary files /dev/null and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png
index 2ad93f16f6b..e2e9d8cd1c6 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/image.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/image.png
index 55d5b975c43..2785fb7e9c7 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/image.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/image.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/scaled.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/scaled.png
index 9593c52cac3..9f61f1e1463 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/scaled.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/scaled.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/states.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/states.png
index c4f67031c80..3b49ace2a61 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/states.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/states.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/video.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/video.png
index b65926b65de..0cfff51f78d 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/video.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_tiny/hyperlink-spec/video.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/audio.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/audio.png
index 98bc88b0d96..67259559bd0 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/audio.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/audio.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/default.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/default.png
index 68562649aec..e19ebb64278 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/default.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/default.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/disabled.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/disabled.png
index 564d5f133a8..ee79b7b89ff 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/disabled.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/disabled.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/document.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/document.png
index 90ca320f547..10e6b404068 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/document.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/document.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/external.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/external.png
index 64713370e78..4940c078c62 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/external.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/external.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png
index 1e991706bc5..b35f8ad34b9 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png
new file mode 100644
index 00000000000..39259b75a1a
Binary files /dev/null and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png
new file mode 100644
index 00000000000..cb5595de9fa
Binary files /dev/null and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png
index 1f5917e65c5..dbfd405c9a0 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/image.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/image.png
index 39def886032..4e058a20349 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/image.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/image.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/scaled.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/scaled.png
index 6c372a05859..caff3e0a3ec 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/scaled.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/scaled.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/states.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/states.png
index 75a923d2196..a87ba62d547 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/states.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/states.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/video.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/video.png
index 52ddb9995f3..5e39b568a1d 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/video.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_tiny/hyperlink-spec/video.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/audio.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/audio.png
index fc3a71b5962..7b2eaf490dd 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/audio.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/audio.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/default.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/default.png
index 8d6a3396a97..11a273a90bf 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/default.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/default.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/disabled.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/disabled.png
index 0f33fd9a5a0..9d0813bfbe4 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/disabled.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/disabled.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/document.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/document.png
index 2a45b947578..61285e10001 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/document.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/document.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/external.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/external.png
index bf5144f75e7..52cb59955a7 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/external.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/external.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png
index 6f35d65bc4a..38e5e49c8ff 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png
new file mode 100644
index 00000000000..1f9f470f974
Binary files /dev/null and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/focused_hyperlink_button.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png
new file mode 100644
index 00000000000..63135ed2f0d
Binary files /dev/null and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/hyperlink-button.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png
index 66b5ccc156f..1aeb9f676a1 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/icon_non_wrapping.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/image.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/image.png
index 8093d3e6609..73448e69570 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/image.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/image.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/scaled.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/scaled.png
index 3559fdd4564..41e5678d5da 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/scaled.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/scaled.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/states.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/states.png
index ca0cec0f1d6..c5873fe9fb2 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/states.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/states.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/video.png b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/video.png
index c58d9678a88..a3784774ce4 100644
Binary files a/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/video.png and b/packages/terra-hyperlink/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_tiny/hyperlink-spec/video.png differ
diff --git a/packages/terra-hyperlink/tests/wdio/hyperlink-spec.js b/packages/terra-hyperlink/tests/wdio/hyperlink-spec.js
index 84de77f7851..94b6d442822 100644
--- a/packages/terra-hyperlink/tests/wdio/hyperlink-spec.js
+++ b/packages/terra-hyperlink/tests/wdio/hyperlink-spec.js
@@ -72,4 +72,17 @@ Terra.describeViewports('Hyperlink', ['tiny'], () => {
Terra.validates.element('focused hyperlink');
});
+
+ it('should display programmatic focus on hyperlink button', () => {
+ browser.url('/raw/tests/cerner-terra-core-docs/hyperlink/programmatic-focus');
+ $('#button2').click();
+
+ Terra.validates.element('focused hyperlink button');
+ });
+
+ it('should render Hyperlink Button states when onClick is provided', () => {
+ browser.url('/raw/tests/cerner-terra-core-docs/hyperlink/states-hyperlink-button');
+
+ Terra.validates.element('hyperlink-button');
+ });
});
diff --git a/packages/terra-hyperlink/translations/de.json b/packages/terra-hyperlink/translations/de.json
new file mode 100644
index 00000000000..50fca773c86
--- /dev/null
+++ b/packages/terra-hyperlink/translations/de.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(Audiodatei wird geöffnet)",
+ "Terra.hyperlink.iconLabel.document": "(Dokument wird geöffnet)",
+ "Terra.hyperlink.iconLabel.external": "(Externe Seite oder Anwendung wird geöffnet)",
+ "Terra.hyperlink.iconLabel.image": "(Bilddatei wird geöffnet)",
+ "Terra.hyperlink.iconLabel.video": "(Video wird geöffnet)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/en-AU.json b/packages/terra-hyperlink/translations/en-AU.json
new file mode 100644
index 00000000000..54bc5cabc8d
--- /dev/null
+++ b/packages/terra-hyperlink/translations/en-AU.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(opens a sound file)",
+ "Terra.hyperlink.iconLabel.document": "(opens a document)",
+ "Terra.hyperlink.iconLabel.external": "(opens an external page or application)",
+ "Terra.hyperlink.iconLabel.image": "(opens an image file)",
+ "Terra.hyperlink.iconLabel.video": "(opens a video)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/en-CA.json b/packages/terra-hyperlink/translations/en-CA.json
new file mode 100644
index 00000000000..54bc5cabc8d
--- /dev/null
+++ b/packages/terra-hyperlink/translations/en-CA.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(opens a sound file)",
+ "Terra.hyperlink.iconLabel.document": "(opens a document)",
+ "Terra.hyperlink.iconLabel.external": "(opens an external page or application)",
+ "Terra.hyperlink.iconLabel.image": "(opens an image file)",
+ "Terra.hyperlink.iconLabel.video": "(opens a video)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/en-GB.json b/packages/terra-hyperlink/translations/en-GB.json
new file mode 100644
index 00000000000..54bc5cabc8d
--- /dev/null
+++ b/packages/terra-hyperlink/translations/en-GB.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(opens a sound file)",
+ "Terra.hyperlink.iconLabel.document": "(opens a document)",
+ "Terra.hyperlink.iconLabel.external": "(opens an external page or application)",
+ "Terra.hyperlink.iconLabel.image": "(opens an image file)",
+ "Terra.hyperlink.iconLabel.video": "(opens a video)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/en-US.json b/packages/terra-hyperlink/translations/en-US.json
new file mode 100644
index 00000000000..54bc5cabc8d
--- /dev/null
+++ b/packages/terra-hyperlink/translations/en-US.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(opens a sound file)",
+ "Terra.hyperlink.iconLabel.document": "(opens a document)",
+ "Terra.hyperlink.iconLabel.external": "(opens an external page or application)",
+ "Terra.hyperlink.iconLabel.image": "(opens an image file)",
+ "Terra.hyperlink.iconLabel.video": "(opens a video)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/en.json b/packages/terra-hyperlink/translations/en.json
new file mode 100644
index 00000000000..54bc5cabc8d
--- /dev/null
+++ b/packages/terra-hyperlink/translations/en.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(opens a sound file)",
+ "Terra.hyperlink.iconLabel.document": "(opens a document)",
+ "Terra.hyperlink.iconLabel.external": "(opens an external page or application)",
+ "Terra.hyperlink.iconLabel.image": "(opens an image file)",
+ "Terra.hyperlink.iconLabel.video": "(opens a video)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/es-ES.json b/packages/terra-hyperlink/translations/es-ES.json
new file mode 100644
index 00000000000..ba8c33ce600
--- /dev/null
+++ b/packages/terra-hyperlink/translations/es-ES.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(abre un archivo de audio)",
+ "Terra.hyperlink.iconLabel.document": "(abre un documento)",
+ "Terra.hyperlink.iconLabel.external": "(abre una página o aplicación externa)",
+ "Terra.hyperlink.iconLabel.image": "(abre un archivo de imagen)",
+ "Terra.hyperlink.iconLabel.video": "(abre un vídeo)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/es-US.json b/packages/terra-hyperlink/translations/es-US.json
new file mode 100644
index 00000000000..ba8c33ce600
--- /dev/null
+++ b/packages/terra-hyperlink/translations/es-US.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(abre un archivo de audio)",
+ "Terra.hyperlink.iconLabel.document": "(abre un documento)",
+ "Terra.hyperlink.iconLabel.external": "(abre una página o aplicación externa)",
+ "Terra.hyperlink.iconLabel.image": "(abre un archivo de imagen)",
+ "Terra.hyperlink.iconLabel.video": "(abre un vídeo)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/es.json b/packages/terra-hyperlink/translations/es.json
new file mode 100644
index 00000000000..ba8c33ce600
--- /dev/null
+++ b/packages/terra-hyperlink/translations/es.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(abre un archivo de audio)",
+ "Terra.hyperlink.iconLabel.document": "(abre un documento)",
+ "Terra.hyperlink.iconLabel.external": "(abre una página o aplicación externa)",
+ "Terra.hyperlink.iconLabel.image": "(abre un archivo de imagen)",
+ "Terra.hyperlink.iconLabel.video": "(abre un vídeo)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/fr-FR.json b/packages/terra-hyperlink/translations/fr-FR.json
new file mode 100644
index 00000000000..4d6da398bb9
--- /dev/null
+++ b/packages/terra-hyperlink/translations/fr-FR.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(ouvre un fichier audio)",
+ "Terra.hyperlink.iconLabel.document": "(ouvre un document)",
+ "Terra.hyperlink.iconLabel.external": "(ouvre une page ou une application externe)",
+ "Terra.hyperlink.iconLabel.image": "(ouvre un fichier image)",
+ "Terra.hyperlink.iconLabel.video": "(ouvre une vidéo)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/fr.json b/packages/terra-hyperlink/translations/fr.json
new file mode 100644
index 00000000000..4d6da398bb9
--- /dev/null
+++ b/packages/terra-hyperlink/translations/fr.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(ouvre un fichier audio)",
+ "Terra.hyperlink.iconLabel.document": "(ouvre un document)",
+ "Terra.hyperlink.iconLabel.external": "(ouvre une page ou une application externe)",
+ "Terra.hyperlink.iconLabel.image": "(ouvre un fichier image)",
+ "Terra.hyperlink.iconLabel.video": "(ouvre une vidéo)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/nl-BE.json b/packages/terra-hyperlink/translations/nl-BE.json
new file mode 100644
index 00000000000..d0ca496b634
--- /dev/null
+++ b/packages/terra-hyperlink/translations/nl-BE.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(hiermee wordt een geluidsbestand geopend)",
+ "Terra.hyperlink.iconLabel.document": "(hiermee wordt een document geopend)",
+ "Terra.hyperlink.iconLabel.external": "(hiermee wordt een externe pagina of applicatie geopend)",
+ "Terra.hyperlink.iconLabel.image": "(hiermee wordt een beeldbestand geopend)",
+ "Terra.hyperlink.iconLabel.video": "(hiermee wordt een video geopend)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/nl.json b/packages/terra-hyperlink/translations/nl.json
new file mode 100644
index 00000000000..d0ca496b634
--- /dev/null
+++ b/packages/terra-hyperlink/translations/nl.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(hiermee wordt een geluidsbestand geopend)",
+ "Terra.hyperlink.iconLabel.document": "(hiermee wordt een document geopend)",
+ "Terra.hyperlink.iconLabel.external": "(hiermee wordt een externe pagina of applicatie geopend)",
+ "Terra.hyperlink.iconLabel.image": "(hiermee wordt een beeldbestand geopend)",
+ "Terra.hyperlink.iconLabel.video": "(hiermee wordt een video geopend)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/pt-BR.json b/packages/terra-hyperlink/translations/pt-BR.json
new file mode 100644
index 00000000000..aabdcd8f4e8
--- /dev/null
+++ b/packages/terra-hyperlink/translations/pt-BR.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(abre o arquivo de som)",
+ "Terra.hyperlink.iconLabel.document": "(abre um documento)",
+ "Terra.hyperlink.iconLabel.external": "(abre um aplicativo ou página externa)",
+ "Terra.hyperlink.iconLabel.image": "(abre um arquivo de imagem)",
+ "Terra.hyperlink.iconLabel.video": "(abre um vídeo)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/pt.json b/packages/terra-hyperlink/translations/pt.json
new file mode 100644
index 00000000000..aabdcd8f4e8
--- /dev/null
+++ b/packages/terra-hyperlink/translations/pt.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(abre o arquivo de som)",
+ "Terra.hyperlink.iconLabel.document": "(abre um documento)",
+ "Terra.hyperlink.iconLabel.external": "(abre um aplicativo ou página externa)",
+ "Terra.hyperlink.iconLabel.image": "(abre um arquivo de imagem)",
+ "Terra.hyperlink.iconLabel.video": "(abre um vídeo)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/sv-SE.json b/packages/terra-hyperlink/translations/sv-SE.json
new file mode 100644
index 00000000000..87c49f5c6ff
--- /dev/null
+++ b/packages/terra-hyperlink/translations/sv-SE.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(öppnar en ljudfil)",
+ "Terra.hyperlink.iconLabel.document": "(öppnar ett dokument)",
+ "Terra.hyperlink.iconLabel.external": "(öppnar en extern sida eller ett program)",
+ "Terra.hyperlink.iconLabel.image": "(öppnar en bildfil)",
+ "Terra.hyperlink.iconLabel.video": "(öppnar en video)"
+}
\ No newline at end of file
diff --git a/packages/terra-hyperlink/translations/sv.json b/packages/terra-hyperlink/translations/sv.json
new file mode 100644
index 00000000000..87c49f5c6ff
--- /dev/null
+++ b/packages/terra-hyperlink/translations/sv.json
@@ -0,0 +1,7 @@
+{
+ "Terra.hyperlink.iconLabel.audio": "(öppnar en ljudfil)",
+ "Terra.hyperlink.iconLabel.document": "(öppnar ett dokument)",
+ "Terra.hyperlink.iconLabel.external": "(öppnar en extern sida eller ett program)",
+ "Terra.hyperlink.iconLabel.image": "(öppnar en bildfil)",
+ "Terra.hyperlink.iconLabel.video": "(öppnar en video)"
+}
\ No newline at end of file