update

Author: LyndseyBu

packages/components/src/components/Log/_Log.scss

@@ -18,15 +18,15 @@ limitations under the License.
 
 .tkn--scroll-buttons {
   position: fixed;
-  right: .75rem;
-  bottom: 1rem;
+  inset-inline-end: .75rem;
+  inset-block-end: 1rem;
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
   z-index: 10000;
 }
 .tkn--scroll-buttons--maximized{
-   right: 2rem;
+   inset-inline-end: 2rem;
 }
 
 pre.tkn--log {

packages/components/src/components/ScrollButtons/ScrollButtons.jsx

@@ -108,24 +108,34 @@ export function ScrollButtons() {
     };
   }, []);
 
+  const getScrollBehavior = () => {
+    const prefersReducedMotion = window.matchMedia(
+      '(prefers-reduced-motion: reduce)'
+    ).matches;
+    return prefersReducedMotion ? 'auto' : 'smooth';
+  };
+
   const scrollToTop = () => {
     if (maximizedContainerRef.current) {
-      maximizedContainerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+      maximizedContainerRef.current.scrollTo({
+        top: 0,
+        behavior: getScrollBehavior()
+      });
     } else {
-      window.scrollTo({ top: 0, behavior: 'smooth' });
+      window.scrollTo({ top: 0, behavior: getScrollBehavior() });
     }
   };
 
   const scrollToBottom = () => {
     if (maximizedContainerRef.current) {
       maximizedContainerRef.current.scrollTo({
         top: maximizedContainerRef.current.scrollHeight,
-        behavior: 'smooth'
+        behavior: getScrollBehavior()
       });
     } else {
       window.scrollTo({
         top: document.documentElement.scrollHeight,
-        behavior: 'smooth'
+        behavior: getScrollBehavior()
       });
     }
   };
