Add tabIndex as a configurable option. (#695)

* options: Add tabIndex as a configurable option. After #587, there had been many complaints about `tabIndex=0` breaking existing behaviour. This PR adds `tabIndex` as an option with it's default set to 0. * README: Add ariaLabel as an option.
Grsmto · Jun 13, 2024 · 54df3bc · 54df3bc
1 parent 6d94a03
commit 54df3bc
Show file tree

Hide file tree

Showing 11 changed files with 36 additions and 8 deletions.
diff --git a/packages/simplebar-angular/src/lib/simplebar-angular.component.html b/packages/simplebar-angular/src/lib/simplebar-angular.component.html
@@ -4,7 +4,7 @@
   </div>
   <div class="simplebar-mask">
     <div class="simplebar-offset">
-      <div class="simplebar-content-wrapper" tabIndex="0" role="region" [attr.aria-label]="ariaLabel">
+      <div class="simplebar-content-wrapper" [attr.tabIndex]="tabIndex" role="region" [attr.aria-label]="ariaLabel">
         <div class="simplebar-content">
           <ng-content></ng-content>
         </div>

diff --git a/packages/simplebar-angular/src/lib/simplebar-angular.component.ts b/packages/simplebar-angular/src/lib/simplebar-angular.component.ts
@@ -26,11 +26,14 @@ export class SimplebarAngularComponent implements OnInit, AfterViewInit {
   elRef: ElementRef;
   SimpleBar: any;
   ariaLabel: string;
+  tabIndex: string;
 
   constructor(elRef: ElementRef, private zone: NgZone) {
     this.elRef = elRef;
     this.ariaLabel =
       this.options.ariaLabel || SimpleBar.defaultOptions.ariaLabel;
+    this.tabIndex =
+      (this.options.tabIndex || SimpleBar.defaultOptions.tabIndex).toString();
   }
 
   ngOnInit() {}

diff --git a/packages/simplebar-core/src/index.ts b/packages/simplebar-core/src/index.ts
@@ -11,6 +11,7 @@ interface Options {
   scrollbarMaxSize: number;
   classNames: Partial<ClassNames>;
   ariaLabel: string;
+  tabIndex: number;
   scrollableNode: HTMLElement | null;
   contentNode: HTMLElement | null;
   autoHide: boolean;
@@ -126,6 +127,7 @@ export default class SimpleBarCore {
     scrollbarMinSize: 25,
     scrollbarMaxSize: 0,
     ariaLabel: 'scrollable content',
+    tabIndex: 0,
     classNames: {
       contentEl: 'simplebar-content',
       contentWrapper: 'simplebar-content-wrapper',

diff --git a/packages/simplebar-react/index.tsx b/packages/simplebar-react/index.tsx
@@ -55,7 +55,7 @@ const SimpleBar = React.forwardRef<SimpleBarCore | null, Props>(
       className: `${classNames.contentWrapper}${
         scrollableNodeProps.className ? ` ${scrollableNodeProps.className}` : ''
       }`,
-      tabIndex: 0,
+      tabIndex: options.tabIndex || SimpleBarCore.defaultOptions.tabIndex,
       role: 'region',
       'aria-label': options.ariaLabel || SimpleBarCore.defaultOptions.ariaLabel,
     };

diff --git a/packages/simplebar-react/tests/__snapshots__/index.test.tsx.snap b/packages/simplebar-react/tests/__snapshots__/index.test.tsx.snap
@@ -103,7 +103,7 @@ exports[`renders with options 1`] = `
           class="simplebar-content-wrapper"
           role="region"
           style="height: auto; overflow-x: hidden; overflow-y: scroll;"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
             class="simplebar-content"

diff --git a/packages/simplebar-react/tests/index.test.tsx b/packages/simplebar-react/tests/index.test.tsx
@@ -18,7 +18,7 @@ test('renders without crashing', () => {
 
 test('renders with options', () => {
   const { container } = render(
-    <SimpleBar forceVisible="y">
+    <SimpleBar forceVisible="y" tabIndex={-1}>
       {[...Array(5)].map((x, i) => (
         <p key={i}>Some content</p>
       ))}

diff --git a/packages/simplebar-vue/component.ts b/packages/simplebar-vue/component.ts
@@ -70,7 +70,8 @@ function renderFn({ h, emit, slots, props }: any) {
                     ? {
                         onScroll,
                         class: classNames.contentWrapper,
-                        tabIndex: 0,
+                        tabIndex: props.tabIndex ||
+                          SimpleBarCore.defaultOptions.tabIndex,
                         role: 'region',
                         'aria-label':
                           props.ariaLabel ||
@@ -79,7 +80,8 @@ function renderFn({ h, emit, slots, props }: any) {
                     : {
                         attrs: {
                           class: classNames.contentWrapper,
-                          tabIndex: 0,
+                        tabIndex: props.tabIndex ||
+                          SimpleBarCore.defaultOptions.tabIndex,
                           role: 'region',
                           'aria-label':
                             props.ariaLabel ||
@@ -162,6 +164,11 @@ export default defineComponent({
      */
     ariaLabel: String,
 
+    /**
+    * Set custom tabIndex attribute.
+    */
+    tabIndex: Number,
+
     /**
      * Activate RTL support by passing `'rtl'`.
      * You will also need a css rule with `direction: rtl`.

diff --git a/packages/simplebar-vue/simplebar-vue.d.ts b/packages/simplebar-vue/simplebar-vue.d.ts
@@ -46,6 +46,11 @@ declare module 'simplebar-vue' {
       */
      ariaLabel?: string;
 
+      /**
+      * Set custom tabIndex attribute.
+      */
+      tabIndex?: number;
+
      /**
       * Activate RTL support by passing `'rtl'`.
       * You will also need a css rule with `direction: rtl`.

diff --git a/packages/simplebar-vue/tests/index.test.ts b/packages/simplebar-vue/tests/index.test.ts
@@ -53,9 +53,10 @@ describe('simplebar', () => {
 
   it('works with options as  data attributes', () => {
     const wrapper = shallowMount(simplebar, {
-      attrs: { 'data-simplebar-force-visible': 'true' },
+      attrs: { 'data-simplebar-force-visible': 'true', 'tabIndex': -1 },
     });
     expect(wrapper.vm.SimpleBar.options.forceVisible).toEqual(true);
+    expect(wrapper.vm.SimpleBar.options.tabIndex).toEqual(-1);
   });
 
   it('works with options as props', () => {

diff --git a/packages/simplebar/README.md b/packages/simplebar/README.md
@@ -254,6 +254,16 @@ Controls the min and max size of the scrollbar in `px`.
 Default for `scrollbarMinSize` is `25`.
 Default for `scrollbarMaxSize` is `0` (no max size).
 
+#### ariaLabel
+
+Set custom aria-label attribute for users with screen reader.
+
+The default value is `scrollable content`.
+
+#### tabIndex
+
+tabIndex to set for simplebar. Defaults to `0`.
+
 ### Apply scroll vertically only
 
 Simply define in css `overflow-x: hidden` on your element.

diff --git a/packages/simplebar/src/index.ts b/packages/simplebar/src/index.ts
@@ -82,7 +82,7 @@ export default class SimpleBar extends SimpleBarCore {
       this.wrapperEl.appendChild(this.placeholderEl);
       this.el.appendChild(this.wrapperEl);
 
-      this.contentWrapperEl?.setAttribute('tabindex', '0');
+      this.contentWrapperEl?.setAttribute('tabindex', this.options.tabIndex.toString());
       this.contentWrapperEl?.setAttribute('role', 'region');
       this.contentWrapperEl?.setAttribute('aria-label', this.options.ariaLabel);
     }