fix(a11y): Add meaningful alt text to image viewer (#1349)

box · Apr 7, 2021 · fc9c662 · fc9c662
1 parent c40435e
commit fc9c662
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/lib/viewers/image/ImageViewer.js b/src/lib/viewers/image/ImageViewer.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import getProp from 'lodash/get';
 import AnnotationControlsFSM, { AnnotationInput, AnnotationMode, AnnotationState } from '../../AnnotationControlsFSM';
 import ImageBaseViewer from './ImageBaseViewer';
 import ImageControls from './ImageControls';
@@ -81,6 +82,9 @@ class ImageViewer extends ImageBaseViewer {
 
         this.currentRotationAngle = 0;
 
+        const fileName = getProp(this.options, 'file.name');
+        this.imageEl.setAttribute('alt', fileName);
+
         if (this.options.enableAnnotationsImageDiscoverability) {
             this.addListener('zoom', this.handleZoomEvent);
         }

diff --git a/src/lib/viewers/image/__tests__/ImageViewer-test.js b/src/lib/viewers/image/__tests__/ImageViewer-test.js
@@ -29,6 +29,7 @@ describe('lib/viewers/image/ImageViewer', () => {
             container: containerEl,
             file: {
                 id: '1',
+                name: 'tales.png',
                 file_version: {
                     id: '1',
                 },
@@ -88,6 +89,7 @@ describe('lib/viewers/image/ImageViewer', () => {
         test('should set up layout', () => {
             expect(image.wrapperEl).toHaveClass('bp-image');
             expect(image.imageEl).toHaveClass('bp-is-invisible');
+            expect(image.imageEl).toHaveAttribute('alt', 'tales.png');
         });
 
         test.each`