fix(accessibility): add alternate text to .gm-resize-trigger object

[Kristinita]

1. Changes

1. I added text to .gm-resize-trigger object.
2. After it I minified index.js use UglifyJS.

2. Argumentation

2.1. Summary

For successful lighthouse validation.

2.2. Details

1. <object> elements do not have [alt] text
2. <object> elements must have alternate text

Screen readers have no way of translating non-text content into text announced to users. Instead, they read out alternative text. For screen reader users to obtain the information contained in embedded object elements which must contain short, descriptive alternative text.

The object element defines an embedded object within a document. It is used to embed multimedia (audio, video, applets, etcetera.) or another web page into the document. The object element needs a text alternative so that users of screen readers know the contents of the object.

3. Steps to reproduce

I opened pages with Gemini Scrollbar in Chromium:

1. Before: Gemini Scrollbar documentation page.
2. After: one of pages of my site on localhost.

→ I ran lighthouse from Chrome DevTools → see below parts of lighthouse reports.

4. Behavior

4.1. Before

• Object from DevTools Elements panel:

  <object class="gm-resize-trigger" type="text/html" tabindex="-1" data="about:blank"></object>

• Part of lighthouse report:

<object> elements do not have [alt] text

Screen readers cannot translate non-text content. Adding alt text to <object> elements helps screen readers convey meaning to users. Learn more.

4.2. After

• Object from DevTools Elements panel:

  <object class="gm-resize-trigger" type="text/html" tabindex="-1" data="about:blank">Resize trigger</object>

• Part of lighthouse report:

<object> elements have [alt] text

Screen readers cannot translate non-text content. Adding alt text to <object> elements helps screen readers convey meaning to users.

5. Techniques used

Node.textContent.

Internet Explorer 8 doesn’t support it, but Gemini Scrollbar supports IE9+. Another browsers must successfully support Node.textContent.

6. Testing environment

1. Windows 10.0.18363 Pro N for Workstations 64-bit EN
2. Chromium 85.0.4183.102 (Official Build) (64-bit) with --disable-extensions flag.
3. uglify-js 3.9.4

Thanks.

[Kristinita]

@noeldelgado, please add finally this line:

obj.textContent = 'Resize trigger';

Thanks.

[Kristinita]

Type: Update ⬆

@noeldelgado, please review the changes.

1. Changes

I have updated my changes:

- obj.textContent = 'Resize trigger';
+ obj.setAttribute('aria-label', 'Resize trigger');

2. Argumentation

For Lighthouse 11.4.0 obj.textContent = 'Resize trigger'; ceased to be valid. Lighthouse 11.4.0 links to the Deque University article where the problem <object> elements must have alternate text is solved as follows:

Add alternative text to all embedded <object> elements using either aria-label, aria-labelledby, or title attributes.

3. Comparison

1. Default index.js file, https://cdn.jsdelivr.net/npm/gemini-scrollbar/index.js:

   

2. My previous changes, https://cdn.jsdelivr.net/gh/Kristinita/gemini-scrollbar@fd4400bd136ae02e34d94db3d0570d8ebce7acf1/index.js:

   

3. My current changes, https://cdn.jsdelivr.net/gh/Kristinita/gemini-scrollbar@KiraPatchObjectAltText/index.js:

   

4. Environment

1. gemini-scrollbar 1.5.3
2. Node.js 21.4.0
3. Lighthouse 11.4.0

Thanks.