feat: Enable button on empty state

Author: ChrisChV

src/library-authoring/import-course/CourseImportHomePage.tsx

@@ -20,22 +20,33 @@ import { HelpSidebar } from './HelpSidebar';
 import { ImportedCourseCard } from './ImportedCourseCard';
 import messages from './messages';
 
+const ImportCourseButton = () => {
+  const navigate = useNavigate();
+
+  if (getConfig().ENABLE_COURSE_IMPORT_IN_LIBRARY === 'true') {
+    return (
+      <Button iconBefore={Add} onClick={() => navigate('courses')}>
+        <FormattedMessage {...messages.importCourseButton} />
+      </Button>
+    );
+  }
+
+  return null;
+};
+
 const EmptyState = () => (
   <Container size="md" className="py-6">
     <Card>
       <Stack direction="horizontal" gap={3} className="my-6 justify-content-center">
         <FormattedMessage {...messages.emptyStateText} />
-        <Button iconBefore={Add} disabled>
-          <FormattedMessage {...messages.emptyStateButtonText} />
-        </Button>
+        <ImportCourseButton />
       </Stack>
     </Card>
   </Container>
 );
 
 export const CourseImportHomePage = () => {
   const intl = useIntl();
-  const navigate = useNavigate();
   const { libraryId, libraryData, readOnly } = useLibraryContext();
   const { data: courseImports } = useCourseImports(libraryId);
 
@@ -66,13 +77,7 @@ export const CourseImportHomePage = () => {
               title={intl.formatMessage(messages.pageTitle)}
               subtitle={intl.formatMessage(messages.pageSubtitle)}
               hideBorder
-              headerActions={
-                getConfig().ENABLE_COURSE_IMPORT_IN_LIBRARY === 'true' && (
-                  <Button onClick={() => navigate('courses')}>
-                    {intl.formatMessage(messages.importCourseButton)}
-                  </Button>
-                )
-              }
+              headerActions={<ImportCourseButton />}
             />
           </div>
           <Layout xs={[{ span: 9 }, { span: 3 }]}>

src/studio-home/card-item/index.tsx

@@ -176,23 +176,26 @@ const CardMenu = ({
 
 const SelectAction = ({
   itemId,
+  title,
   selectMode,
 }: {
   itemId: string,
+  title: string,
   selectMode: 'single' | 'multiple';
 }) => {
   if (selectMode === 'single') {
     return (
       <Form.Radio
         value={itemId}
+        aria-label={title}
         name={`select-card-item-${itemId}`}
       />
     );
   }
 
   // Multiple
   return (
-    <Form.Checkbox value={itemId} />
+    <Form.Checkbox value={itemId} aria-label={title} />
   );
 };
 
@@ -339,6 +342,7 @@ const CardItem: React.FC<Props> = ({
             <SelectAction
               itemId={itemId}
               selectMode={selectMode}
+              title={title}
             />
           ) : (
             <CardMenu