Introduce aria-current service (#5599)

public-ui · Nov 17, 2023 · 560d00a · 560d00a
2 parents 5ace636 + c6a9c18
commit 560d00a
Show file tree

Hide file tree

Showing 20 changed files with 213 additions and 211 deletions.
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -166,7 +166,7 @@ kol-input-text:
 kol-link:
 
 - prop `_ariaControls` removed
-- prop `_ariaCurrent` removed (use `_listenAriaCurrent` instead)
+- prop `_ariaCurrent` removed (Use ariaCurrentService instead)
 - prop `_ariaExpanded` removed
 - prop `_ariaLabel` removed
 - prop `_ariaSelected` removed
@@ -209,6 +209,7 @@ kol-modal:
 
 kol-nav:
 
+- prop `_ariaCurrentValue` removed
 - prop `_ariaLabel` removed (use `_label` instead)
 - prop `_compact` removed (use `_hideLabel` instead)
 - prop `_hasCompactButton` removed

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -116,7 +116,6 @@
 		"query-selector-shadow-root": "0.0.3",
 		"rgba-convert": "0.3.0",
 		"rimraf": "3.0.2",
-		"rxjs": "7.8.1",
 		"stencil-awesome-test": "1.0.6",
 		"terser": "5.24.0",
 		"tslib": "2.6.2",

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -41,9 +41,9 @@ import { OptionsPropType, OptionsWithOptgroupPropType } from "./types/props/opti
 import { Orientation } from "./types/orientation";
 import { W3CInputValue } from "./types/w3c";
 import { InputTextType } from "./types/input/control/text";
+import { AriaCurrentValuePropType } from "./types/props/aria-current-value";
 import { DownloadPropType } from "./types/props/download";
 import { HrefPropType } from "./types/props/href";
-import { AriaCurrentPropType } from "./types/props/aria-current";
 import { LinkOnCallbacksPropType } from "./types/props/link-on-callbacks";
 import { LinkTargetPropType } from "./types/props/link-target";
 import { ListStyleType } from "./components/link-group/types";
@@ -97,9 +97,9 @@ export { OptionsPropType, OptionsWithOptgroupPropType } from "./types/props/opti
 export { Orientation } from "./types/orientation";
 export { W3CInputValue } from "./types/w3c";
 export { InputTextType } from "./types/input/control/text";
+export { AriaCurrentValuePropType } from "./types/props/aria-current-value";
 export { DownloadPropType } from "./types/props/download";
 export { HrefPropType } from "./types/props/href";
-export { AriaCurrentPropType } from "./types/props/aria-current";
 export { LinkOnCallbacksPropType } from "./types/props/link-on-callbacks";
 export { LinkTargetPropType } from "./types/props/link-target";
 export { ListStyleType } from "./components/link-group/types";
@@ -1736,6 +1736,10 @@ export namespace Components {
           * Defines the elements access key.
          */
         "_accessKey"?: AccessKeyPropType;
+        /**
+          * Defines the value for the aria-current attribute.
+         */
+        "_ariaCurrentValue"?: AriaCurrentValuePropType;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -1757,10 +1761,6 @@ export namespace Components {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
          */
         "_label"?: LabelWithExpertSlotPropType;
-        /**
-          * Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.
-         */
-        "_listenAriaCurrent"?: AriaCurrentPropType;
         /**
           * Defines the callback functions for links.
          */
@@ -1791,6 +1791,10 @@ export namespace Components {
           * Defines the elements access key.
          */
         "_accessKey"?: AccessKeyPropType;
+        /**
+          * Defines the value for the aria-current attribute.
+         */
+        "_ariaCurrentValue"?: AriaCurrentValuePropType;
         /**
           * Defines the custom class attribute if _variant="custom" is set.
          */
@@ -1816,10 +1820,6 @@ export namespace Components {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
          */
         "_label": LabelWithExpertSlotPropType;
-        /**
-          * Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.
-         */
-        "_listenAriaCurrent"?: AriaCurrentPropType;
         /**
           * Defines the callback functions for links.
          */
@@ -1872,6 +1872,10 @@ export namespace Components {
           * Defines the elements access key.
          */
         "_accessKey"?: AccessKeyPropType;
+        /**
+          * Defines the value for the aria-current attribute.
+         */
+        "_ariaCurrentValue"?: AriaCurrentValuePropType;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -1893,10 +1897,6 @@ export namespace Components {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
          */
         "_label"?: LabelWithExpertSlotPropType;
-        /**
-          * Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.
-         */
-        "_listenAriaCurrent"?: AriaCurrentPropType;
         /**
           * Defines the callback functions for links.
          */
@@ -1947,10 +1947,6 @@ export namespace Components {
         "_width"?: string;
     }
     interface KolNav {
-        /**
-          * Defines the value of aria-current to be used with the current context within the navigation.
-         */
-        "_ariaCurrentValue": AriaCurrentPropType;
         /**
           * Defines if navigation nodes can be collapsed or not. Enabled by default.
           * @TODO : Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.
@@ -4530,6 +4526,10 @@ declare namespace LocalJSX {
           * Defines the elements access key.
          */
         "_accessKey"?: AccessKeyPropType;
+        /**
+          * Defines the value for the aria-current attribute.
+         */
+        "_ariaCurrentValue"?: AriaCurrentValuePropType;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -4551,10 +4551,6 @@ declare namespace LocalJSX {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
          */
         "_label"?: LabelWithExpertSlotPropType;
-        /**
-          * Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.
-         */
-        "_listenAriaCurrent"?: AriaCurrentPropType;
         /**
           * Defines the callback functions for links.
          */
@@ -4585,6 +4581,10 @@ declare namespace LocalJSX {
           * Defines the elements access key.
          */
         "_accessKey"?: AccessKeyPropType;
+        /**
+          * Defines the value for the aria-current attribute.
+         */
+        "_ariaCurrentValue"?: AriaCurrentValuePropType;
         /**
           * Defines the custom class attribute if _variant="custom" is set.
          */
@@ -4610,10 +4610,6 @@ declare namespace LocalJSX {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
          */
         "_label": LabelWithExpertSlotPropType;
-        /**
-          * Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.
-         */
-        "_listenAriaCurrent"?: AriaCurrentPropType;
         /**
           * Defines the callback functions for links.
          */
@@ -4666,6 +4662,10 @@ declare namespace LocalJSX {
           * Defines the elements access key.
          */
         "_accessKey"?: AccessKeyPropType;
+        /**
+          * Defines the value for the aria-current attribute.
+         */
+        "_ariaCurrentValue"?: AriaCurrentValuePropType;
         /**
           * Tells the browser that the link contains a file. Optionally sets the filename.
          */
@@ -4687,10 +4687,6 @@ declare namespace LocalJSX {
           * Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). Set to `false` to enable the expert slot.
          */
         "_label"?: LabelWithExpertSlotPropType;
-        /**
-          * Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.
-         */
-        "_listenAriaCurrent"?: AriaCurrentPropType;
         /**
           * Defines the callback functions for links.
          */
@@ -4741,10 +4737,6 @@ declare namespace LocalJSX {
         "_width"?: string;
     }
     interface KolNav {
-        /**
-          * Defines the value of aria-current to be used with the current context within the navigation.
-         */
-        "_ariaCurrentValue"?: AriaCurrentPropType;
         /**
           * Defines if navigation nodes can be collapsed or not. Enabled by default.
           * @TODO : Change type back to `CollapsiblePropType` after Stencil#4663 has been resolved.

diff --git a/packages/components/src/components/link-button/component.tsx b/packages/components/src/components/link-button/component.tsx
@@ -2,7 +2,6 @@ import { Component, Element, h, Host, JSX, Prop } from '@stencil/core';
 
 import { translate } from '../../i18n';
 import { AlternativeButtonLinkRolePropType } from '../../types/props/alternative-button-link-role';
-import { AriaCurrentPropType } from '../../types/props/aria-current';
 import { ButtonVariantPropType } from '../../types/props/button-variant';
 import { CustomClassPropType } from '../../types/props/custom-class';
 import { DownloadPropType } from '../../types/props/download';
@@ -15,6 +14,7 @@ import { TooltipAlignPropType } from '../../types/props/tooltip-align';
 import { propagateFocus } from '../../utils/reuse';
 import { Props } from './types';
 import { AccessKeyPropType } from '../../types/props/access-key';
+import { AriaCurrentValuePropType } from '../../types/props/aria-current-value';
 
 @Component({
 	tag: 'kol-link-button',
@@ -41,12 +41,12 @@ export class KolLinkButton implements Props {
 						[this._customClass as string]: this._variant === 'custom' && typeof this._customClass === 'string' && this._customClass.length > 0,
 					}}
 					_accessKey={this._accessKey}
+					_ariaCurrentValue={this._ariaCurrentValue}
 					_download={this._download}
 					_hideLabel={this._hideLabel}
 					_href={this._href}
 					_icons={this._icons}
 					_label={this._label}
-					_listenAriaCurrent={this._listenAriaCurrent}
 					_on={this._on}
 					_role="button"
 					_tabIndex={this._tabIndex}
@@ -65,6 +65,11 @@ export class KolLinkButton implements Props {
 	 */
 	@Prop() public _accessKey?: AccessKeyPropType;
 
+	/**
+	 * Defines the value for the aria-current attribute.
+	 */
+	@Prop() public _ariaCurrentValue?: AriaCurrentValuePropType;
+
 	/**
 	 * Defines the custom class attribute if _variant="custom" is set.
 	 */
@@ -97,11 +102,6 @@ export class KolLinkButton implements Props {
 	 */
 	@Prop() public _label!: LabelWithExpertSlotPropType;
 
-	/**
-	 * Listen on an aria-current event with this value. If the value matches the current value and the href is the same as the current url, the aria-current attribute will be set to current value.
-	 */
-	@Prop() public _listenAriaCurrent?: AriaCurrentPropType;
-
 	/**
 	 * Defines the callback functions for links.
 	 */

diff --git a/packages/components/src/components/link/ariaCurrentService.ts b/packages/components/src/components/link/ariaCurrentService.ts
@@ -0,0 +1,27 @@
+type LocationChangeCallback = (location: string) => void;
+export type UnsubscribeFunction = () => void;
+
+let currentLocation: string | undefined;
+const subscribers: Array<LocationChangeCallback> = [];
+
+export const setCurrentLocation = (location: string) => {
+	currentLocation = location;
+	subscribers.forEach((subscriber) => {
+		subscriber(location);
+	});
+};
+
+export const onLocationChange = (callback: LocationChangeCallback, eager = true): UnsubscribeFunction => {
+	if (eager && typeof currentLocation === 'string') {
+		callback(currentLocation);
+	}
+	subscribers.push(callback);
+
+	// unsubscribe function
+	return () => {
+		const index = subscribers.indexOf(callback);
+		if (index >= 0) {
+			subscribers.splice(index, 1);
+		}
+	};
+};