Merge branch '38239-update-toggle-design' into 'master'

Update feature toggle design to use icons and make it i18n friendly

Closes #38239

See merge request gitlab-org/gitlab-ce!15904

1 files changed, 11 insertions, 3 deletions

diff --git a/spec/javascripts/vue_shared/components/toggle_button_spec.js b/spec/javascripts/vue_shared/components/toggle_button_spec.js
index 447d74d4e08..859995d33fa 100644
--- a/spec/javascripts/vue_shared/components/toggle_button_spec.js
+++ b/spec/javascripts/vue_shared/components/toggle_button_spec.js
@@ -30,9 +30,9 @@ describe('Toggle Button', () => {
       expect(vm.$el.querySelector('input').getAttribute('value')).toEqual('true');
     });
 
-    it('renders Enabled and Disabled text data attributes', () => {
-      expect(vm.$el.querySelector('button').getAttribute('data-enabled-text')).toEqual('Enabled');
-      expect(vm.$el.querySelector('button').getAttribute('data-disabled-text')).toEqual('Disabled');
+    it('renders input status icon', () => {
+      expect(vm.$el.querySelectorAll('span.toggle-icon').length).toEqual(1);
+      expect(vm.$el.querySelectorAll('svg.s16.toggle-icon-svg').length).toEqual(1);
     });
   });
 
@@ -49,6 +49,14 @@ describe('Toggle Button', () => {
       expect(vm.$el.querySelector('button').classList.contains('is-checked')).toEqual(true);
     });
 
+    it('sets aria-label representing toggle state', () => {
+      vm.value = true;
+      expect(vm.ariaLabel).toEqual('Toggle Status: ON');
+
+      vm.value = false;
+      expect(vm.ariaLabel).toEqual('Toggle Status: OFF');
+    });
+
     it('emits change event when clicked', () => {
       vm.$el.querySelector('button').click();