Add descriptive label to textarea formfield via label element; update…

… tests
ProjectMirador · Aug 3, 2023 · d228e21 · d228e21
1 parent 7a4d776
commit d228e21
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/__tests__/MiradorShareEmbed.test.js b/__tests__/MiradorShareEmbed.test.js
@@ -18,17 +18,18 @@ function createWrapper(props) {
 describe('MiradorShareEmbed', () => {
   let wrapper;
 
-  it('renders fieldsets w/ legends for each section of the embed component', () => {
+  it('renders fieldsets w/ legends or labels for each section of the embed component', () => {
     wrapper = createWrapper();
 
     expect(wrapper.find('WithStyles(ForwardRef(FormControl))[component="fieldset"]').length).toBe(2);
-    expect(wrapper.find('WithStyles(ForwardRef(FormLabel))[component="legend"]').length).toBe(2);
+    expect(wrapper.find('WithStyles(ForwardRef(FormLabel))').length).toBe(2);
+    expect(wrapper.find('WithStyles(ForwardRef(FormLabel))[component="legend"]').length).toBe(1);
     expect(wrapper.find(
       'WithStyles(ForwardRef(FormLabel))',
     ).at(0).props().children).toEqual('Select viewer size');
     expect(wrapper.find(
       'WithStyles(ForwardRef(FormLabel))',
-    ).at(1).props().children).toEqual('then copy & paste code');
+    ).at(1).props().children).toEqual('Copy & paste code');
   });
 
   it('renders a radio group w/ a form control for each of the size options', () => {

diff --git a/src/MiradorShareEmbed.js b/src/MiradorShareEmbed.js
@@ -151,9 +151,10 @@ class MiradorShareEmbed extends Component {
           </RadioGroup>
         </FormControl>
         <FormControl component="fieldset" className={classes.formControl}>
-          <FormLabel component="legend" className={classes.legend}>then copy &amp; paste code</FormLabel>
+          <FormLabel className={classes.label} for="copyCode">Copy &amp; paste code</FormLabel>
           <div className={classes.inputContainer}>
             <TextField
+              id="copyCode"
               fullWidth
               multiline
               rows={4}
@@ -176,6 +177,7 @@ MiradorShareEmbed.propTypes = {
     formControl: PropTypes.string,
     formControlLabel: PropTypes.string,
     legend: PropTypes.string,
+    label: PropTypes.string,
     inputContainer: PropTypes.string,
     radioGroup: PropTypes.string,
     selectedFormControlLabel: PropTypes.string,
@@ -221,6 +223,10 @@ const styles = theme => ({
     paddingBottom: theme.spacing(),
     paddingTop: theme.spacing(),
   },
+  label: {
+    paddingBottom: theme.spacing(),
+    paddingTop: theme.spacing(),
+  },
   inputContainer: {
     alignItems: 'flex-end',
     display: 'flex',