fix: improve accessibility and fix minor bugs across components

- Fix gap=0 not being applied in FluxStack and FluxTableCell
- Add missing v-for keys in FluxPercentageBar and FluxLegend
- Add aria-labels to icon-only buttons (FluxRemove, FluxBadge, FluxTag, FluxNotice)
- Add scope="col" to FluxTableHeader for screen reader support
- Add aria-level to FluxTreeView tree items
- Link tab panels with aria-labelledby/aria-controls in FluxTabs
- Fix event propagation on delete buttons in FluxBadge and FluxTag
- Change role="textbox" to role="group" in FluxFormInputGroup
- Use semantic h3 for section title in FluxFormSection
- Add direction prop to FluxDivider for dynamic aria-orientation
- Add flux.close and flux.delete i18n keys

Author: basmilius

packages/components/src/component/FluxBadge.vue

@@ -40,7 +40,8 @@
             v-if="type === 'none' && isDeletable"
             :class="$style.badgeClose"
             type="button"
-            @click="onDeleteClick()">
+            :aria-label="translate('flux.delete')"
+            @click.stop="onDeleteClick()">
             <FluxIcon name="xmark"/>
         </button>
     </FluxPressable>
@@ -51,6 +52,7 @@
     setup>
     import type { FluxButtonEmits, FluxColor, FluxIconName, FluxPressableType, FluxTo } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '$flux/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import FluxPressable from './FluxPressable.vue';
     import FluxSpinner from './FluxSpinner.vue';
@@ -78,6 +80,8 @@
         readonly to?: FluxTo;
     }>();
 
+    const translate = useTranslate();
+
     function onDeleteClick(): void {
         emit('delete');
     }

packages/components/src/component/FluxDivider.vue

@@ -6,7 +6,7 @@
             contentPlacement === 'end' && $style.dividerContentEnd
         )"
         role="separator"
-        aria-orientation="horizontal">
+        :aria-orientation="direction">
         <div
             v-if="slots.default"
             :class="$style.dividerContent">
@@ -22,13 +22,16 @@
 <script
     lang="ts"
     setup>
+    import type { FluxDirection } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import $style from '$flux/css/component/Divider.module.scss';
 
     const {
-        contentPlacement = 'center'
+        contentPlacement = 'center',
+        direction = 'horizontal'
     } = defineProps<{
         readonly contentPlacement?: 'start' | 'center' | 'end';
+        readonly direction?: FluxDirection;
     }>();
 
     const slots = defineSlots<{

packages/components/src/component/FluxFormInputGroup.vue

@@ -5,7 +5,7 @@
             isCondensed && $style.isCondensed,
             isSecondary && $style.isSecondary
         )"
-        role="textbox">
+        role="group">
         <slot/>
     </div>
 </template>

packages/components/src/component/FluxFormSection.vue

@@ -1,8 +1,8 @@
 <template>
     <div :class="$style.formSection">
-        <div :class="$style.formSectionTitle">
+        <h3 :class="$style.formSectionTitle">
             {{ title }}
-        </div>
+        </h3>
 
         <slot/>
     </div>

packages/components/src/component/FluxLegend.vue

@@ -1,14 +1,14 @@
 <template>
     <div :class="direction === 'horizontal' ? $style.legendHorizontal : $style.legendVertical">
-        <template v-for="item of items">
-            <span
-                :class="$style.legendItem"
-                :style="{
-                    '--color': item.color
-                }">
-                {{ item.label }}
-            </span>
-        </template>
+        <span
+            v-for="(item, index) of items"
+            :key="index"
+            :class="$style.legendItem"
+            :style="{
+                '--color': item.color
+            }">
+            {{ item.label }}
+        </span>
     </div>
 </template>
 

packages/components/src/component/FluxNotice.vue

@@ -40,6 +40,7 @@
             v-if="isCloseable"
             :class="$style.noticeClose"
             type="button"
+            :aria-label="translate('flux.close')"
             @click="emit('close')">
             <FluxIcon name="xmark"/>
         </button>
@@ -51,6 +52,7 @@
     setup>
     import type { FluxColor, FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '$flux/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import FluxSpinner from './FluxSpinner.vue';
     import $style from '$flux/css/component/Notice.module.scss';
@@ -76,4 +78,6 @@
         default(): any;
         end(): any;
     }>();
+
+    const translate = useTranslate();
 </script>

packages/components/src/component/FluxPercentageBar.vue

@@ -1,7 +1,9 @@
 <template>
     <div :class="$style.percentageBar">
         <div :class="$style.percentageBarTrack">
-            <FluxTooltip v-for="item of items">
+            <FluxTooltip
+                v-for="(item, index) of items"
+                :key="index">
                 <template #content>
                     <div :class="$style.percentageBarTooltip">
                         <FluxIcon

packages/components/src/component/FluxRemove.vue

@@ -5,6 +5,7 @@
             isHidden && $style.isHidden
         )"
         type="button"
+        :aria-label="translate('flux.delete')"
         @click="emit('click', $event)">
         <FluxIcon
             v-if="icon"
@@ -18,6 +19,7 @@
     setup>
     import type { FluxIconName } from '@flux-ui/types';
     import { clsx } from 'clsx';
+    import { useTranslate } from '$flux/composable/private';
     import FluxIcon from './FluxIcon.vue';
     import $style from '$flux/css/component/Remove.module.scss';
 
@@ -31,4 +33,6 @@
         readonly icon?: FluxIconName;
         readonly isHidden?: boolean;
     }>();
+
+    const translate = useTranslate();
 </script>

packages/components/src/component/FluxStack.vue

@@ -9,7 +9,7 @@
             isWrapping && $style.isWrapping
         )"
         :style="{
-            '--gap': gap && `${gap}px`
+            '--gap': gap != null ? `${gap}px` : undefined
         }">
         <slot/>
     </Component>

packages/components/src/component/FluxTableCell.vue

@@ -13,7 +13,7 @@
                 :class="$style.tableCellContent"
                 :style="{
                     flexFlow: contentDirection,
-                    gap: contentGap && `${contentGap}px`
+                    gap: contentGap != null ? `${contentGap}px` : undefined
                 }">
                 <slot/>
             </div>