fixup! ✨(frontend) make delete buttons nvda-accessible

AntoLC · AntoLC · commit 4a084bfe5903 · 2025-09-05T11:04:16.000+02:00
diff --git a/src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx b/src/frontend/apps/impress/src/components/modal/ButtonCloseModal.tsx
@@ -3,33 +3,18 @@ import React from 'react';
 
 import { Box } from '@/components';
 
-type ButtonCloseModalProps = Omit<
-  ButtonProps,
-  'children' | 'icon' | 'aria-label' | 'type'
-> & {
-  ariaLabel: string;
-};
-
-const ButtonCloseModal = ({
-  ariaLabel,
-  disabled = false,
-  size = 'small',
-  color = 'primary-text',
-  ...rest
-}: ButtonCloseModalProps) => {
+const ButtonCloseModal = (props: ButtonProps) => {
   return (
     <Button
       type="button"
-      aria-label={ariaLabel}
-      size={size}
-      color={color}
-      disabled={disabled}
+      size="small"
+      color="primary-text"
       icon={
         <Box as="span" aria-hidden="true" className="material-icons-filled">
           close
         </Box>
       }
-      {...rest}
+      {...props}
     />
   );
 };
diff --git a/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx b/src/frontend/apps/impress/src/components/quick-search/QuickSearchInput.tsx
@@ -32,7 +32,7 @@ export const QuickSearchInput = ({
     return (
       <>
         {children}
-        {separator && <HorizontalSeparator $withPadding={false} />}
+        {separator && <HorizontalSeparator />}
       </>
     );
   }
diff --git a/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx b/src/frontend/apps/impress/src/features/docs/doc-export/components/ModalExport.tsx
@@ -173,7 +173,7 @@ export const ModalExport = ({ onClose, doc }: ModalExportProps) => {
             {t('Download')}
           </Text>
           <ButtonCloseModal
-            ariaLabel={t('Close the download modal')}
+            aria-label={t('Close the download modal')}
             onClick={() => onClose()}
             disabled={isExporting}
           />
diff --git a/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx b/src/frontend/apps/impress/src/features/docs/doc-management/components/ModalRemoveDoc.tsx
@@ -98,7 +98,7 @@ export const ModalRemoveDoc = ({
             {t('Delete a doc')}
           </Text>
           <ButtonCloseModal
-            ariaLabel={t('Close the delete modal')}
+            aria-label={t('Close the delete modal')}
             onClick={() => onClose()}
           />
         </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-search/components/DocSearchModal.tsx
@@ -1,12 +1,11 @@
 import { Modal, ModalSize } from '@openfun/cunningham-react';
-import { Command } from 'cmdk';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDebouncedCallback } from 'use-debounce';
 
-import { Box, Icon } from '@/components';
+import { Box } from '@/components';
 import ButtonCloseModal from '@/components/modal/ButtonCloseModal';
 import { QuickSearch } from '@/components/quick-search';
 import { Doc, useDocUtils } from '@/docs/doc-management';
@@ -73,90 +72,68 @@ const DocSearchModalGlobal = ({
         $justify="space-between"
         className="--docs--doc-search-modal"
       >
-        <Box $direction="row" $align="center" $gap="sm">
-          <Box $flex="1">
-            <QuickSearch
-              placeholder={t('Type the name of a document')}
-              loading={loading}
-              onFilter={handleInputSearch}
-              inputContent={
-                <Box
-                  $direction="row"
-                  $align="center"
-                  $gap="sm"
-                  $padding={{ horizontal: 'base', vertical: 'sm' }}
-                >
-                  <Icon iconName="search" $variation="600" />
-                  <Box $flex="1">
-                    <Command.Input
-                      aria-label={t('Quick search input')}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                      }}
-                      placeholder={t('Type the name of a document')}
-                      onValueChange={handleInputSearch}
-                    />
-                  </Box>
-                  <ButtonCloseModal
-                    ariaLabel={t('Close the search modal')}
-                    onClick={modalProps.onClose}
-                    size="small"
-                    color="primary-text"
-                  />
-                </Box>
-              }
-            >
+        <Box $position="absolute" $css="top: 12px; right: 12px;">
+          <ButtonCloseModal
+            aria-label={t('Close the search modal')}
+            onClick={modalProps.onClose}
+            size="small"
+            color="primary-text"
+          />
+        </Box>
+        <QuickSearch
+          placeholder={t('Type the name of a document')}
+          loading={loading}
+          onFilter={handleInputSearch}
+        >
+          <Box
+            $padding={{ horizontal: '10px' }}
+            $height={isDesktop ? '500px' : 'calc(100vh - 68px - 1rem)'}
+          >
+            {showFilters && (
+              <DocSearchFilters
+                values={filters}
+                onValuesChange={setFilters}
+                onReset={handleResetFilters}
+              />
+            )}
+            {search.length === 0 && (
               <Box
-                $padding={{ horizontal: '10px' }}
-                $height={isDesktop ? '500px' : 'calc(100vh - 68px - 1rem)'}
+                $direction="column"
+                $height="100%"
+                $align="center"
+                $justify="center"
               >
-                {showFilters && (
-                  <DocSearchFilters
-                    values={filters}
-                    onValuesChange={setFilters}
-                    onReset={handleResetFilters}
+                <Image
+                  className="c__image-system-filter"
+                  width={320}
+                  src={EmptySearchIcon}
+                  alt={t('No active search')}
+                />
+              </Box>
+            )}
+            {search && (
+              <>
+                {target === DocSearchTarget.ALL && (
+                  <DocSearchContent
+                    search={search}
+                    filters={filters}
+                    onSelect={handleSelect}
+                    onLoadingChange={setLoading}
                   />
                 )}
-                {search.length === 0 && (
-                  <Box
-                    $direction="column"
-                    $height="100%"
-                    $align="center"
-                    $justify="center"
-                  >
-                    <Image
-                      className="c__image-system-filter"
-                      width={320}
-                      src={EmptySearchIcon}
-                      alt={t('No active search')}
-                    />
-                  </Box>
-                )}
-                {search && (
-                  <>
-                    {target === DocSearchTarget.ALL && (
-                      <DocSearchContent
-                        search={search}
-                        filters={filters}
-                        onSelect={handleSelect}
-                        onLoadingChange={setLoading}
-                      />
-                    )}
-                    {isDocPage && target === DocSearchTarget.CURRENT && (
-                      <DocSearchSubPageContent
-                        search={search}
-                        filters={filters}
-                        onSelect={handleSelect}
-                        onLoadingChange={setLoading}
-                        renderElement={(doc) => <DocSearchItem doc={doc} />}
-                      />
-                    )}
-                  </>
+                {isDocPage && target === DocSearchTarget.CURRENT && (
+                  <DocSearchSubPageContent
+                    search={search}
+                    filters={filters}
+                    onSelect={handleSelect}
+                    onLoadingChange={setLoading}
+                    renderElement={(doc) => <DocSearchItem doc={doc} />}
+                  />
                 )}
-              </Box>
-            </QuickSearch>
+              </>
+            )}
           </Box>
-        </Box>
+        </QuickSearch>
       </Box>
     </Modal>
   );
diff --git a/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx b/src/frontend/apps/impress/src/features/docs/doc-share/components/DocShareModal.tsx
@@ -142,7 +142,7 @@ export const DocShareModal = ({ doc, onClose, isRootDoc = true }: Props) => {
           <Box $direction="row" $justify="space-between" $align="center">
             <Box $align="flex-start">{t('Share the document')}</Box>
             <ButtonCloseModal
-              ariaLabel={t('Close the share modal')}
+              aria-label={t('Close the share modal')}
               onClick={onClose}
             />
           </Box>
diff --git a/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx b/src/frontend/apps/impress/src/features/docs/doc-versioning/components/ModalSelectVersion.tsx
@@ -116,7 +116,7 @@ export const ModalSelectVersion = ({
                   {t('History')}
                 </Text>
                 <ButtonCloseModal
-                  ariaLabel={t('Close the version history modal')}
+                  aria-label={t('Close the version history modal')}
                   onClick={onClose}
                   size="nano"
                 />

Original file line number	Diff line number	Diff line change
`@@ -32,7 +32,7 @@ export const QuickSearchInput = ({`
`32`	`32`	`return (`
`33`	`33`	`<>`
`34`	`34`	`{children}`
`35`		`- {separator && <HorizontalSeparator $withPadding={false} />}`
	`35`	`+ {separator && <HorizontalSeparator />}`
`36`	`36`	`</>`
`37`	`37`	`);`
`38`	`38`	`}`