[FE] minor UX and A11Y improvement follow-up
Improve a11ty and css stability of the FE fro the admin promotion requests page
The following discussions from !155771 (merged) should be addressed:
-
@peterhegman started a discussion: (+1 comment) nitpick (non-blocking): We can improve accessibility by having a label but having it as screen reader only. I think something like this works:
diff --git a/ee/app/assets/javascripts/admin/role_promotion_requests/components/promotion_requests_table.vue b/ee/app/assets/javascripts/admin/role_promotion_requests/components/promotion_requests_table.vue index b9c19b156f3f..1bffba5d8cee 100644 --- a/ee/app/assets/javascripts/admin/role_promotion_requests/components/promotion_requests_table.vue +++ b/ee/app/assets/javascripts/admin/role_promotion_requests/components/promotion_requests_table.vue @@ -39,7 +39,7 @@ export default { }, { key: 'actions', - label: '', + label: __('Actions'), }, ], }; @@ -67,6 +67,10 @@ export default { <user-date :date="user.lastActivityOn" /> </template> + <template #head(actions)="{ label }"> + <span class="gl-sr-only">{{ label }}</span> + </template> + <template #cell(actions)="{ item: { user } }"> <gl-button @click="$emit('reject', user.id)">{{ __('Reject') }}</gl-button> <gl-button variant="confirm" @click="$emit('approve', user.id)">{{
-
@peterhegman started a discussion: (+1 comment) nitpick (non-blocking, UX): I am not a huge fan of using whitespace for spacing as it causes inconsistencies across our UX. I personally would probably opt to wrap the buttons in a
div
withgl-flex gl-gap-x-3 gl-items-center
🤷