feat: unify phone apps with Sky UI

frontend/src/ui/controls/SkyLink.vue

@@ -9,6 +9,7 @@ const props = withDefaults(
     disabled?: boolean
     href?: string
     iconOnly?: boolean
+    linkProps?: Record<string, unknown>
     type?: 'button' | 'reset' | 'submit'
   }>(),
   {
@@ -16,6 +17,7 @@ const props = withDefaults(
     disabled: false,
     href: undefined,
     iconOnly: false,
+    linkProps: () => ({}),
     type: 'button',
   },
 )
@@ -27,6 +29,7 @@ const emit = defineEmits<{
 const elementProps = computed<Record<string, unknown>>(() => {
   if (props.component === 'a') {
     return {
+      ...props.linkProps,
       'aria-disabled': props.disabled || undefined,
       href: props.disabled ? undefined : props.href,
       tabindex: props.disabled ? -1 : 0,
@@ -34,8 +37,9 @@ const elementProps = computed<Record<string, unknown>>(() => {
   }
 
   return {
+    ...props.linkProps,
     disabled: props.disabled,
-    type: props.type,
+    type: props.linkProps.type ?? props.type,
   }
 })
 

frontend/src/ui/controls/SkyNavbarBackLink.vue

@@ -5,18 +5,21 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
-    ariaLabel: string
+    ariaLabel?: string
     component?: 'a' | 'button'
     disabled?: boolean
     href?: string
+    linkProps?: Record<string, unknown>
     showText?: boolean
     text?: string
     type?: 'button' | 'reset' | 'submit'
   }>(),
   {
     component: 'button',
+    ariaLabel: '',
     disabled: false,
     href: undefined,
+    linkProps: () => ({}),
     showText: false,
     text: '',
     type: 'button',
@@ -28,7 +31,7 @@ const emit = defineEmits<{
 }>()
 
 const accessibleLabel = computed(
-  () => props.ariaLabel || (props.showText ? props.text : undefined),
+  () => props.ariaLabel || props.text || undefined,
 )
 const elementProps = computed<Record<string, unknown>>(() => {
   const common = {
@@ -37,6 +40,7 @@ const elementProps = computed<Record<string, unknown>>(() => {
 
   if (props.component === 'a') {
     return {
+      ...props.linkProps,
       ...common,
       'aria-disabled': props.disabled || undefined,
       href: props.disabled ? undefined : props.href,
@@ -45,9 +49,10 @@ const elementProps = computed<Record<string, unknown>>(() => {
   }
 
   return {
+    ...props.linkProps,
     ...common,
     disabled: props.disabled,
-    type: props.type,
+    type: props.linkProps.type ?? props.type,
   }
 })
 

frontend/src/ui/controls/SkySearchbar.vue

@@ -7,7 +7,7 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(
   defineProps<{
-    clearLabel: string
+    clearLabel?: string
     cancelLabel?: string
     cancelButton?: boolean
     clearButton?: boolean
@@ -29,6 +29,7 @@ const props = withDefaults(
     cancelButton: false,
     cancelLabel: '',
     clearButton: true,
+    clearLabel: '',
     component: 'div',
     disableButton: false,
     disableLabel: '',
@@ -167,7 +168,7 @@ function disable(event: MouseEvent): void {
         v-if="clearButton && localValue"
         class="sky-searchbar__clear"
         type="button"
-        :aria-label="clearLabel"
+        :aria-label="clearLabel || 'Clear search'"
         :disabled="disabled"
         @pointerdown.prevent
         @click="clear($event)"

frontend/src/ui/controls/SkyTabButton.vue

@@ -1,19 +1,27 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 defineOptions({ inheritAttrs: false })
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     active?: boolean
     ariaLabel?: string
+    component?: 'a' | 'button'
     disabled?: boolean
+    href?: string
     label?: string
+    linkProps?: Record<string, unknown>
     type?: 'button' | 'reset' | 'submit'
   }>(),
   {
     active: false,
     ariaLabel: '',
+    component: 'button',
     disabled: false,
+    href: undefined,
     label: '',
+    linkProps: () => ({}),
     type: 'button',
   },
 )
@@ -21,17 +29,33 @@ withDefaults(
 defineEmits<{
   click: [event: MouseEvent]
 }>()
+
+const elementProps = computed<Record<string, unknown>>(() => {
+  if (props.component === 'a') {
+    return {
+      ...props.linkProps,
+      'aria-disabled': props.disabled || undefined,
+      href: props.disabled ? undefined : props.href,
+      tabindex: props.disabled ? -1 : undefined,
+    }
+  }
+
+  return {
+    ...props.linkProps,
+    disabled: props.disabled,
+    type: props.linkProps.type ?? props.type,
+  }
+})
 </script>
 
 <template>
-  <button
-    v-bind="$attrs"
+  <component
+    :is="component"
+    v-bind="{ ...$attrs, ...elementProps }"
     class="sky-tab-button"
     :class="{ 'sky-tab-button--active': active }"
     :aria-current="active ? 'page' : undefined"
     :aria-label="ariaLabel || undefined"
-    :disabled="disabled"
-    :type="type"
     @click="$emit('click', $event)"
   >
     <span v-if="$slots.icon" class="sky-tab-button__icon">
@@ -41,5 +65,5 @@ defineEmits<{
       <slot name="label">{{ label }}</slot>
     </span>
     <slot />
-  </button>
+  </component>
 </template>