Remove data-testids from Preferences by fixing web accessibility for font size input

Author: catarak

client/modules/IDE/components/Preferences/Preferences.unit.test.jsx

@@ -140,8 +140,7 @@ describe('<Preferences />', () => {
       });
 
       // get ahold of the text field
-      const input = screen.getByTestId('font-size-text-field');
-      // const input = screen.getByRole("textbox", {name: /decrease font size/i});
+      const input = screen.getByRole('textbox', { name: /font size/i });
 
       // change input to 24
       act(() => {
@@ -150,7 +149,11 @@ describe('<Preferences />', () => {
 
       // submit form
       act(() => {
-        fireEvent.submit(screen.getByTestId('font-size-form'));
+        fireEvent.submit(
+          screen.getByRole('form', {
+            name: /set font size/i
+          })
+        );
       });
 
       // expect that setFontSize was called once with 24
@@ -165,7 +168,7 @@ describe('<Preferences />', () => {
       });
 
       // get ahold of the text field
-      const input = screen.getByTestId('font-size-text-field');
+      const input = screen.getByRole('textbox', { name: /font size/i });
 
       act(() => {
         fireEvent.change(input, { target: { value: '100' } });
@@ -174,7 +177,11 @@ describe('<Preferences />', () => {
       expect(input.value).toBe('100');
 
       act(() => {
-        fireEvent.submit(screen.getByTestId('font-size-form'));
+        fireEvent.submit(
+          screen.getByRole('form', {
+            name: /set font size/i
+          })
+        );
       });
 
       expect(props.setFontSize).toHaveBeenCalledTimes(1);
@@ -188,7 +195,7 @@ describe('<Preferences />', () => {
       });
 
       // get ahold of the text field
-      const input = screen.getByTestId('font-size-text-field');
+      const input = screen.getByRole('textbox', { name: /font size/i });
 
       act(() => {
         fireEvent.change(input, { target: { value: '0' } });
@@ -197,7 +204,11 @@ describe('<Preferences />', () => {
       expect(input.value).toBe('0');
 
       act(() => {
-        fireEvent.submit(screen.getByTestId('font-size-form'));
+        fireEvent.submit(
+          screen.getByRole('form', {
+            name: /set font size/i
+          })
+        );
       });
 
       expect(props.setFontSize).toHaveBeenCalledTimes(1);
@@ -213,7 +224,7 @@ describe('<Preferences />', () => {
       });
 
       // get ahold of the text field
-      const input = screen.getByTestId('font-size-text-field');
+      const input = screen.getByRole('textbox', { name: /font size/i });
 
       act(() => {
         fireEvent.change(input, { target: { value: 'hi' } });
@@ -224,7 +235,11 @@ describe('<Preferences />', () => {
 
       // we hit submit
       act(() => {
-        fireEvent.submit(screen.getByTestId('font-size-form'));
+        fireEvent.submit(
+          screen.getByRole('form', {
+            name: /set font size/i
+          })
+        );
       });
 
       // it still sets the font size but it's still 12
@@ -239,7 +254,7 @@ describe('<Preferences />', () => {
       });
 
       // get ahold of the text field
-      const input = screen.getByTestId('font-size-text-field');
+      const input = screen.getByRole('textbox', { name: /font size/i });
 
       act(() => {
         fireEvent.change(input, { target: { value: '-' } });
@@ -248,7 +263,11 @@ describe('<Preferences />', () => {
       expect(input.value).toBe('12');
 
       act(() => {
-        fireEvent.submit(screen.getByTestId('font-size-form'));
+        fireEvent.submit(
+          screen.getByRole('form', {
+            name: /set font size/i
+          })
+        );
       });
 
       expect(props.setFontSize).toHaveBeenCalledTimes(1);

client/modules/IDE/components/Preferences/index.jsx

@@ -178,13 +178,17 @@ class Preferences extends React.Component {
               </button>
               <form
                 onSubmit={this.onFontInputSubmit}
-                data-testid="font-size-form"
+                aria-label={this.props.t('Preferences.SetFontSize')}
               >
+                <label htmlFor="font-size-value" className="preference--hidden">
+                  {this.props.t('Preferences.FontSize')}
+                </label>
                 <input
                   className="preference__value"
                   aria-live="polite"
                   aria-atomic="true"
                   value={this.state.fontSize}
+                  id="font-size-value"
                   onChange={this.onFontInputChange}
                   type="text"
                   ref={(element) => {

client/styles/components/_preferences.scss

@@ -248,20 +248,3 @@ input[type="number"]::-webkit-outer-spin-button {
   padding-right: #{14 / $base-font-size}rem;
 }
 
-.preference__serve-secure {
-  display: flex;
-  align-items: center;
-}
-
-.serve-secure__icon {
-  @include icon();
-  & svg {
-    height: #{24 / $base-font-size}rem;
-    width: #{24 / $base-font-size}rem;
-  }
-}
-
-.serve-secture__tooltip:after {
-  text-align: left;
-  font-size: #{12 / $base-font-size}rem;
-}

translations/locales/en-US/translations.json

@@ -145,6 +145,8 @@
     "DecreaseFontARIA": "decrease font size",
     "IncreaseFont": "Increase",
     "IncreaseFontARIA": "increase font size",
+    "FontSize": "Font Size",
+    "SetFontSize": "set font size",
     "Autosave": "Autosave",
     "On": "On",
     "AutosaveOnARIA": "autosave on",