Add keyboard support to resizer

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Add `sl-format-bytes` utility component
 - Add `clearable` and `required` props to `sl-select`
 - Add `slClear` event to `sl-input`
+- Added keyboard support to the preview resizer in the docs
 - Fixed a bug where the `aria-selected` state was incorrect in `sl-menu-item`
 - Fixed a bug where custom properties applied to `sl-tooltip` didn't affect show/hide transitions
 - Fixed a bug where `--sl-input-color-*` custom properties had no affect on `sl-input` and `sl-textarea`

docs/assets/plugins/code-block/code-block.css

@@ -35,6 +35,14 @@
   transition: 250ms background-color;
 }
 
+.code-block__resizer:focus {
+  outline: none;
+  box-shadow: 0 0 0 1px hsl(var(--sl-focus-ring-hue), var(--sl-focus-ring-saturation), var(--sl-focus-ring-lightness)), var(--sl-focus-ring-box-shadow);
+  background-color: var(--sl-color-primary-95);
+  color: var(--sl-color-primary-50);
+  z-index: 2;
+}
+
 @media screen and (max-width: 600px) {
   .code-block__preview {
     padding-right: 1.5rem;

docs/assets/plugins/code-block/code-block.js

@@ -44,7 +44,14 @@
           preview.classList.add('code-block__preview');
           preview.innerHTML = code.textContent;
           preview.innerHTML += `
-            <div class="code-block__resizer">
+            <div
+              class="code-block__resizer"
+              tabindex="0"
+              role="scrollbar"
+              aria-valuenow="0"
+              aria-valuemin="0"
+              aria-valuemax="100"
+            >
               <sl-icon name="grip-horizontal"></sl-icon>
             </div>
           `;
@@ -92,6 +99,7 @@
     // Horizontal resizing
     hook.doneEach(() => {
       [...document.querySelectorAll('.code-block__preview')].map(resizeElement => {
+        const resizer = resizeElement.querySelector('.code-block__resizer');
         let startX;
         let startY;
         let startWidth;
@@ -104,11 +112,10 @@
           startHeight = parseInt(document.defaultView.getComputedStyle(resizeElement).height, 10);
           document.documentElement.addEventListener('mousemove', doDrag, false);
           document.documentElement.addEventListener('mouseup', stopDrag, false);
-          event.preventDefault();
         };
 
         const doDrag = event => {
-          resizeElement.style.width = startWidth + event.clientX - startX + 'px';
+          setWidth(startWidth + event.clientX - startX);
         };
 
         const stopDrag = event => {
@@ -116,7 +123,33 @@
           document.documentElement.removeEventListener('mouseup', stopDrag, false);
         };
 
-        resizeElement.querySelector('.code-block__resizer').addEventListener('mousedown', initDrag);
+        const handleKeyDown = event => {
+          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+            const currentWidth = resizeElement.clientWidth;
+            const maxWidth = resizeElement.parentElement.clientWidth;
+            const incr = event.shiftKey ? 100 : 10;
+
+            event.preventDefault();
+
+            if (event.key === 'ArrowLeft') setWidth(currentWidth - incr);
+            if (event.key === 'ArrowRight') setWidth(currentWidth + incr);
+            if (event.key === 'Home') setWidth(0);
+            if (event.key === 'End') setWidth(maxWidth);
+          }
+        };
+
+        const setWidth = width => {
+          resizeElement.style.width = width + 'px';
+
+          const totalWidth = resizeElement.parentElement.clientWidth;
+          const currentWidth = resizeElement.clientWidth;
+          const valuenow = Math.round((currentWidth / totalWidth) * 100);
+
+          resizer.setAttribute('aria-valuenow', valuenow);
+        };
+
+        resizer.addEventListener('mousedown', initDrag);
+        resizer.addEventListener('keydown', handleKeyDown);
       }, false);
     });
   });