refactor(NumberField)!: remove NumberFieldLabel (#969)

* refactor(NumberField): remove NumberFieldLabel, pass id to NumberFieldRootContext * fix(NumberField): add label to pass axe tests * fix(NumberFieldInput): remove aria-labelledby * docs: add back label --------- Co-authored-by: zernonia <zernonia@gmail.com>
radix-vue · May 27, 2024 · 663d102 · 663d102
1 parent 2dad7cf
commit 663d102
Show file tree

Hide file tree

Showing 11 changed files with 16 additions and 67 deletions.
diff --git a/docs/components/demo/NumberField/css/index.vue b/docs/components/demo/NumberField/css/index.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldLabel, NumberFieldRoot } from 'radix-vue'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from 'radix-vue'
 import { Icon } from '@iconify/vue'
 </script>
 
 <template>
   <NumberFieldRoot
+    id="age"
     class="text-sm text-white"
     :min="0"
     :default-value="18"
   >
-    <NumberFieldLabel>Age</NumberFieldLabel>
-
+    <label for="age">Age</label>
     <div class="mt-1 flex items-center border bg-blackA7 border-blackA9 rounded-md">
       <NumberFieldDecrement class="p-2 disabled:opacity-20">
         <Icon icon="radix-icons:minus" />

diff --git a/docs/components/demo/NumberField/css/styles.css b/docs/components/demo/NumberField/css/styles.css
@@ -25,11 +25,4 @@ button {
 
 .CheckboxIndicator {
   color: var(--grass-11);
-}
-
-.Label {
-  color: white;
-  padding-left: 15px;
-  font-size: 15px;
-  line-height: 1;
 }
diff --git a/docs/components/demo/NumberField/tailwind/index.vue b/docs/components/demo/NumberField/tailwind/index.vue
@@ -1,16 +1,16 @@
 <script setup lang="ts">
-import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldLabel, NumberFieldRoot } from 'radix-vue'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from 'radix-vue'
 import { Icon } from '@iconify/vue'
 </script>
 
 <template>
   <NumberFieldRoot
+    id="age"
     class="text-sm text-white"
     :min="0"
     :default-value="18"
   >
-    <NumberFieldLabel>Age</NumberFieldLabel>
-
+    <label for="age">Age</label>
     <div class="mt-1 flex items-center border bg-blackA7 border-blackA9 rounded-md">
       <NumberFieldDecrement class="p-2 disabled:opacity-20">
         <Icon icon="radix-icons:minus" />

