Fix: Add type to preview buttons

box · Jun 3, 2019 · 155e0cc · 155e0cc
1 parent 4f4a8f1
commit 155e0cc
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 23 deletions.
diff --git a/src/lib/Controls.js b/src/lib/Controls.js
@@ -198,6 +198,7 @@ class Controls {
 
         const button = document.createElement('button');
         button.setAttribute('aria-label', text);
+        button.setAttribute('type', 'button');
         button.setAttribute('title', text);
         button.className = `${CONTROLS_BUTTON_CLASS} ${classList}`;
         button.addEventListener('click', handler);

diff --git a/src/lib/Notification.js b/src/lib/Notification.js
@@ -23,7 +23,7 @@ class Notification {
 
         this.notificationEl.innerHTML = `
             <span id="${uniqueLabel}"></span>
-            <button class="close-btn">${__('notification_button_default_text')}</button>
+            <button class="close-btn" type="button">${__('notification_button_default_text')}</button>
         `.trim();
 
         // Save references to message and button

diff --git a/src/lib/Popup.js b/src/lib/Popup.js
@@ -21,18 +21,18 @@ class Popup {
         this.popupEl.setAttribute('aria-labeledby', uniqueLabel);
 
         this.popupEl.innerHTML = `
-            <div class='bp-modal-header'>
-                <button class='bp-modal-close-button'>
+            <div class="bp-modal-header">
+                <button class="bp-modal-close-button" type="button">
                     ${ICON_CLOSE}
                 </button>
             </div>
-            <div class='bp-modal-content'>
-                <p class='bp-modal-message' id=${uniqueLabel}></p>
-                <div class='bp-modal-actions'>
-                    <button class='bp-btn bp-btn-primary bp-popup-btn'> </button>
+            <div class="bp-modal-content">
+                <p class="bp-modal-message" id=${uniqueLabel}></p>
+                <div class="bp-modal-actions">
+                    <button class="bp-btn bp-btn-primary bp-popup-btn" type="button"> </button>
                 </div>
             </div>
-            <div class='bp-modal-backdrop'> </div>
+            <div class="bp-modal-backdrop"> </div>
         `.trim();
 
         // Save references to message, buttons, content, and backdrop

diff --git a/src/lib/shell.html b/src/lib/shell.html
@@ -8,23 +8,23 @@
             </span>
             <img class="bp-is-hidden bp-custom-logo"></img>
             <div class="bp-header-btns">
-                <button class="bp-btn-plain bp-btn-annotate-draw bp-is-hidden" data-testid="draw-annotation">
+                <button class="bp-btn-plain bp-btn-annotate-draw bp-is-hidden" data-testid="draw-annotation" type="button">
                     <svg class="bp-btn-annotate-draw-enter" width="22" height="21" viewBox="0 0 14.88 14.88" focusable="false">
                         <path d="M11.65,6.64,5.11,13.17.06,14.94,1.83,9.89,8.37,3.35Zm1.41-1.41L9.78,1.94,11.37.35a1,1,0,0,1,1.41,0l1.87,1.87a1,1,0,0,1,0,1.41Z" transform="translate(-0.06 -0.06)" fill-rule="evenodd"/>
                     </svg>
                 </button>
-                <button class="bp-btn-plain bp-btn-annotate-point bp-is-hidden" data-testid="point-annotation">
+                <button class="bp-btn-plain bp-btn-annotate-point bp-is-hidden" data-testid="point-annotation" type="button">
                     <svg width="22" height="21" viewBox="0 0 22 21" focusable="false">
                         <path d="M11 21l-4-4H1.99C.89 17 0 16.11 0 15V2C0 .895.89 0 1.99 0h18.02C21.11 0 22 .89 22 2v13c0 1.105-.89 2-1.99 2H15l-4 4zm-7-9.5c0-.276.228-.5.51-.5h8.98c.282 0 .51.232.51.5 0 .276-.228.5-.51.5H4.51c-.282 0-.51-.232-.51-.5zm0-3c0-.276.23-.5.5-.5h11c.276 0 .5.232.5.5 0 .276-.23.5-.5.5h-11c-.276 0-.5-.232-.5-.5zm0-3c0-.276.22-.5.498-.5h13.004c.275 0 .498.232.498.5 0 .276-.22.5-.498.5H4.498C4.223 6 4 5.768 4 5.5z" fill-rule="evenodd"/>
                     </svg>
                 </button>
-                <button class="bp-btn-plain bp-btn-print bp-is-hidden" data-testid="print-preview">
+                <button class="bp-btn-plain bp-btn-print bp-is-hidden" data-testid="print-preview" type="button">
                     <svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
                         <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
                         <path d="M0 0h24v24H0z" fill="none"/>
                     </svg>
                 </button>
-                <button class="bp-btn-plain bp-btn-download bp-is-hidden" data-testid="download-preview">
+                <button class="bp-btn-plain bp-btn-download bp-is-hidden" data-testid="download-preview" type="button">
                     <svg height="24" viewBox="0 0 24 24" width="24" focusable="false">
                         <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
                         <path d="M0 0h24v24H0z" fill="none"/>
@@ -48,16 +48,16 @@
                     <span class="bp-loading-text"></span>
                 </div>
                 <div class="bp-loading-btn-container">
-                    <button class="bp-btn-plain bp-btn-loading-download bp-is-invisible"></button>
+                    <button class="bp-btn-plain bp-btn-loading-download bp-is-invisible" type="button"></button>
                 </div>
             </div>
-            <button class="bp-btn-plain bp-navigate bp-navigate-left bp-is-hidden">
+            <button class="bp-btn-plain bp-navigate bp-navigate-left bp-is-hidden" type="button">
                 <svg viewBox="0 0 48 48" focusable="false">
                     <path fill="#494949" stroke="#DCDCDC" stroke-miterlimit="10" d="M30.8,33.2L21.7,24l9.2-9.2L28,12L16,24l12,12L30.8,33.2z"/>
                     <path display="none" fill="none" d="M0,0h48v48H0V0z"/>
                 </svg>
             </button>
-            <button class="bp-btn-plain bp-navigate bp-navigate-right bp-is-hidden">
+            <button class="bp-btn-plain bp-navigate bp-navigate-right bp-is-hidden" type="button">
                 <svg viewBox="0 0 48 48" focusable="false">
                     <path fill="#494949" stroke="#DCDCDC" stroke-miterlimit="10" d="M17.2,14.8l9.2,9.2l-9.2,9.2L20,36l12-12L20,12L17.2,14.8z"/>
                     <path display="none" fill="none" d="M48,48H0L0,0l48,0V48z"/>

diff --git a/src/lib/viewers/doc/DocFindBar.js b/src/lib/viewers/doc/DocFindBar.js
@@ -90,9 +90,9 @@ class DocFindBar extends EventEmitter {
      * @return {void}
      */
     createFindButtons() {
-        const findPreviousButton = `<button class="bp-doc-find-prev">${ICON_FIND_DROP_UP}</button>`.trim();
-        const findNextButton = `<button class="bp-doc-find-next">${ICON_FIND_DROP_DOWN}</button>`.trim();
-        const findCloseButton = `<button class="bp-doc-find-close">${ICON_CLOSE}</button>`.trim();
+        const findPreviousButton = `<button class="bp-doc-find-prev" type="button">${ICON_FIND_DROP_UP}</button>`.trim();
+        const findNextButton = `<button class="bp-doc-find-next" type="button">${ICON_FIND_DROP_DOWN}</button>`.trim();
+        const findCloseButton = `<button class="bp-doc-find-close" type="button">${ICON_CLOSE}</button>`.trim();
 
         this.findButtonContainerEl = document.createElement('span');
         this.findButtonContainerEl.classList.add('bp-doc-find-controls');

diff --git a/src/lib/viewers/media/MediaControls.html b/src/lib/viewers/media/MediaControls.html
@@ -1,7 +1,7 @@
 <div class="bp-media-controls-wrapper" data-testid="media-controls-wrapper">
     <div class="bp-media-time-scrubber-container" tabindex="0"></div>
     <div class="bp-media-controls-container">
-        <button class="bp-media-controls-btn bp-media-playpause-icon">
+        <button class="bp-media-controls-btn bp-media-playpause-icon" type="button">
             <svg class="bp-media-play-icon" fill="#fff" height="24" viewBox="0 0 24 24" width="24" focusable="false">
                 <path d="M8 5v14l11-7z"/>
                 <path d="M0 0h24v24H0z" fill="none"/>
@@ -11,7 +11,7 @@
                 <path d="M0 0h24v24H0z" fill="none"/>
             </svg>
         </button>
-        <button class="bp-media-controls-btn bp-media-volume-icon bp-media-volume-icon-is-high">
+        <button class="bp-media-controls-btn bp-media-volume-icon bp-media-volume-icon-is-high" type="button">
             <svg viewBox="-3 5 24 24" width="24" height="24" focusable="false">
                 <path fill="#FFF" d="M0 14v6h4l5 5V9l-5 5H0z" />
                 <path fill="none" d="M-3 5h24v24H-3V5z" />
@@ -35,16 +35,16 @@
         <label class="bp-media-controls-label bp-media-controls-timecode">00:00</label>
         <span class="bp-media-controls-label">&nbsp;&#47;&nbsp;</span>
         <label class="bp-media-controls-label bp-media-controls-duration">00:00</label>
-        <button class="bp-media-controls-btn bp-media-cc-icon" aria-pressed="false">
+        <button class="bp-media-controls-btn bp-media-cc-icon" aria-pressed="false" type="button">
             <div class="bp-media-controls-cc-icon-text">CC</div>
         </button>
-        <button class="bp-media-controls-btn bp-media-gear-icon" aria-haspopup="true">
+        <button class="bp-media-controls-btn bp-media-gear-icon" aria-haspopup="true" type="button">
             <svg width="24" height="24" viewBox="0 0 24 24" focusable="false">
                 <path fill="#fff" d="M19.4 13c0-.3.1-.6.1-1s0-.7-.1-1l2.1-1.6c.2-.1.2-.4.1-.6l-2-3.5c-.1-.2-.4-.3-.6-.2l-2.5 1c-.5-.4-1.1-.7-1.7-1l-.4-2.7c.1-.2-.2-.4-.4-.4h-4c-.2 0-.5.2-.5.4l-.4 2.7c-.6.2-1.1.6-1.7 1l-2.5-1c-.2-.1-.4 0-.6.2l-2 3.5c-.1.1 0 .4.2.6L4.6 11c0 .3-.1.6-.1 1s0 .7.1 1l-2.1 1.6c-.2.1-.2.4-.1.6l2 3.5c.1.2.3.3.6.2l2.5-1c.5.4 1.1.7 1.7 1l.4 2.6c0 .2.2.4.5.4h4c.2 0 .5-.2.5-.4l.4-2.6c.6-.2 1.2-.6 1.7-1l2.5 1c.2.1.5 0 .6-.2l2-3.5c.1-.2.1-.5-.1-.6L19.4 13zM12 15.5c-1.9 0-3.5-1.6-3.5-3.5s1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5-1.6 3.5-3.5 3.5z"/>
             </svg>
             <span class="bp-media-controls-hd">HD</span>
         </button>
-        <button class="bp-media-controls-btn bp-media-fullscreen-icon">
+        <button class="bp-media-controls-btn bp-media-fullscreen-icon" type="button">
             <svg class="bp-enter-fullscreen-icon" width="24" height="24" viewBox="0 0 24 24" focusable="false">
                 <g fill="none" fill-rule="evenodd">
                     <path d="M15 3l2.3 2.3-2.89 2.87 1.42 1.42L18.7 6.7 21 9V3h-6zM3 3v6l2.3-2.3 2.87 2.89 1.42-1.42L6.7 5.3 9 3H3zm11.41 12.83l2.89 2.87L15 21h6v-6l-2.3 2.3-2.87-2.89-1.42 1.42zM5.3 17.3L3 15v6h6l-2.3-2.3 2.89-2.87-1.42-1.42L5.3 17.3z" fill="#fff" />