Refactor of URL Handling and Deprecation of relative attribute in auro-hyperlink

[alexisiba]

Overview

The auro-hyperlink component is responsible for rendering internal and external links consistently across the Alaska Airlines design system.

Currently, it includes a relative attribute intended to distinguish between internal (relative) and external (absolute) links. However, the a tag used internally already performs this detection automatically, leading to redundant logic and unexpected behavior.

Problem Statement

Current behavior:

• The component includes a default base URL: https://alaskaair.com
• When a provided href does not start with http:// or https://, the component concatenates the default base URL to it.
• The relative attribute is used to prevent that concatenation, forcing the link to remain "as is"

Issues observed

1. The automatic concatenation of a default base URL is not intuitive and may create incorrect or unexpected URLs
2. The relative attribute adds complexity and confusion since the a tag already has logic to detect link types.
3. Combining relative with target="_blank causes rendering errors and the component crashes entirely

Root cause analysis

The core issue stem from the coupling between:

• URL base concatenation logic
• The conditional use for the relative flag
• And the rendering behavior of the internal tag (especially when certain attributes are combined)

The default URL injection assumes that all relative paths should be resolved to https://alaskaair.com which may not align with application routing or expected behavior

Proposed solution

Summary

Simplify URL handling logic by removing the default URL dependency and handling relative vs absolute URL explicitly.

Implementation steps

1. Remove the default base URL logic
   The component should not automatically prepend https://alaskaair.com to relative URLs
2. Add URL validation helper function that:

   • Checks whether the provided href is a valid absolute URL using the URL constructor

   • If the URL is relative, pass it directly to the element without any modifications

   • If the URL is absolute but incomplete or missing protocol, normalize it using:

     const safeUrl = (href);
     safeUrl.protocol = 'https:'
     

     ensuring a secure https protocol by default.

3. Remove the relative attribute.
   • Replace it with automative detection logic.
4. Ensure full compatibility with target="_blank"and other HTML anchor attributes.
5. Add test for:
   • Relative URLs (e.g. /book/flights)
   • Absolute URLs (e.g. https://example.com)
   • The component should not throw any errors or fail to render when a non valid URL is provided
   • All the combinations with the above three should be tested with target="_blank"
6. Mark all changes as breaking change

Expected Behavior after change

Scenario	Input	Expected output
Relative URL	<auro-hyperlink href="/book/flights" />	Renders <a href="HOST_NAME/book/flights"> e.g. If domain is https://www.alaskaair.com it should render <a href="https://www.alaskaair.com/book/flights" >
Absolute URL	<auro-hyperlink href="https://alaskaair.com/flights" />	Renders <a href="https://alaskaair.com/flights"> e.g. If you're using the component in https://www.hawaiianairlines.com/ it should render <a href="https://www.alaskaair.com/book/flights" >
No protocol	<auro-hyperlink href="alaskaair.com" />	Normalized to <a href="https://alaskaair.com/flights">. Note: We do not support programmatically handling invalid protocols
With target="_blank"	<auro-hyperlink href="https://alaskaair.com" target="_blank" />	Opens in a new tab for both relative and absolute URLs

Risks and mitigation

Risk	Mitigation
Backward compatibility issues if some apps depend on the default base URL	Release as a breaking change in the next version
Developers confused about how relative URLs resolve	Add clear documentation and examples in the component's documentation
Inconsistent link validation in old browsers	use try/catch around new URL() and fallback to basic string checks

Acceptance criteria

1. The component must handle all valid href values (relative or absolute) without errors.
2. The relative attribute should no longer be required to control link resolution.
3. The default base URL logic (https://alaskaair.com) must be removed.
4. The component should pass updated unit test covering link validation, rendering and target behaviors.
5. Documentation updated to reflect simplified URL-handling logic.

Benefits

• Simplifies component logic.
• Removes hidden assumptions (default base URL).
• Reduces risk of rendering errors.
• Improves developer experience and code maintainability.
• Increases reliability across different contexts (apps, SSR, StoryBook).

Questions for review

Key	Question
Q1	Should we completely remove relative attribute, or keep it temporarily as deprecated for backward compatibility?
Q2	Are there any known implementations or applications currently depending on the default base URL (https://alaskaair.com) that would break after this change?
Q3	Would introducing an optional baseUrl property (instead of a hardcoded default) be beneficial for future flexibility?
Q4	Should the component handle other valid URL schemes such as mailto:, tel: or ftp: as external links?
Q5	Do we need additional validation or fallback logic for malformed URLs when using the new URL() constructor?
Q6	Are there any accessibility (a11y) implications to consider with the proposed changes?
Q7	Should this update be release as a breaking change (major) or as a minor version with deprecation warnings?
Q8	Are there specific test cases or edge conditions that the team would like to see covered?

Conclusions from TRD Review Meeting

During the review meeting, the following key points and decisions were discussed

1. The component must work correctly across all environments, regardless of the domain in which it is used. This includes ensuring consistent behavior in both testing and auro.alaskaair.com environments.

   1.1. Developers should be able to use the component seamlessly in a local environment (localhost) without configuration issues or restrictions.

This approach ensures backward compatibility while providing developers with greater flexibility and control over component behavior.