Skip to content

Commit e2ab73a

Browse files
J-SekJ-Sek
authored
feat(VColorPicker): aria labels for main controls (#21839)
resolves #21834
1 parent 3894f98 commit e2ab73a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+768
-6
lines changed

‎packages/vuetify/src/components/VColorPicker/VColorPickerEdit.sass

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,11 @@
77
margin-top: $color-picker-input-margin-top
88

99
.v-color-picker-edit__input
10+
> input::-webkit-outer-spin-button,
11+
> input::-webkit-inner-spin-button
12+
-webkit-appearance: none
13+
margin: 0
14+
1015
width: 100%
1116
display: flex
1217
flex-wrap: wrap

‎packages/vuetify/src/components/VColorPicker/VColorPickerEdit.tsx

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { VBtn } from '@/components/VBtn'
66

77
// Composables
88
import { makeComponentProps } from '@/composables/component'
9+
import { useLocale } from '@/composables/locale'
910

1011
// Utilities
1112
import { computed } from 'vue'
@@ -55,6 +56,7 @@ export const VColorPickerEdit = defineComponent({
5556
},
5657

5758
setup (props, { emit }) {
59+
const { t } = useLocale()
5860
const enabledModes = computed(() => {
5961
return props.modes.map(key => ({ ...modes[key], name: key }))
6062
})
@@ -66,10 +68,11 @@ export const VColorPickerEdit = defineComponent({
6668

6769
const color = props.color ? mode.to(props.color) : null
6870

69-
return mode.inputs?.map(({ getValue, getColor, ...inputProps }) => {
71+
return mode.inputs?.map(({ getValue, getColor, localeKey, ...inputProps }) => {
7072
return {
7173
...mode.inputProps,
7274
...inputProps,
75+
ariaLabel: t(`$vuetify.colorPicker.ariaLabel.${localeKey}`),
7376
disabled: props.disabled,
7477
value: color && getValue(color),
7578
onChange: (e: InputEvent) => {
@@ -99,6 +102,7 @@ export const VColorPickerEdit = defineComponent({
99102
icon="$unfold"
100103
size="x-small"
101104
variant="plain"
105+
aria-label={ t('$vuetify.colorPicker.ariaLabel.changeFormat') }
102106
onClick={ () => {
103107
const mi = enabledModes.value.findIndex(m => m.name === props.mode)
104108

‎packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { VSlider } from '@/components/VSlider'
77

88
// Composables
99
import { makeComponentProps } from '@/composables/component'
10+
import { useLocale } from '@/composables/locale'
1011

1112
// Utilities
1213
import { onUnmounted } from 'vue'
@@ -45,6 +46,8 @@ export const VColorPickerPreview = defineComponent({
4546
},
4647

4748
setup (props, { emit }) {
49+
const { t } = useLocale()
50+
4851
const abortController = new AbortController()
4952

5053
onUnmounted(() => abortController.abort())
@@ -73,7 +76,14 @@ export const VColorPickerPreview = defineComponent({
7376
>
7477
{ SUPPORTS_EYE_DROPPER && (
7578
<div class="v-color-picker-preview__eye-dropper" key="eyeDropper">
76-
<VBtn density="comfortable" disabled={ props.disabled } icon="$eyeDropper" variant="plain" onClick={ openEyeDropper } />
79+
<VBtn
80+
aria-label={ t('$vuetify.colorPicker.ariaLabel.eyedropper') }
81+
density="comfortable"
82+
disabled={ props.disabled }
83+
icon="$eyeDropper"
84+
variant="plain"
85+
onClick={ openEyeDropper }
86+
/>
7787
</div>
7888
)}
7989

@@ -84,6 +94,7 @@ export const VColorPickerPreview = defineComponent({
8494
<div class="v-color-picker-preview__sliders">
8595
<VSlider
8696
class="v-color-picker-preview__track v-color-picker-preview__hue"
97+
name={ t('$vuetify.colorPicker.ariaLabel.hueSlider') }
8798
modelValue={ props.color?.h }
8899
onUpdate:modelValue={ h => emit('update:color', { ...(props.color ?? nullColor), h }) }
89100
step={ 0 }
@@ -99,6 +110,7 @@ export const VColorPickerPreview = defineComponent({
99110
{ !props.hideAlpha && (
100111
<VSlider
101112
class="v-color-picker-preview__track v-color-picker-preview__alpha"
113+
name={ t('$vuetify.colorPicker.ariaLabel.alphaSlider') }
102114
modelValue={ props.color?.a ?? 1 }
103115
onUpdate:modelValue={ a => emit('update:color', { ...(props.color ?? nullColor), a }) }
104116
step={ 1 / 256 }

‎packages/vuetify/src/components/VColorPicker/util/index.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,27 +91,31 @@ const rgba: ColorPickerMode = {
9191
step: 1,
9292
getValue: (c: RGB) => Math.round(c.r),
9393
getColor: (c: RGB, v: string): RGB => ({ ...c, r: Number(v) }),
94+
localeKey: 'redInput',
9495
},
9596
{
9697
label: 'G',
9798
max: 255,
9899
step: 1,
99100
getValue: (c: RGB) => Math.round(c.g),
100101
getColor: (c: RGB, v: string): RGB => ({ ...c, g: Number(v) }),
102+
localeKey: 'greenInput',
101103
},
102104
{
103105
label: 'B',
104106
max: 255,
105107
step: 1,
106108
getValue: (c: RGB) => Math.round(c.b),
107109
getColor: (c: RGB, v: string): RGB => ({ ...c, b: Number(v) }),
110+
localeKey: 'blueInput',
108111
},
109112
{
110113
label: 'A',
111114
max: 1,
112115
step: 0.01,
113116
getValue: ({ a }: RGB) => a != null ? Math.round(a * 100) / 100 : 1,
114117
getColor: (c: RGB, v: string): RGB => ({ ...c, a: Number(v) }),
118+
localeKey: 'alphaInput',
115119
},
116120
],
117121
to: HSVtoRGB,
@@ -135,27 +139,31 @@ const hsla: ColorPickerMode = {
135139
step: 1,
136140
getValue: (c: HSL) => Math.round(c.h),
137141
getColor: (c: HSL, v: string): HSL => ({ ...c, h: Number(v) }),
142+
localeKey: 'hueInput',
138143
},
139144
{
140145
label: 'S',
141146
max: 1,
142147
step: 0.01,
143148
getValue: (c: HSL) => Math.round(c.s * 100) / 100,
144149
getColor: (c: HSL, v: string): HSL => ({ ...c, s: Number(v) }),
150+
localeKey: 'saturationInput',
145151
},
146152
{
147153
label: 'L',
148154
max: 1,
149155
step: 0.01,
150156
getValue: (c: HSL) => Math.round(c.l * 100) / 100,
151157
getColor: (c: HSL, v: string): HSL => ({ ...c, l: Number(v) }),
158+
localeKey: 'lightnessInput',
152159
},
153160
{
154161
label: 'A',
155162
max: 1,
156163
step: 0.01,
157164
getValue: ({ a }: HSL) => a != null ? Math.round(a * 100) / 100 : 1,
158165
getColor: (c: HSL, v: string): HSL => ({ ...c, a: Number(v) }),
166+
localeKey: 'alphaInput',
159167
},
160168
],
161169
to: HSVtoHSL,
@@ -176,6 +184,7 @@ const hexa: ColorPickerMode = {
176184
label: 'HEXA',
177185
getValue: (c: string) => c,
178186
getColor: (c: string, v: string) => v,
187+
localeKey: 'hexaInput',
179188
},
180189
],
181190
to: HSVtoHex,
@@ -189,6 +198,7 @@ const hex = {
189198
label: 'HEX',
190199
getValue: (c: string) => c.slice(0, 7),
191200
getColor: (c: string, v: string) => v,
201+
localeKey: 'hexInput',
192202
},
193203
],
194204
}

‎packages/vuetify/src/components/VConfirmEdit/VConfirmEdit.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { VBtn } from '@/components/VBtn'
33

44
// Composables
5-
import { useLocale } from '@/composables'
5+
import { useLocale } from '@/composables/locale'
66
import { useProxiedModel } from '@/composables/proxiedModel'
77

88
// Utilities

‎packages/vuetify/src/components/VDataTable/composables/sort.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// Composables
2-
import { useLocale } from '@/composables'
2+
import { useLocale } from '@/composables/locale'
33
import { useProxiedModel } from '@/composables/proxiedModel'
44

55
// Utilities

‎packages/vuetify/src/labs/VVideo/VVideoControls.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ import { VSlider } from '@/components/VSlider/VSlider'
88
import { VIconBtn } from '@/labs/VIconBtn/VIconBtn'
99

1010
// Composables
11-
import { useLocale } from '@/composables'
1211
import { useBackgroundColor } from '@/composables/color'
1312
import { makeDensityProps, useDensity } from '@/composables/density'
1413
import { makeElevationProps, useElevation } from '@/composables/elevation'
14+
import { useLocale } from '@/composables/locale'
1515
import { useProxiedModel } from '@/composables/proxiedModel'
1616
import { makeThemeProps, provideTheme } from '@/composables/theme'
1717

‎packages/vuetify/src/labs/VVideo/VVideoVolume.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { VSlider } from '@/components/VSlider/VSlider'
55
import { VIconBtn } from '@/labs/VIconBtn/VIconBtn'
66

77
// Composables
8-
import { useLocale } from '@/composables'
98
import { makeComponentProps } from '@/composables/component'
9+
import { useLocale } from '@/composables/locale'
1010
import { useProxiedModel } from '@/composables/proxiedModel'
1111

1212
// Directives

‎packages/vuetify/src/locale/af.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,4 +153,21 @@ export default {
153153
enterFullscreen: 'Volskerm',
154154
exitFullscreen: 'Verlaat volskerm',
155155
},
156+
colorPicker: {
157+
ariaLabel: {
158+
eyedropper: 'Kies kleur van die skerm af',
159+
hueSlider: 'Tint',
160+
alphaSlider: 'Alfa',
161+
redInput: 'Rooi',
162+
greenInput: 'Groen',
163+
blueInput: 'Blou',
164+
alphaInput: 'Alfa',
165+
hueInput: 'Tint',
166+
saturationInput: 'Versadiging',
167+
lightnessInput: 'Ligtheid',
168+
hexInput: 'HEX-waarde',
169+
hexaInput: 'HEX met alfa-waarde',
170+
changeFormat: 'Verander kleurformaat',
171+
},
172+
},
156173
}

‎packages/vuetify/src/locale/ar.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,4 +153,21 @@ export default {
153153
enterFullscreen: 'ملء الشاشة',
154154
exitFullscreen: 'الخروج من وضع ملء الشاشة',
155155
},
156+
colorPicker: {
157+
ariaLabel: {
158+
eyedropper: 'اختيار لون من الشاشة',
159+
hueSlider: 'درجة اللون',
160+
alphaSlider: 'الشفافية',
161+
redInput: 'أحمر',
162+
greenInput: 'أخضر',
163+
blueInput: 'أزرق',
164+
alphaInput: 'الشفافية',
165+
hueInput: 'درجة اللون',
166+
saturationInput: 'التشبع اللوني',
167+
lightnessInput: 'السطوع',
168+
hexInput: 'قيمة HEX',
169+
hexaInput: 'قيمة HEX مع الشفافية',
170+
changeFormat: 'تغيير تنسيق اللون',
171+
},
172+
},
156173
}

0 commit comments

Comments
 (0)