Merge pull request #5816 from rstudio/bugfix/find-in-files-custom-pat…

…tern fix accessibility of Find in Files when custom pattern option is selected
rstudio · Dec 3, 2019 · 2ff2128 · 2ff2128
2 parents 1c9e71b + f4d3021
commit 2ff2128
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/gwt/src/org/rstudio/core/client/ElementIds.java b/src/gwt/src/org/rstudio/core/client/ElementIds.java
@@ -172,6 +172,7 @@ public static String idFromLabel(String label)
    // FindInFilesDialog
    public final static String FIND_FILES_TEXT = "find_files_text";
    public static String getFindFilesText() { return getElementId(FIND_FILES_TEXT); }
+   public final static String FIND_FILES_PATTERN_EXAMPLE = "find_files_pattern_example";
 
    // ImportFileSettingsDialog
    public final static String IMPORT_FILE_NAME = "import_file_name";

diff --git a/src/gwt/src/org/rstudio/studio/client/workbench/views/output/find/FindInFilesDialog.java b/src/gwt/src/org/rstudio/studio/client/workbench/views/output/find/FindInFilesDialog.java
@@ -19,6 +19,7 @@
 import com.google.gwt.core.client.JavaScriptObject;
 import com.google.gwt.core.client.JsArrayString;
 import com.google.gwt.dom.client.DivElement;
+import com.google.gwt.dom.client.SpanElement;
 import com.google.gwt.dom.client.Style;
 import com.google.gwt.event.dom.client.ChangeEvent;
 import com.google.gwt.event.dom.client.ChangeHandler;
@@ -30,6 +31,7 @@
 import com.google.gwt.user.client.ui.ListBox;
 import com.google.gwt.user.client.ui.TextBox;
 import com.google.gwt.user.client.ui.Widget;
+import org.rstudio.core.client.ElementIds;
 import org.rstudio.core.client.StringUtil;
 import org.rstudio.core.client.files.FileSystemItem;
 import org.rstudio.core.client.js.JsUtil;
@@ -104,6 +106,13 @@ public FindInFilesDialog(OperationWithInput<State> operation)
       labelFilePatterns_.setFor(listPresetFilePatterns_);
       setOkButtonCaption("Find");
 
+      // give custom pattern textbox a label and extended description using the visible
+      // example shown below it
+      spanPatternExample_.setId(ElementIds.getElementId(ElementIds.FIND_FILES_PATTERN_EXAMPLE));
+      Roles.getTextboxRole().setAriaLabelProperty(txtFilePattern_.getElement(), "Custom Filter Pattern");
+      Roles.getTextboxRole().setAriaDescribedbyProperty(txtFilePattern_.getElement(),
+            ElementIds.getAriaElementId(ElementIds.FIND_FILES_PATTERN_EXAMPLE));
+
       listPresetFilePatterns_.addChangeHandler(new ChangeHandler()
       {
          @Override
@@ -251,6 +260,9 @@ private void updateOkButtonEnabled()
    ListBox listPresetFilePatterns_;
    @UiField
    DivElement divCustomFilter_;
+   @UiField
+   SpanElement spanPatternExample_;
+
    private Widget mainWidget_;
    private GlobalDisplay globalDisplay_ = RStudioGinjector.INSTANCE.getGlobalDisplay();
 }
diff --git a/src/gwt/src/org/rstudio/studio/client/workbench/views/output/find/FindInFilesDialog.ui.xml b/src/gwt/src/org/rstudio/studio/client/workbench/views/output/find/FindInFilesDialog.ui.xml
@@ -19,7 +19,7 @@
       }
 
       .example {
-         color: #999;
+         color: #696969;
       }
 
       .presetFilePatterns {
@@ -51,7 +51,7 @@
          <div ui:field="divCustomFilter_">
             <g:TextBox ui:field="txtFilePattern_" styleName="{style.filePattern}"/>
             <br/>
-            <span class="{style.example}">Example: *.R, *.r, *.csv. Separate multiple types with commas.</span>
+            <span ui:field="spanPatternExample_" class="{style.example}">Example: *.R, *.r, *.csv. Separate multiple types with commas.</span>
          </div>
       </p>
    </g:HTMLPanel>