fix: [SDK-4897] add accessible name to subscription bell launcher button

package.json

@@ -77,7 +77,7 @@
     },
     {
       "path": "./build/releases/OneSignalSDK.page.es6.js",
-      "limit": "42.65 kB",
+      "limit": "42.7 kB",
       "gzip": true
     },
     {

src/page/bell/Bell.test.ts

@@ -156,6 +156,36 @@ describe('Bell', () => {
       );
     }
 
+    test('launcher button has a default accessible name', async () => {
+      mockCreateDeps();
+      const bell = new Bell({ enable: true, showLauncherAfter: 0 });
+      await bell._create();
+
+      expect(bell._button._element!.getAttribute('aria-label')).toBe('Manage notifications');
+    });
+
+    test('launcher button accessible name is configurable via text', async () => {
+      mockCreateDeps();
+      const bell = new Bell({
+        enable: true,
+        showLauncherAfter: 0,
+        // @ts-expect-error - partial text config
+        text: { 'launcher.button.aria-label': 'Notification preferences' },
+      });
+      await bell._create();
+
+      expect(bell._button._element!.getAttribute('aria-label')).toBe('Notification preferences');
+    });
+
+    test('bell svg is hidden from the accessibility tree', async () => {
+      mockCreateDeps();
+      const bell = new Bell({ enable: true, showLauncherAfter: 0 });
+      await bell._create();
+
+      const svg = bell._button._element!.querySelector('svg')!;
+      expect(svg.getAttribute('aria-hidden')).toBe('true');
+    });
+
     test('mouseleave on launcher blurs the button', async () => {
       mockCreateDeps();
       const bell = new Bell({ enable: true, showLauncherAfter: 0 });

src/page/bell/Bell.ts

@@ -21,7 +21,7 @@ import Dialog from './Dialog';
 import Launcher from './Launcher';
 import Message from './Message';
 
-const logoSvg = `<svg class="onesignal-bell-svg" xmlns="http://www.w3.org/2000/svg" width="99.7" height="99.7" viewBox="0 0 99.7 99.7"><circle class="background" cx="49.9" cy="49.9" r="49.9"/><path class="foreground" d="M50.1 66.2H27.7s-2-.2-2-2.1c0-1.9 1.7-2 1.7-2s6.7-3.2 6.7-5.5S33 52.7 33 43.3s6-16.6 13.2-16.6c0 0 1-2.4 3.9-2.4 2.8 0 3.8 2.4 3.8 2.4 7.2 0 13.2 7.2 13.2 16.6s-1 11-1 13.3c0 2.3 6.7 5.5 6.7 5.5s1.7.1 1.7 2c0 1.8-2.1 2.1-2.1 2.1H50.1zm-7.2 2.3h14.5s-1 6.3-7.2 6.3-7.3-6.3-7.3-6.3z"/><ellipse class="stroke" cx="49.9" cy="49.9" rx="37.4" ry="36.9"/></svg>`;
+const logoSvg = `<svg class="onesignal-bell-svg" xmlns="http://www.w3.org/2000/svg" width="99.7" height="99.7" viewBox="0 0 99.7 99.7" aria-hidden="true"><circle class="background" cx="49.9" cy="49.9" r="49.9"/><path class="foreground" d="M50.1 66.2H27.7s-2-.2-2-2.1c0-1.9 1.7-2 1.7-2s6.7-3.2 6.7-5.5S33 52.7 33 43.3s6-16.6 13.2-16.6c0 0 1-2.4 3.9-2.4 2.8 0 3.8 2.4 3.8 2.4 7.2 0 13.2 7.2 13.2 16.6s-1 11-1 13.3c0 2.3 6.7 5.5 6.7 5.5s1.7.1 1.7 2c0 1.8-2.1 2.1-2.1 2.1H50.1zm-7.2 2.3h14.5s-1 6.3-7.2 6.3-7.3-6.3-7.3-6.3z"/><ellipse class="stroke" cx="49.9" cy="49.9" rx="37.4" ry="36.9"/></svg>`;
 
 const DEFAULT_SIZE: BellSize = 'medium';
 const DEFAULT_POSITION: BellPosition = 'bottom-right';
@@ -31,7 +31,10 @@ const VALID_SIZES: readonly string[] = ['small', 'medium', 'large'];
 const VALID_POSITIONS: readonly string[] = ['bottom-left', 'bottom-right'];
 const VALID_THEMES: readonly string[] = ['default', 'inverse'];
 
+const DEFAULT_LAUNCHER_LABEL = 'Manage notifications';
+
 const DEFAULT_TEXT: BellText = {
+  'launcher.button.aria-label': DEFAULT_LAUNCHER_LABEL,
   'tip.state.unsubscribed': 'Subscribe to notifications',
   'tip.state.subscribed': "You're subscribed to notifications",
   'tip.state.blocked': "You've blocked notifications",
@@ -213,6 +216,10 @@ export default class Bell {
       'beforeend',
       '<button type="button" class="onesignal-bell-launcher-button" popovertarget="onesignal-bell-dialog"></button>',
     );
+    this._button._element?.setAttribute(
+      'aria-label',
+      this._options.text['launcher.button.aria-label'] || DEFAULT_LAUNCHER_LABEL,
+    );
     addDomElement(
       this._launcher._selector,
       'beforeend',

src/page/bell/Message.ts

@@ -64,6 +64,6 @@ export default class Message {
 
   _getTipForState(): string {
     const key = TIP_KEYS[this._bell._state];
-    return key ? this._bell._options.text[key] : '';
+    return key ? (this._bell._options.text[key] ?? '') : '';
   }
 }

src/shared/prompts/types.ts

@@ -116,6 +116,7 @@ export type BellSize = 'small' | 'medium' | 'large';
 export type BellPosition = 'bottom-left' | 'bottom-right';
 
 export interface BellText {
+  'launcher.button.aria-label'?: string;
   'tip.state.unsubscribed': string;
   'tip.state.subscribed': string;
   'tip.state.blocked': string;