wrap radio buttons in New R Markdown dialog in fieldset with legend

- accessibility requirement
rstudio · Aug 7, 2019 · 21f8efb · 21f8efb
1 parent 22a80c2
commit 21f8efb
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 14 deletions.
diff --git a/src/gwt/src/org/rstudio/core/client/widget/FieldSetPanel.java b/src/gwt/src/org/rstudio/core/client/widget/FieldSetPanel.java
@@ -30,13 +30,23 @@ public FieldSetPanel(String legend, boolean visuallyHideLegend)
    {
       super(DOM.createFieldSet());
 
-      Element legendElement;
-      getElement().appendChild(legendElement = DOM.createLegend());
-      legendElement.setInnerText(legend);
+      getElement().appendChild(legendElement_ = DOM.createLegend());
+      legendElement_.setInnerText(legend);
 
       if (visuallyHideLegend)
       {
-         legendElement.setClassName(ThemeStyles.INSTANCE.visuallyHidden());
+         legendElement_.setClassName(ThemeStyles.INSTANCE.visuallyHidden());
       }
    }
+
+   public FieldSetPanel()
+   {
+      this("", false);
+   }
+
+   public void setLegend(String legend)
+   {
+      legendElement_.setInnerText(legend);
+   }
+   private Element legendElement_;
 }
diff --git a/.../org/rstudio/studio/client/workbench/views/source/editors/text/ui/NewRMarkdownDialog.java b/.../org/rstudio/studio/client/workbench/views/source/editors/text/ui/NewRMarkdownDialog.java
@@ -24,6 +24,7 @@
 import org.rstudio.core.client.StringUtil;
 import org.rstudio.core.client.files.FileSystemItem;
 import org.rstudio.core.client.resources.ImageResource2x;
+import org.rstudio.core.client.widget.FieldSetPanel;
 import org.rstudio.core.client.widget.FormLabel;
 import org.rstudio.core.client.widget.ModalDialog;
 import org.rstudio.core.client.widget.OperationWithInput;
@@ -392,8 +393,7 @@ private void updateOptions(String selectedTemplate)
       else 
       {
 
-         currentTemplate_ = RmdTemplate.getTemplate(templates_,
-                                                    selectedTemplate);
+         currentTemplate_ = RmdTemplate.getTemplate(templates_, selectedTemplate);
          if (currentTemplate_ == null)
             return;
 
@@ -470,12 +470,12 @@ private Widget createFormatOption(String name, String description)
    @UiField WidgetListBox<TemplateMenuItem> listTemplates_;
    @UiField NewRmdStyle style;
    @UiField Resources resources;
+   @UiField FieldSetPanel formatFieldSet_;
    @UiField HTMLPanel templateFormatPanel_;
    @UiField HTMLPanel newTemplatePanel_;
    @UiField HTMLPanel existingTemplatePanel_;
    @UiField(provided=true) RmdTemplateChooser templateChooser_;
    @UiField HTMLPanel shinyInfoPanel_;
-   @UiField Label outputFormatLabel_;
 
    private final Widget mainWidget_;
    private List<RadioButton> formatOptions_;

diff --git a/...rg/rstudio/studio/client/workbench/views/source/editors/text/ui/NewRMarkdownDialog.ui.xml b/...rg/rstudio/studio/client/workbench/views/source/editors/text/ui/NewRMarkdownDialog.ui.xml
@@ -52,11 +52,22 @@
      margin-right: 20px;
    }
 
-   .defaultOutputLabel
+   .defaultOutputLabel legend
    {
      font-weight: bold;
+     padding: 0;
      margin-bottom: 7px;
-     margin-top: 14px;
+   }
+
+   fieldset.defaultOutputLabel
+   {
+      border: none;
+      padding: 0;
+      padding-block-end: 0;
+      padding-inline-end: 0;
+      margin-top: 14px;
+      margin-right: 0;
+      margin-left: 0;
    }
 
    .outputFormatChoice
@@ -97,7 +108,7 @@
 
    .shinyInfoHeader
    {
-     margin-top: 25px;
+     margin-top: 15px;
      margin-bottom: 7px;
    }
 
@@ -136,10 +147,10 @@
                            ui:field="txtAuthor_"></g:TextBox></g:customCell>
               </g:row>
            </g:Grid>
-           <g:Label styleName="{style.defaultOutputLabel}" 
-                    text="Default Output Format:"
-                    ui:field="outputFormatLabel_"></g:Label>
-           <g:HTMLPanel ui:field="templateFormatPanel_"></g:HTMLPanel>
+           <rw:FieldSetPanel ui:field="formatFieldSet_" legend="Default Output Format:" 
+                             styleName="{style.defaultOutputLabel}">
+              <g:HTMLPanel ui:field="templateFormatPanel_"></g:HTMLPanel>
+           </rw:FieldSetPanel>
         </g:HTMLPanel>
         <g:HTMLPanel ui:field="existingTemplatePanel_">
           <rmd:RmdTemplateChooser ui:field="templateChooser_">