Fix accessibility violations

tektoncd · Nov 24, 2022 · 8a6d4f3 · 8a6d4f3
1 parent f616c8f
commit 8a6d4f3
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/components/src/components/FormattedDate/FormattedDate.js b/packages/components/src/components/FormattedDate/FormattedDate.js
@@ -52,15 +52,19 @@ const FormattedDateWrapper = ({
     );
   }
 
-  const formattedDate = intl.formatDate(date, {
+  let formattedDate = intl.formatDate(date, {
     day: 'numeric',
     month: 'long',
     year: 'numeric',
     hour: 'numeric',
     minute: 'numeric'
   });
-
-  return <span title={formatTooltip(formattedDate)}>{content}</span>;
+  formattedDate = formatTooltip(formattedDate);
+  return (
+    <span title={formattedDate} aria-label={formattedDate}>
+      {content}
+    </span>
+  );
 };
 
 export default FormattedDateWrapper;
diff --git a/packages/components/src/components/FormattedDuration/FormattedDuration.js b/packages/components/src/components/FormattedDuration/FormattedDuration.js
@@ -84,6 +84,7 @@ class FormattedDurationWrapper extends Component {
           this.durationNode = ref;
         }}
         title={this.state.tooltip}
+        aria-label={this.state.tooltip}
       >
         <FormattedDuration
           format="{days} {hours} {minutes} {seconds}"

diff --git a/packages/components/src/components/Tabs/Tabs.js b/packages/components/src/components/Tabs/Tabs.js
@@ -19,7 +19,11 @@ import {
 } from 'carbon-components-react';
 
 const TabContent = ({ selected, ...other }) =>
-  selected && <CarbonTabContent selected={selected} {...other} />;
+  selected ? (
+    <CarbonTabContent selected={selected} {...other} />
+  ) : (
+    <span className="tkn--visually-hidden" id={other.id} />
+  );
 
 const Tabs = ({ children, ...other }) => (
   <CarbonTabs {...other}>