learningtribes-studio-frontend 1.4.2-alpha.2 → 1.4.2-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "learningtribes-studio-frontend",
-  "version": "1.4.2-alpha.2",
+  "version": "1.4.2-alpha.4",
   "description": "The frontend for the Open edX platform",
   "repository": "Learningtribes/studio-frontend",
   "scripts": {

package/src/components/AssetsDropZone/AssetsDropZone.scss

@@ -44,9 +44,16 @@ $upload-icon: #4c4c8e;
   font-size: 32px;
   width: 32px;
   height: 32px;
-  line-height: 32px;
   color: $upload-icon;
   margin-bottom: 8px;
+  line-height: 1;
+
+  i {
+    font-size: 32px;
+    line-height: 1;
+    display: block;
+    font-style: normal;
+  }
 }
 
 .upload-prompt {
@@ -56,24 +63,8 @@ $upload-icon: #4c4c8e;
 }
 
 .upload-prompt-primary {
-  background: none;
-  border: none;
   color: $upload-prompt-primary;
-  font-size: 16px;
-  font-weight: 600;
   cursor: pointer;
-  padding: 0;
-
-  &:hover,
-  &:focus {
-    color: $upload-prompt-primary;
-    text-decoration: none;
-  }
-
-  &:focus {
-    outline: 2px solid rgba(89, 89, 235, 0.5);
-    outline-offset: 2px;
-  }
 }
 
 .upload-prompt-secondary {

package/src/components/AssetsDropZone/AssetsDropZone.test.jsx

@@ -27,7 +27,7 @@ describe('<AssetsDropZone />', () => {
 
   describe('renders', () => {
     it('contains file browser button', () => {
-      expect(wrapper.find('button').text()).toEqual('Click to upload');
+      expect(wrapper.find('[data-identifier="asset-drop-zone-browse-button"]').text()).toEqual('Click to upload');
     });
     it('hides the icon & upload file size from screen readers', () => {
       expect(wrapper.find('[aria-hidden=true]').length).toBe(2);
@@ -85,7 +85,7 @@ describe('<AssetsDropZone />', () => {
       const mockDropZoneOpen = jest.fn();
       wrapper.instance().dropZoneRef.open = mockDropZoneOpen;
 
-      const button = wrapper.find('button');
+      const button = wrapper.find('[data-identifier="asset-drop-zone"]');
       button.simulate('click');
       expect(mockDropZoneOpen).toBeCalled();
     });

package/src/components/AssetsDropZone/index.jsx

@@ -32,11 +32,15 @@ export default class AssetsDropZone extends React.Component {
 
   setDropZoneRef = (ref) => {
     this.dropZoneRef = ref;
+    if (this.props.buttonRef) {
+      this.props.buttonRef(ref ? ref.node : null);
+    }
   };
 
-  setUploadButtonRef = (ref) => {
-    if (this.props.buttonRef) {
-      this.props.buttonRef(ref);
+  handleKeyDown = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      this.handleClick();
     }
   };
 
@@ -53,35 +57,34 @@ export default class AssetsDropZone extends React.Component {
               <Dropzone
                 accept={this.props.acceptedFileTypes}
                 activeClassName={styles['drop-active']}
+                aria-describedby="asset-drop-zone-max-file-size-label"
                 className={classNames([
                   this.props.compactStyle ? styles['drop-zone-compact'] : styles['drop-zone'],
                 ])}
                 data-identifier="asset-drop-zone"
                 maxSize={this.dropZoneMaxFileSizeBytes}
                 onDrop={this.onDrop}
+                onKeyDown={this.handleKeyDown}
                 ref={this.setDropZoneRef}
+                role="button"
+                tabIndex="0"
               >
-                <i
+                <div
                   aria-hidden="true"
-                  className={classNames('far', 'fa-images', styles['upload-icon'])}
+                  className={styles['upload-icon']}
                   data-identifier="asset-drop-zone-icon"
-                />
+                >
+                  <i className="far fa-images" />
+                </div>
                 <div className={styles['upload-prompt']}>
                   <WrappedMessage message={messages.assetsDropZoneBrowseLabel} >
                     { displayText => (
-                      <button
-                        type="button"
-                        aria-describedby="asset-drop-zone-max-file-size-label"
+                      <span
                         className={styles['upload-prompt-primary']}
                         data-identifier="asset-drop-zone-browse-button"
-                        onClick={(event) => {
-                          event.stopPropagation();
-                          this.handleClick();
-                        }}
-                        ref={this.setUploadButtonRef}
                       >
                         {displayText}
-                      </button>
+                      </span>
                     )}
                   </WrappedMessage>
                   <WrappedMessage message={messages.assetsDropZoneHeader}>