fix: rich text editor btn aria label

Adslot · Sep 6, 2022 · 9cc9b12 · 9cc9b12
1 parent 28d7d83
commit 9cc9b12
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 10 deletions.
diff --git a/src/components/RichTextEditor/BlockStyleButtons.jsx b/src/components/RichTextEditor/BlockStyleButtons.jsx
@@ -5,8 +5,8 @@ import BulletIcon from '../../styles/icons/bullet.svg';
 import NumberIcon from '../../styles/icons/number.svg';
 
 const BLOCK_TYPES = [
-  { label: <BulletIcon data-testid="bullet" />, style: 'unordered-list-item' },
-  { label: <NumberIcon data-testid="number" />, style: 'ordered-list-item' },
+  { label: <BulletIcon data-testid="bullet" />, style: 'unordered-list-item', ariaLabel: 'Unordered list' },
+  { label: <NumberIcon data-testid="number" />, style: 'ordered-list-item', ariaLabel: 'Ordered list' },
 ];
 
 const BlockStyleButtons = (props) => {
@@ -24,7 +24,7 @@ const BlockStyleButtons = (props) => {
       active={type.style === blockType}
       label={type.label}
       onToggle={() => onToggle(type.style)}
-      style={type.style}
+      aria-label={type.ariaLabel}
     />
   ));
 };

diff --git a/src/components/RichTextEditor/FileUploadAction.jsx b/src/components/RichTextEditor/FileUploadAction.jsx
@@ -17,6 +17,7 @@ const FileUploadAction = ({ onFileUpload, fileFilter }) => {
           fileInputRef.current.value = '';
           fileInputRef.current.click();
         }}
+        aria-label="Download file"
       />
       <input
         data-testid="file-download-input"

diff --git a/src/components/RichTextEditor/InlineStyleButtons.jsx b/src/components/RichTextEditor/InlineStyleButtons.jsx
@@ -6,9 +6,13 @@ import ItalicIcon from '../../styles/icons/italic.svg';
 import UnderlineIcon from '../../styles/icons/underline.svg';
 
 const INLINE_STYLES = [
-  { label: <BoldIcon data-testid="bold" />, style: 'BOLD' },
-  { label: <ItalicIcon data-testid="italics" />, style: 'ITALIC' },
-  { label: <UnderlineIcon data-testid="underline" />, style: 'UNDERLINE' },
+  { label: <BoldIcon data-testid="bold" />, style: 'BOLD', ariaLabel: 'Bold' },
+  { label: <ItalicIcon data-testid="italics" aria-label="italic" />, style: 'ITALIC', ariaLabel: 'Italic' },
+  {
+    label: <UnderlineIcon data-testid="underline" aria-label="Underline" />,
+    style: 'UNDERLINE',
+    ariaLabel: 'Underline',
+  },
 ];
 
 const InlineStyleButtons = (props) => {
@@ -24,7 +28,7 @@ const InlineStyleButtons = (props) => {
       active={currentStyle.has(type.style)}
       label={type.label}
       onToggle={() => onToggle(type.style)}
-      style={type.style}
+      aria-label={type.ariaLabel}
     />
   ));
 };

diff --git a/src/components/RichTextEditor/MentionAction.jsx b/src/components/RichTextEditor/MentionAction.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ToolbarButton from './ToolbarButton';
 
 const MentionAction = ({ onToggle }) => (
-  <ToolbarButton label={<div className="mention-button">@</div>} onToggle={onToggle} />
+  <ToolbarButton label={<div className="mention-button">@</div>} onToggle={onToggle} aria-label="Mention" />
 );
 
 export default MentionAction;

diff --git a/src/components/RichTextEditor/ToolbarButton.jsx b/src/components/RichTextEditor/ToolbarButton.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Button from '../Button';
 
-const ToolbarButton = ({ onToggle, label, active }) => {
+const ToolbarButton = ({ onToggle, label, active, ...rest }) => {
   const className = classnames('aui--toolbar-button', {
     active,
   });
@@ -18,7 +18,7 @@ const ToolbarButton = ({ onToggle, label, active }) => {
   );
 
   return (
-    <Button className={className} onMouseDown={mouseDownHandler}>
+    <Button className={className} onMouseDown={mouseDownHandler} {...rest}>
       {label}
     </Button>
   );