ScrollTop accessibility #5356

primefaces · Nov 23, 2023 · cd349e7 · cd349e7
1 parent 83e160a
commit cd349e7
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 36 deletions.
diff --git a/components/doc/scrolltop/accessibilitydoc.js b/components/doc/scrolltop/accessibilitydoc.js
@@ -5,40 +5,38 @@ import Link from 'next/link';
 
 export function AccessibilityDoc() {
     return (
-        <DevelopmentSection>
-            <DocSectionText id="accessibility" label="Accessibility">
-                <h3>Screen Reader</h3>
-                <p>
-                    ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <Link href="/locale">locale</Link> API by default, you may use your own aria roles and attributes as any valid
-                    attribute is passed to the button element implicitly.
-                </p>
+        <DocSectionText id="accessibility" label="Accessibility">
+            <h3>Screen Reader</h3>
+            <p>
+                ScrollTop uses a button element with an <i>aria-label</i> that refers to the <i>aria.scrollTop</i> property of the <Link href="/locale">locale</Link> API by default, you may use your own aria roles and attributes as any valid
+                attribute is passed to the button element implicitly.
+            </p>
 
-                <h3>Keyboard Support</h3>
-                <div className="doc-tablewrapper">
-                    <table className="doc-table">
-                        <thead>
-                            <tr>
-                                <th>Key</th>
-                                <th>Function</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>
-                                    <i>enter</i>
-                                </td>
-                                <td>Scrolls to top.</td>
-                            </tr>
-                            <tr>
-                                <td>
-                                    <i>space</i>
-                                </td>
-                                <td>Scrolls to top.</td>
-                            </tr>
-                        </tbody>
-                    </table>
-                </div>
-            </DocSectionText>
-        </DevelopmentSection>
+            <h3>Keyboard Support</h3>
+            <div className="doc-tablewrapper">
+                <table className="doc-table">
+                    <thead>
+                        <tr>
+                            <th>Key</th>
+                            <th>Function</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>
+                                <i>enter</i>
+                            </td>
+                            <td>Scrolls to top.</td>
+                        </tr>
+                        <tr>
+                            <td>
+                                <i>space</i>
+                            </td>
+                            <td>Scrolls to top.</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </DocSectionText>
     );
 }
diff --git a/components/lib/scrolltop/ScrollTop.js b/components/lib/scrolltop/ScrollTop.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import PrimeReact, { PrimeReactContext } from '../api/Api';
+import PrimeReact, { PrimeReactContext, localeOption } from '../api/Api';
 import { useHandleStyle } from '../componentbase/ComponentBase';
 import { CSSTransition } from '../csstransition/CSSTransition';
 import { useEventListener, useUnmountEffect } from '../hooks/Hooks';
@@ -91,13 +91,15 @@ export const ScrollTop = React.memo(
         );
         const icon = props.icon || <ChevronUpIcon {...iconProps} />;
         const scrollIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props });
+        const scrollTopAriaLabel = localeOption('aria') ? localeOption('aria').scrollTop : undefined;
         const rootProps = mergeProps(
             {
                 ref: scrollElementRef,
                 type: 'button',
                 className: classNames(props.className, cx('root')),
                 style: props.style,
-                onClick
+                onClick,
+                'aria-label': scrollTopAriaLabel
             },
             ScrollTopBase.getOtherProps(props),
             ptm('root')