@@ -156,11 +166,7 @@ export function ScrollButtons() {
           id="log-scroll-to-start-btn"
           kind="secondary"
           onClick={scrollToTop}
-          renderIcon={() => (
-            <UpToTop>
-              <title>{scrollTopMessage}</title>
-            </UpToTop>
-          )}
+          renderIcon={UpToTop}
           size="md"
           tooltipPosition="left"
         />
@@ -173,11 +179,7 @@ export function ScrollButtons() {
           id="log-scroll-to-end-btn"
           kind="secondary"
           onClick={scrollToBottom}
-          renderIcon={() => (
-            <DownToBottom>
-              <title>{scrollBottomMessage}</title>
-            </DownToBottom>
-          )}
+          renderIcon={DownToBottom}
           size="md"
           tooltipPosition="left"
         />

packages/components/src/components/ScrollButtons/ScrollButtons.test.jsx

@@ -51,16 +51,16 @@ describe('ScrollButtons', () => {
   });
 
   it('shows scroll-to-bottom button when at the top of scrollable page', async () => {
-    const { queryByTitle } = render(<ScrollButtons />);
+    const { queryByLabelText } = render(<ScrollButtons />);
 
     await waitFor(() => {
-      expect(queryByTitle('Scroll to bottom')).toBeTruthy();
+      expect(queryByLabelText('Scroll to bottom')).toBeTruthy();
     });
-    expect(queryByTitle('Scroll to top')).toBeFalsy();
+    expect(queryByLabelText('Scroll to top')).toBeFalsy();
   });
 
   it('shows scroll-to-top button when at the bottom of scrollable page', async () => {
-    const { queryByTitle } = render(<ScrollButtons />);
+    const { queryByLabelText } = render(<ScrollButtons />);
 
     // Simulate scrolling down
     Object.defineProperty(window, 'scrollY', {
@@ -71,12 +71,12 @@ describe('ScrollButtons', () => {
     fireEvent.scroll(window);
 
     await waitFor(() => {
-      expect(queryByTitle('Scroll to top')).toBeTruthy();
+      expect(queryByLabelText('Scroll to top')).toBeTruthy();
     });
   });
 
   it('shows both buttons when in middle of page', async () => {
-    const { queryByTitle } = render(<ScrollButtons />);
+    const { queryByLabelText } = render(<ScrollButtons />);
 
     // Simulate scrolling to middle
     Object.defineProperty(window, 'scrollY', {
@@ -87,13 +87,13 @@ describe('ScrollButtons', () => {
     fireEvent.scroll(window);
 
     await waitFor(() => {
-      expect(queryByTitle('Scroll to top')).toBeTruthy();
-      expect(queryByTitle('Scroll to bottom')).toBeTruthy();
+      expect(queryByLabelText('Scroll to top')).toBeTruthy();
+      expect(queryByLabelText('Scroll to bottom')).toBeTruthy();
     });
   });
 
   it('hides scroll-to-bottom button when at bottom', async () => {
-    const { queryByTitle } = render(<ScrollButtons />);
+    const { queryByLabelText } = render(<ScrollButtons />);
 
     Object.defineProperty(window, 'scrollY', {
       writable: true,
@@ -103,16 +103,16 @@ describe('ScrollButtons', () => {
     fireEvent.scroll(window);
 
     await waitFor(() => {
-      expect(queryByTitle('Scroll to top')).toBeTruthy();
-      expect(queryByTitle('Scroll to bottom')).toBeFalsy();
+      expect(queryByLabelText('Scroll to top')).toBeTruthy();
+      expect(queryByLabelText('Scroll to bottom')).toBeFalsy();
     });
   });
 
   it('scrolls to top when scroll to top button is clicked', async () => {
     const scrollToSpy = vi.fn();
     window.scrollTo = scrollToSpy;
 
-    const { queryByTitle } = render(<ScrollButtons />);
+    const { queryByLabelText } = render(<ScrollButtons />);
 
     // scroll down first
     Object.defineProperty(window, 'scrollY', {
@@ -123,10 +123,10 @@ describe('ScrollButtons', () => {
     fireEvent.scroll(window);
 
     await waitFor(() => {
-      expect(queryByTitle('Scroll to top')).toBeTruthy();
+      expect(queryByLabelText('Scroll to top')).toBeTruthy();
     });
 
-    const scrollTopButton = queryByTitle('Scroll to top');
+    const scrollTopButton = queryByLabelText('Scroll to top');
     fireEvent.click(scrollTopButton);
 
     expect(scrollToSpy).toHaveBeenCalledWith({
@@ -139,13 +139,13 @@ describe('ScrollButtons', () => {
     const scrollToSpy = vi.fn();
     window.scrollTo = scrollToSpy;
 
-    const { queryByTitle } = render(<ScrollButtons />);
+    const { queryByLabelText } = render(<ScrollButtons />);
 
     await waitFor(() => {
-      expect(queryByTitle('Scroll to bottom')).toBeTruthy();
+      expect(queryByLabelText('Scroll to bottom')).toBeTruthy();
     });
 
-    const scrollBottomButton = queryByTitle('Scroll to bottom');
+    const scrollBottomButton = queryByLabelText('Scroll to bottom');
     fireEvent.click(scrollBottomButton);
 
     expect(scrollToSpy).toHaveBeenCalledWith({
@@ -155,7 +155,7 @@ describe('ScrollButtons', () => {
   });
 
   it('handles maximized container scroll events', async () => {
-    const { queryByTitle, container } = render(<ScrollButtons />);
+    const { queryByLabelText, container } = render(<ScrollButtons />);
 
     // Create container first, then add the maximized class to trigger MutationObserver later
     const maximizedContainer = document.createElement('div');
@@ -184,7 +184,7 @@ describe('ScrollButtons', () => {
 
     // Wait for MutationObserver to detect the class change and apply maximized class
     await waitFor(() => {
-      expect(queryByTitle('Scroll to bottom')).toBeTruthy();
+      expect(queryByLabelText('Scroll to bottom')).toBeTruthy();
       const scrollButtonsContainer = container.querySelector(
         '.tkn--scroll-buttons'
       );
@@ -205,12 +205,12 @@ describe('ScrollButtons', () => {
 
     // Both buttons should be visible
     await waitFor(() => {
-      expect(queryByTitle('Scroll to top')).toBeTruthy();
-      expect(queryByTitle('Scroll to bottom')).toBeTruthy();
+      expect(queryByLabelText('Scroll to top')).toBeTruthy();
+      expect(queryByLabelText('Scroll to bottom')).toBeTruthy();
     });
 
     // test scroll-to-top button in maximized mode
-    const scrollTopButton = queryByTitle('Scroll to top');
+    const scrollTopButton = queryByLabelText('Scroll to top');
     fireEvent.click(scrollTopButton);
 
     expect(containerScrollToSpy).toHaveBeenCalledWith({
@@ -219,7 +219,7 @@ describe('ScrollButtons', () => {
     });
 
     // test scroll-to-bottom button in maximized mode
-    const scrollBottomButton = queryByTitle('Scroll to bottom');
+    const scrollBottomButton = queryByLabelText('Scroll to bottom');
     fireEvent.click(scrollBottomButton);
 
     expect(containerScrollToSpy).toHaveBeenCalledWith({
@@ -236,8 +236,8 @@ describe('ScrollButtons', () => {
     fireEvent.scroll(maximizedContainer);
 
     await waitFor(() => {
-      expect(queryByTitle('Scroll to top')).toBeTruthy();
-      expect(queryByTitle('Scroll to bottom')).toBeFalsy();
+      expect(queryByLabelText('Scroll to top')).toBeTruthy();
+      expect(queryByLabelText('Scroll to bottom')).toBeFalsy();
     });
   });