diff --git a/docs/content/components/number-field.md b/docs/content/components/number-field.md
@@ -42,13 +42,11 @@ Import all parts and piece them together.
 
 ```vue
 <script setup>
-import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldLabel, NumberFieldRoot } from 'radix-vue'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from 'radix-vue'
 </script>
 
 <template>
   <NumberFieldRoot>
-    <NumberFieldLabel />
-
     <NumberFieldDecrement />
     <NumberFieldInput />
     <NumberFieldIncrement />
@@ -73,12 +71,6 @@ Contains all the parts of a number field. An `input` will also render when used
   ]"
 />
 
-### Label
-
-Label for the input.
-
-<!-- @include: @/meta/NumberFieldLabel.md -->
-
 ### Input
 
 Input

diff --git a/packages/radix-vue/constant/components.ts b/packages/radix-vue/constant/components.ts
@@ -248,7 +248,6 @@ export const components = {
 
   numberField: [
     'NumberFieldRoot',
-    'NumberFieldLabel',
     'NumberFieldInput',
     'NumberFieldIncrement',
     'NumberFieldDecrement',

diff --git a/packages/radix-vue/src/NumberField/NumberFieldInput.vue b/packages/radix-vue/src/NumberField/NumberFieldInput.vue
@@ -38,13 +38,14 @@ function handleWheelEvent(event: WheelEvent) {
 
 onMounted(() => {
   rootContext.onInputElement(currentElement.value as HTMLInputElement)
+
 })
 </script>
 
 <template>
   <Primitive
     v-bind="props"
-    :id="rootContext.inputId"
+    :id="rootContext.id.value"
     ref="primitiveElement"
     role="spinbutton"
     type="text"
@@ -60,7 +61,6 @@ onMounted(() => {
     :aria-valuenow="rootContext.modelValue.value"
     :aria-valuemin="rootContext.min.value"
     :aria-valuemax="rootContext.max.value"
-    :aria-labelledby="rootContext.labelId"
     @keydown.up.prevent="rootContext.handleIncrease()"
     @keydown.down.prevent="rootContext.handleDecrease()"
     @keydown.page-up.prevent="rootContext.handleIncrease(10)"

diff --git a/packages/radix-vue/src/NumberField/NumberFieldLabel.vue b/packages/radix-vue/src/NumberField/NumberFieldLabel.vue
diff --git a/packages/radix-vue/src/NumberField/NumberFieldRoot.vue b/packages/radix-vue/src/NumberField/NumberFieldRoot.vue
@@ -43,12 +43,11 @@ interface NumberFieldRootContext {
   validate: (val: string) => boolean
   applyInputValue: (val: string) => void
   disabled: Ref<boolean>
-  labelId: string
-  inputId: string
   max: Ref<number | undefined>
   min: Ref<number | undefined>
   isDecreaseDisabled: Ref<boolean>
   isIncreaseDisabled: Ref<boolean>
+  id: Ref<string | undefined>
 }
 
 export const [injectNumberFieldRootContext, provideNumberFieldRootContext] = createContext<NumberFieldRootContext>('NumberFieldRoot')
@@ -69,7 +68,7 @@ const props = withDefaults(defineProps<NumberFieldRootProps>(), {
   step: 1,
 })
 const emits = defineEmits<NumberFieldRootEmits>()
-const { disabled, min, max, step, locale, formatOptions } = toRefs(props)
+const { disabled, min, max, step, locale, formatOptions, id } = toRefs(props)
 
 const modelValue = useVModel(props, 'modelValue', emits, {
   defaultValue: props.defaultValue,
@@ -78,8 +77,6 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 
 const { primitiveElement, currentElement } = usePrimitiveElement()
 
-const labelId = useId(undefined, 'number-field-label')
-const inputId = useId(undefined, 'number-field-input')
 const isFormControl = useFormControl(currentElement)
 const inputEl = ref<HTMLInputElement>()
 
@@ -180,8 +177,6 @@ provideNumberFieldRootContext({
   handleDecrease,
   handleIncrease,
   handleMinMaxValue,
-  labelId,
-  inputId,
   inputMode,
   inputEl,
   onInputElement: el => inputEl.value = el,
@@ -193,6 +188,7 @@ provideNumberFieldRootContext({
   min,
   isDecreaseDisabled,
   isIncreaseDisabled,
+  id,
 })
 </script>
 

diff --git a/packages/radix-vue/src/NumberField/index.ts b/packages/radix-vue/src/NumberField/index.ts
@@ -1,5 +1,4 @@
 export { default as NumberFieldRoot, type NumberFieldRootProps, type NumberFieldRootEmits } from './NumberFieldRoot.vue'
-export { default as NumberFieldLabel, type NumberFieldLabelProps } from './NumberFieldLabel.vue'
 export { default as NumberFieldInput, type NumberFieldInputProps } from './NumberFieldInput.vue'
 export { default as NumberFieldIncrement, type NumberFieldIncrementProps } from './NumberFieldIncrement.vue'
 export { default as NumberFieldDecrement, type NumberFieldDecrementProps } from './NumberFieldDecrement.vue'
diff --git a/packages/radix-vue/src/NumberField/story/NumberField.story.vue b/packages/radix-vue/src/NumberField/story/NumberField.story.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldLabel, NumberFieldRoot } from '../'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from '../'
 import { Icon } from '@iconify/vue'
 </script>
 
@@ -11,8 +11,6 @@ import { Icon } from '@iconify/vue'
         :min="0"
         :default-value="18"
       >
-        <NumberFieldLabel>Age</NumberFieldLabel>
-
         <div class="mt-1 flex items-center border bg-blackA7 border-blackA9 rounded-md">
           <NumberFieldDecrement class="p-2 disabled:opacity-20">
             <Icon icon="radix-icons:minus" />

diff --git a/packages/radix-vue/src/NumberField/story/_NumberField.vue b/packages/radix-vue/src/NumberField/story/_NumberField.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { NumberFieldRootProps } from '../'
-import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldLabel, NumberFieldRoot } from '../'
+import { NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot } from '../'
 import { Icon } from '@iconify/vue'
 
 const props = defineProps<NumberFieldRootProps>()
@@ -11,10 +11,9 @@ const props = defineProps<NumberFieldRootProps>()
     data-testid="root"
     class="text-sm flex items-center border bg-blackA7 border-blackA9 rounded-md text-white"
     v-bind="props"
+    id="number-field"
   >
-    <NumberFieldLabel data-testid="label">
-      Number
-    </NumberFieldLabel>
+    <label for="number-field" data-testid="label">Number Field</label>
     <NumberFieldDecrement class="p-2" data-testid="decrement">
       <Icon icon="radix-icons:minus" />
     </NumberFieldDecrement>