From 86227e4c0ab767b36d5eee409dfa7252f875a806 Mon Sep 17 00:00:00 2001 From: Coung Ngo <cngo@gitlab.com> Date: Fri, 27 Nov 2020 13:06:25 +0000 Subject: [PATCH] Update settings_dropdown.vue to use text-sr-only attribute Now that GlDropdown can show SR only text, this commit updates the code to do it in this fashion --- .../diffs/components/settings_dropdown.vue | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue index 78647065c8e..590b2127e6b 100644 --- a/app/assets/javascripts/diffs/components/settings_dropdown.vue +++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue @@ -1,7 +1,6 @@ <script> import { mapActions, mapGetters, mapState } from 'vuex'; import { GlButtonGroup, GlButton, GlDropdown } from '@gitlab/ui'; -import { __ } from '~/locale'; export default { components: { @@ -13,12 +12,6 @@ export default { ...mapGetters('diffs', ['isInlineView', 'isParallelView']), ...mapState('diffs', ['renderTreeList', 'showWhitespace']), }, - mounted() { - this.patchAriaLabel(); - }, - updated() { - this.patchAriaLabel(); - }, methods: { ...mapActions('diffs', [ 'setInlineDiffViewType', @@ -26,17 +19,18 @@ export default { 'setRenderTreeList', 'setShowWhitespace', ]), - patchAriaLabel() { - this.$el - .querySelector('.js-show-diff-settings') - .setAttribute('aria-label', __('Diff view settings')); - }, }, }; </script> <template> - <gl-dropdown icon="settings" toggle-class="js-show-diff-settings" right> + <gl-dropdown + icon="settings" + :text="__('Diff view settings')" + :text-sr-only="true" + toggle-class="js-show-diff-settings" + right + > <div class="gl-px-3"> <span class="gl-font-weight-bold gl-display-block gl-mb-2">{{ __('File browser') }}</span> <gl-button-group class="gl-display-flex"> -- 2.30.9