fix(a11y): aria-labels

packages/decap-cms-core/src/components/Collection/ViewStyleControl.js

@@ -32,12 +32,14 @@ function ViewStyleControl({ viewStyle, onChangeViewStyle }) {
   return (
     <ViewControlsSection>
       <ViewControlsButton
+        aria-label="list view option"
         isActive={viewStyle === VIEW_STYLE_LIST}
         onClick={() => onChangeViewStyle(VIEW_STYLE_LIST)}
       >
         <Icon type="list" />
       </ViewControlsButton>
       <ViewControlsButton
+        aria-label="grid view option"
         isActive={viewStyle === VIEW_STYLE_GRID}
         onClick={() => onChangeViewStyle(VIEW_STYLE_GRID)}
       >

packages/decap-cms-core/src/components/Editor/EditorControlPane/EditorControl.js

@@ -245,6 +245,7 @@ class EditorControl extends React.Component {
         {({ css, cx }) => (
           <ControlContainer
             className={className}
+            aria-label={`${widgetName} field`}
             css={css`
               ${isHidden && styleStrings.hidden};
             `}

packages/decap-cms-core/src/components/MediaLibrary/MediaLibraryHeader.js

@@ -31,7 +31,7 @@ const LibraryTitle = styled.h1`
 function MediaLibraryHeader({ onClose, title, isPrivate }) {
   return (
     <div>
-      <CloseButton onClick={onClose}>
+      <CloseButton aria-label="close" onClick={onClose}>
         <Icon type="close" />
       </CloseButton>
       <LibraryTitle isPrivate={isPrivate}>{title}</LibraryTitle>

packages/decap-cms-core/src/components/UI/SettingsDropdown.js

@@ -81,7 +81,7 @@ function SettingsDropdown({ displayUrl, isTestRepo, imageUrl, onLogoutClick, t }
         dropdownWidth="100px"
         dropdownPosition="right"
         renderButton={() => (
-          <AvatarDropdownButton>
+          <AvatarDropdownButton aria-label="account options dropdown">
             <Avatar imageUrl={imageUrl} />
           </AvatarDropdownButton>
         )}

packages/decap-cms-ui-default/src/ObjectWidgetTopBar.js

@@ -118,7 +118,7 @@ class ObjectWidgetTopBar extends React.Component {
     return (
       <TopBarContainer>
         <ExpandButtonContainer hasHeading={!!heading}>
-          <ExpandButton onClick={onCollapseToggle} data-testid="expand-button">
+          <ExpandButton onClick={onCollapseToggle} data-testid="expand-button" aria-label={collapsed ? 'expand' : 'collapse'}>
             <Icon type="chevron" direction={collapsed ? 'right' : 'down'} size="small" />
           </ExpandButton>
           {heading}

packages/decap-cms-widget-datetime/src/DateTimeControl.js

@@ -12,7 +12,7 @@ dayjs.extend(customParseFormat);
 dayjs.extend(localizedFormat);
 dayjs.extend(utc);
 
-function Buttons({ t, handleChange, getNow }) {
+function Buttons({ t, fieldName, handleChange, getNow }) {
   return (
     <div
       css={css`
@@ -22,6 +22,7 @@ function Buttons({ t, handleChange, getNow }) {
       `}
     >
       <button
+        aria-label={`set ${fieldName} to now`}
         css={css`
           ${buttons.button}
           ${buttons.widget}
@@ -162,7 +163,7 @@ class DateTimeControl extends React.Component {
   };
 
   render() {
-    const { forID, value, classNameWrapper, setActiveStyle, setInactiveStyle, t, isDisabled } =
+    const { forID, field, value, classNameWrapper, setActiveStyle, setInactiveStyle, t, isDisabled } =
       this.props;
     const { inputType } = this.getFormat();
 
@@ -196,7 +197,7 @@ class DateTimeControl extends React.Component {
           </span>
         )}
         {!isDisabled && (
-          <Buttons t={t} handleChange={v => this.handleChange(v)} getNow={() => this.getNow()} />
+          <Buttons t={t} fieldName={field.get('name')} handleChange={v => this.handleChange(v)} getNow={() => this.getNow()} />
         )}
       </div>
     );

packages/decap-cms-widget-markdown/src/MarkdownControl/Toolbar.js

@@ -281,7 +281,11 @@ export default class Toolbar extends React.Component {
             <ToolbarToggleLabel isActive={!rawMode} offPosition>
               {t('editor.editorWidgets.markdown.richText')}
             </ToolbarToggleLabel>
-            <StyledToggle active={rawMode} onChange={onToggleMode} />
+            <StyledToggle 
+              active={rawMode} 
+              onChange={onToggleMode}
+              aria-label={rawMode ? 'toggle to rich text mode' : 'toggle to markdown mode'}
+              />
             <ToolbarToggleLabel isActive={rawMode}>
               {t('editor.editorWidgets.markdown.markdown')}
             </ToolbarToggleLabel>