Skip to content

Commit

Permalink
fix(entities-plugins, vfg): create plugin form a11y improvements [KHC…
Browse files Browse the repository at this point in the history 
…P-11026] (#1272)

* fix(plugin-form): associate scoped fields label [KHCP-11026]

* fix(vfg): input tooltip aria-labelledby [KHCP-11026]

* chore(deps): bump kongponents

* fix(plugins-form): protocols aria-labelledby [KHCP-11026]

* fix(vfg): aria-labelledby in array fields [KHCP-11026]

* chore(deps): bump kongponents

* fix(vfg): tooltip aria-describedby [KHCP-11026]

* chore(deps): kongponents peer dependencies [KHCP-11026]

* fix(vfg): conditional aria-describedby [KHCP-11026]
  • Loading branch information
@portikM
portikM committed Mar 25, 2024
1 parent 45f9b95 commit b1ed04e
Show file tree
Hide file tree
Showing 33 changed files with 823 additions and 460 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
"@evilmartians/lefthook": "^1.6.7",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"@rushstack/eslint-patch": "^1.7.2",
"@types/flat": "^5.0.5",
"@types/js-yaml": "^4.0.9",
Expand Down
4 changes: 2 additions & 2 deletions packages/analytics/analytics-chart/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"vue": ">= 3.3.13 < 4"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong-ui-public/sandbox-layout": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"@types/uuid": "^9.0.8",
"file-saver": "^2.0.5",
"lodash.mapkeys": "^4.6.0",
Expand Down
2 changes: 1 addition & 1 deletion packages/analytics/analytics-metric-provider/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
"@kong-ui-public/analytics-config-store": "workspace:^",
"@kong-ui-public/analytics-utilities": "workspace:^",
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"pinia": ">= 2.1.7 < 3"
}
}
4 changes: 2 additions & 2 deletions packages/analytics/dashboard-renderer/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"@kong-ui-public/i18n": "workspace:^",
"@kong-ui-public/sandbox-layout": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"json-schema-to-ts": "^3.0.1",
"pinia": ">= 2.1.7 < 3",
"swrv": "^1.0.4",
Expand Down Expand Up @@ -73,7 +73,7 @@
"@kong-ui-public/analytics-metric-provider": "workspace:^",
"@kong-ui-public/analytics-utilities": "workspace:^",
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"swrv": "^1.0.4",
"vue": ">= 3.3.13 < 4"
},
Expand Down
4 changes: 2 additions & 2 deletions packages/analytics/metric-cards/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,12 +39,12 @@
"test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
},
"peerDependencies": {
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"vue": ">= 3.3.13 < 4"
},
"devDependencies": {
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"vue": "^3.4.21"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/app-layout/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
"test:unit:open": "cross-env FORCE_COLOR=1 vitest --ui"
},
"peerDependencies": {
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
Expand All @@ -51,7 +51,7 @@
},
"devDependencies": {
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"@types/lodash.clonedeep": "^4.5.9",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/core/documentation/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": ">= 3.3.13 < 4"
},
Expand All @@ -65,7 +65,7 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"vue": "^3.4.21"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/forms/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,13 +56,13 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"vue": "^3.4.21"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"@types/lodash": "^4.14.202",
"pug": "^3.0.2"
},
Expand Down
5 changes: 5 additions & 0 deletions packages/core/forms/src/generator/FormGroup.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
>
<label
v-if="fieldTypeHasLabel(field)"
:aria-describedby="field.help ? getTooltipId(field) : undefined"
class="form-group-label"
:class="field.labelClasses"
:for="getFieldID(field)"
Expand All @@ -17,6 +18,7 @@
max-width="300"
placement="top"
:position-fixed="true"
:tooltip-id="getTooltipId(field)"
>
<div
class="help"
Expand Down Expand Up @@ -160,6 +162,9 @@ export default {
const idPrefix = objGet(this.options, 'fieldIdPrefix', '')
return slugifyFormID(schema, idPrefix)
},
getTooltipId(schema) {
return `${this.getFieldID(schema)}-tooltip`
},
// Get type of field 'field-xxx'. It'll be the name of HTML element
getFieldType(fieldSchema) {
return 'field-' + fieldSchema.type
Expand Down
4 changes: 4 additions & 0 deletions packages/core/forms/src/generator/fields/abstractField.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,10 @@ export default {
return slugifyFormID(schema, idPrefix) + (unique ? '-' + uniqueId() : '')
},

getLabelId(schema) {
return `${this.getFieldID(schema)}-label`
},

getFieldClasses() {
return objGet(this.schema, 'fieldClasses', [])
},
Expand Down
3 changes: 3 additions & 0 deletions packages/core/forms/src/generator/fields/advanced/FieldArray.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@
>
<FieldTextArea
v-if=" schema.inputAttributes?.type === 'textarea'"
:aria-labelledby="getLabelId(schema)"
class="k-input"
:form-options="formOptions"
:model="item"
Expand All @@ -53,6 +54,7 @@
<input
v-else
v-model="value[index]"
:aria-labelledby="getLabelId(schema)"
v-bind="schema.inputAttributes"
:type="schema.inputAttributes?.type || 'text'"
>
Expand All @@ -68,6 +70,7 @@
v-else
v-bind="schema.inputAttributes"
v-model="value[index]"
:aria-labelledby="getLabelId(schema)"
type="text"
>
<input
Expand Down
1 change: 1 addition & 0 deletions packages/core/forms/src/generator/fields/advanced/FieldMultiselect.vue
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<template>
<KMultiselect
:aria-labelledby="getLabelId(schema)"
data-testid="field-multiselect"
:items="schema.values"
:label-attributes="{ info: schema.help }"
Expand Down
4 changes: 2 additions & 2 deletions packages/core/misc-widgets/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"vue": ">= 3.3.13 < 4"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"vue": "^3.4.21"
},
"repository": {
Expand Down
4 changes: 2 additions & 2 deletions packages/core/sandbox-layout/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
},
"devDependencies": {
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
},
Expand All @@ -62,7 +62,7 @@
"errorLimit": "200KB"
},
"peerDependencies": {
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"vue": ">= 3.3.13 < 4"
},
"dependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-certificates/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-consumer-credentials/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-consumer-groups/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-consumers/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-gateway-services/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-key-sets/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,14 +22,14 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-keys/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
4 changes: 2 additions & 2 deletions packages/entities/entities-plugins/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@
},
"peerDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": ">= 3.3.13 < 4",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@kong-ui-public/i18n": "workspace:^",
"@kong/design-tokens": "1.12.10",
"@kong/kongponents": "9.0.0-alpha.117",
"@kong/kongponents": "9.0.0-alpha.121",
"axios": "^1.6.7",
"vue": "^3.4.21",
"vue-router": "^4.3.0"
Expand Down
3 changes: 3 additions & 0 deletions packages/entities/entities-plugins/src/components/PluginForm.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -420,6 +420,7 @@ const defaultFormSchema: DefaultPluginsSchemaRecord = reactive({
tags: typedefs.tags as DefaultPluginsFormSchema,
protocols: {
id: 'protocols',
default: [],
help: t('plugins.form.fields.protocols.help'),
label: t('plugins.form.fields.protocols.label'),
Expand Down Expand Up @@ -736,6 +737,7 @@ const initScopeFields = (): void => {
// if the plugin is enabled for a specific type of entity, add it's scope field to the form
if (supportServiceScope) {
scopeEntityArray.push({
id: 'service-id',
model: 'service-id',
label: t('plugins.form.scoping.gateway_service.label'),
placeholder: t('plugins.form.scoping.gateway_service.placeholder'),
Expand All @@ -750,6 +752,7 @@ const initScopeFields = (): void => {
if (supportRouteScope) {
scopeEntityArray.push({
id: 'route-id',
model: 'route-id',
label: t('plugins.form.scoping.route.label'),
placeholder: t('plugins.form.scoping.route.placeholder'),
Expand Down
1 change: 1 addition & 0 deletions packages/entities/entities-plugins/src/composables/plugin-schemas/ApplicationRegistration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export const applicationRegistrationSchema: AppRegFormSchema = {
},
tags: typedefs.tags,
protocols: {
id: 'protocols',
default: [],
type: 'multiselect',
label: 'Protocols',
Expand Down
Loading

0 comments on commit b1ed04e

Please sign in to comment.