Add role="presentation" to all decorative <svg> (#3903)

* Add role="presentation" * Add entry
microsoft · May 21, 2021 · e01c446 · e01c446
1 parent 7053f61
commit e01c446
Show file tree

Hide file tree

Showing 8 changed files with 7 additions and 11 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,6 +38,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Improved test reliability and added snapshots to console of test harness in development mode, by [@compulim](https://github.com/compulim), in PR [#3891](https://github.com/microsoft/BotFramework-WebChat/pull/3891)
 -  Fixes [#3757](https://github.com/microsoft/BotFramework-WebChat/issues/3757). IE11: Send box should not be disabled after pressing <kbd>ESCAPE</kbd> key in the transcript, by [@compulim](https://github.com/compulim), in PR [#3902](https://github.com/microsoft/BotFramework-WebChat/pull/3902)
 -  Fixes [#3901](https://github.com/microsoft/BotFramework-WebChat/issues/3901). IE11: SVG icons for buttons should not be focusable, by [@compulim](https://github.com/compulim), in PR [#3902](https://github.com/microsoft/BotFramework-WebChat/pull/3902)
+-  Fixes [#3825](https://github.com/microsoft/BotFramework-WebChat/issues/3825). Add `role="presentation"` to all decorative `<svg>`, by [@compulim](https://github.com/compulim), in PR [#3903](https://github.com/microsoft/BotFramework-WebChat/pull/3903)
 
 ### Changed
 

diff --git a/packages/component/src/Attachment/Assets/DownloadIcon.js b/packages/component/src/Attachment/Assets/DownloadIcon.js
@@ -8,6 +8,7 @@ const DownloadIcon = ({ className, size }) => (
     className={className}
     focusable={false}
     height={ICON_SIZE_FACTOR * size}
+    role="presentation"
     viewBox="0 0 31.8 46"
     width={ICON_SIZE_FACTOR * size}
   >

diff --git a/packages/component/src/Attachment/Assets/ErrorIcon.js b/packages/component/src/Attachment/Assets/ErrorIcon.js
diff --git a/packages/component/src/SendBox/Assets/AttachmentIcon.js b/packages/component/src/SendBox/Assets/AttachmentIcon.js
@@ -1,7 +1,7 @@
 import React from 'react';
 
 const AttachmentIcon = () => (
-  <svg focusable={false} height={28} viewBox="0 0 25.75 46" width={28}>
+  <svg focusable={false} height={28} role="presentation" viewBox="0 0 25.75 46" width={28}>
     <path
       clipRule="evenodd"
       d="M20.75 11.75v21.37a7.69 7.69 0 0 1-.62 3.07 7.95 7.95 0 0 1-4.19 4.19 7.89 7.89 0 0 1-6.13 0 7.95 7.95 0 0 1-4.19-4.19 7.69 7.69 0 0 1-.62-3.07v-22.5a5.27 5.27 0 0 1 .45-2.17 5.69 5.69 0 0 1 3-3 5.48 5.48 0 0 1 4.35 0 5.69 5.69 0 0 1 3 3 5.27 5.27 0 0 1 .45 2.17v22.5a3.41 3.41 0 0 1-.26 1.32 3.31 3.31 0 0 1-1.8 1.8 3.46 3.46 0 0 1-2.63 0 3.31 3.31 0 0 1-1.8-1.8 3.41 3.41 0 0 1-.26-1.32V14h2.25v19.12a1.13 1.13 0 1 0 2.25 0v-22.5a3.4 3.4 0 0 0-.26-1.31 3.31 3.31 0 0 0-1.8-1.8 3.46 3.46 0 0 0-2.63 0 3.31 3.31 0 0 0-1.8 1.8 3.4 3.4 0 0 0-.26 1.31v22.5a5.32 5.32 0 0 0 .45 2.18 5.69 5.69 0 0 0 3 3 5.48 5.48 0 0 0 4.35 0 5.69 5.69 0 0 0 3-3 5.32 5.32 0 0 0 .45-2.18v-21.37z"

diff --git a/packages/component/src/SendBox/Assets/MicrophoneIcon.js b/packages/component/src/SendBox/Assets/MicrophoneIcon.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 // eslint-disable-next-line react/prop-types
 const MicrophoneIcon = ({ className }) => (
-  <svg className={className} focusable={false} height={28} viewBox="0 0 34.75 46" width={28}>
+  <svg className={className} focusable={false} height={28} role="presentation" viewBox="0 0 34.75 46" width={28}>
     <path
       className="a"
       d="M29.75,23v6.36a7,7,0,0,1-.56,2.78,7.16,7.16,0,0,1-3.8,3.8,7,7,0,0,1-2.78.56H18.5v2.25H23V41H11.75v-2.25h4.5V36.5h-4.11a7,7,0,0,1-2.78-.56,7.16,7.16,0,0,1-3.8-3.8,7,7,0,0,1-.56-2.78V23h2.25v6.36a4.72,4.72,0,0,0,.39,1.9,4.78,4.78,0,0,0,2.6,2.6,4.72,4.72,0,0,0,1.9.39h10.47a4.72,4.72,0,0,0,1.9-.39,4.78,4.78,0,0,0,2.6-2.6,4.72,4.72,0,0,0,.39-1.9V23Zm-18,5.62a1.13,1.13,0,0,0,1.13,1.13h9a1.13,1.13,0,0,0,1.12-1.13V8.38a1.13,1.13,0,0,0-1.12-1.13h-9a1.13,1.13,0,0,0-1.13,1.13Zm1.13,3.38a3.41,3.41,0,0,1-1.32-.26,3.31,3.31,0,0,1-1.8-1.8,3.41,3.41,0,0,1-.26-1.32V8.38a3.41,3.41,0,0,1,.26-1.32,3.31,3.31,0,0,1,1.8-1.8,3.41,3.41,0,0,1,1.32-.26h9a3.4,3.4,0,0,1,1.31.26,3.31,3.31,0,0,1,1.8,1.8,3.41,3.41,0,0,1,.26,1.32v20.24a3.41,3.41,0,0,1-.26,1.32,3.31,3.31,0,0,1-1.8,1.8,3.4,3.4,0,0,1-1.31.26Z"

diff --git a/packages/component/src/Toast/CollapseIcon.js b/packages/component/src/Toast/CollapseIcon.js
@@ -6,6 +6,7 @@ const CollapseIcon = ({ className }) => (
     className={(className || '') + ''}
     focusable={false}
     height="9"
+    role="presentation"
     viewBox="0 0 16 9"
     width="16"
     xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/component/src/Toast/DismissIcon.js b/packages/component/src/Toast/DismissIcon.js
@@ -6,6 +6,7 @@ const DismissIcon = ({ className }) => (
     className={(className || '') + ''}
     focusable={false}
     height="14"
+    role="presentation"
     viewBox="0 0 14 14"
     width="14"
     xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/component/src/Toast/ExpandIcon.js b/packages/component/src/Toast/ExpandIcon.js
@@ -6,6 +6,7 @@ const ExpandIcon = ({ className }) => (
     className={(className || '') + ''}
     focusable={false}
     height="10"
+    role="presentation"
     viewBox="0 0 16 10"
     width="16"
     xmlns="http://www.w3.org/2000/svg"