Workspace add focus styling (#3192)

__tests__/integration/mirador/index.html

@@ -22,6 +22,8 @@
          manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json',
        }],
        catalog: [
+         { manifestId: 'https://iiif.bodleian.ox.ac.uk/iiif/manifest/e32a277e-91e2-4a6d-8ba6-cc4bad230410.json' },
+         { manifestId: 'https://iiif.harvardartmuseums.org/manifests/object/299843' },
          { manifestId: "https://media.nga.gov/public/manifests/nga_highlights.json", provider: "National Gallery of Art"},
          { manifestId: "https://data.ucd.ie/api/img/manifests/ucdlib:33064", provider: "Irish Architectural Archive"},
          { manifestId: "https://wellcomelibrary.org/iiif/b18035723/manifest", provider: "Wellcome Library"},

__tests__/src/components/ManifestListItem.test.js

@@ -23,9 +23,10 @@ function createWrapper(props) {
 
 describe('ManifestListItem', () => {
   it('renders without an error', () => {
-    const wrapper = createWrapper();
+    const wrapper = createWrapper({ buttonRef: 'ref' });
     expect(wrapper.find('.mirador-manifest-list-item').length).toBe(1);
     expect(wrapper.find(ButtonBase).length).toBe(1);
+    expect(wrapper.find(ButtonBase).getElement().ref).toBe('ref');
     expect(wrapper.find(ButtonBase).find(Typography).children().text()).toEqual('xyz');
   });
   it('adds a class when the item is active', () => {

__tests__/src/components/WorkspaceAdd.test.js

@@ -31,6 +31,15 @@ describe('WorkspaceAdd', () => {
     expect(wrapper.find(ManifestListItem).length).toBe(2);
   });
 
+  it('focuses on the first manifest item', () => {
+    const el = { focus: jest.fn() };
+    const wrapper = createWrapper();
+    expect(wrapper.find(ManifestListItem).at(1).prop('buttonRef')).toBe(undefined);
+    wrapper.find(ManifestListItem).at(0).prop('buttonRef')(el);
+
+    expect(el.focus).toHaveBeenCalled();
+  });
+
   it('without manifests, renders an empty message', () => {
     const wrapper = createWrapper({ catalog: [] });
     expect(wrapper.find(ManifestListItem).length).toEqual(0);
@@ -75,6 +84,15 @@ describe('WorkspaceAdd', () => {
     expect(wrapper.find(Drawer).props().open).toBe(false);
   });
 
+  it('scrolls to the top after an item is added', () => {
+    const ref = { current: { scrollTo: jest.fn() } };
+    const wrapper = createWrapper();
+    wrapper.instance().ref = ref;
+    wrapper.instance().onSubmit();
+
+    expect(ref.current.scrollTo).toHaveBeenCalledWith({ behavior: 'smooth', left: 0, top: 0 });
+  });
+
   it('passes a cancel action through to the form', () => {
     const wrapper = createWrapper();
     wrapper.setState({ addResourcesOpen: true });

src/components/ManifestListItem.js

@@ -36,6 +36,7 @@ export class ManifestListItem extends React.Component {
   render() {
     const {
       active,
+      buttonRef,
       manifestId,
       ready,
       title,
@@ -82,6 +83,7 @@ export class ManifestListItem extends React.Component {
           <Grid container className={ns('manifest-list-item')} spacing={2}>
             <Grid item xs={12} sm={6} className={classes.buttonGrid}>
               <ButtonBase
+                ref={buttonRef}
                 className={ns('manifest-list-item-title')}
                 style={{ width: '100%' }}
                 onClick={
@@ -148,6 +150,7 @@ export class ManifestListItem extends React.Component {
 ManifestListItem.propTypes = {
   active: PropTypes.bool,
   addWindow: PropTypes.func.isRequired,
+  buttonRef: PropTypes.elementType,
   classes: PropTypes.objectOf(PropTypes.string),
   error: PropTypes.string,
   fetchManifest: PropTypes.func.isRequired,
@@ -165,6 +168,7 @@ ManifestListItem.propTypes = {
 
 ManifestListItem.defaultProps = {
   active: false,
+  buttonRef: undefined,
   classes: {},
   error: null,
   handleClose: () => {},

src/components/WorkspaceAdd.js

@@ -29,11 +29,19 @@ export class WorkspaceAdd extends React.Component {
     super(props);
 
     this.state = { addResourcesOpen: false };
+    this.ref = React.createRef();
 
+    this.onSubmit = this.onSubmit.bind(this);
     this.setAddResourcesVisibility = this.setAddResourcesVisibility.bind(this);
     this.handleDrop = this.handleDrop.bind(this);
   }
 
+  /** @private */
+  onSubmit() {
+    this.setAddResourcesVisibility(false);
+    this.scrollToTop();
+  }
+
   /**
    * @private
    */
@@ -50,6 +58,16 @@ export class WorkspaceAdd extends React.Component {
     } else {
       addResource(manifestId);
     }
+
+    this.scrollToTop();
+  }
+
+  /** Scroll the list back to the top */
+  scrollToTop() {
+    if (this.ref.current) {
+      const el = this.ref.current;
+      el.scrollTo({ behavior: 'smooth', left: 0, top: 0 });
+    }
   }
 
   /**
@@ -61,8 +79,9 @@ export class WorkspaceAdd extends React.Component {
     } = this.props;
     const { addResourcesOpen } = this.state;
 
-    const manifestList = catalog.map(resource => (
+    const manifestList = catalog.map((resource, index) => (
       <ManifestListItem
+        {...(index === 0 && { buttonRef: (ref => ref && ref.focus()) })}
         key={resource.manifestId}
         manifestId={resource.manifestId}
         provider={resource.provider}
@@ -72,7 +91,7 @@ export class WorkspaceAdd extends React.Component {
 
     return (
       <IIIFDropTarget onDrop={this.handleDrop}>
-        <div className={classNames(ns('workspace-add'), classes.workspaceAdd)}>
+        <div ref={this.ref} className={classNames(ns('workspace-add'), classes.workspaceAdd)}>
           {catalog.length < 1 ? (
             <Grid
               alignItems="center"
@@ -98,7 +117,7 @@ export class WorkspaceAdd extends React.Component {
             <Paper className={classes.list}>
               <Typography variant="srOnly" component="h1">{t('miradorResources')}</Typography>
               <PluginHook {...this.props} />
-              <List>
+              <List disablePadding>
                 {manifestList}
               </List>
             </Paper>
@@ -147,7 +166,7 @@ export class WorkspaceAdd extends React.Component {
               </AppBar>
               <ManifestForm
                 addResourcesOpen={addResourcesOpen}
-                onSubmit={() => (this.setAddResourcesVisibility(false))}
+                onSubmit={this.onSubmit}
                 onCancel={() => (this.setAddResourcesVisibility(false))}
               />
             </Paper>

src/containers/ManifestListItem.js

@@ -43,9 +43,6 @@ const mapDispatchToProps = { addWindow: actions.addWindow, fetchManifest: action
 const styles = theme => ({
   active: {},
   buttonGrid: {
-    '&:hover': {
-      backgroundColor: theme.palette.action.hover,
-    },
   },
   label: {
     textAlign: 'left',
@@ -65,6 +62,13 @@ const styles = theme => ({
     '&$active': {
       borderLeft: `4px solid ${theme.palette.primary.main}`,
     },
+    '&:hover,&:focus-within': {
+      '&$active': {
+        borderLeft: `4px solid ${theme.palette.primary.main}`,
+      },
+      backgroundColor: theme.palette.action.hover,
+      borderLeft: `4px solid ${theme.palette.action.hover}`,
+    },
     borderLeft: '4px solid transparent',
   },
   thumbnail: {