♿️(frontend) hide decorative icons from screen readers per issue #730

Mark unnecessary decorative icons as aria-hidden following feedback
from @cyberbaloo to eliminate redundant screen reader announcements
that create noisy and annoying experience for users relying on
assistive technologies.

src/frontend/src/features/home/components/LaterMeetingDialog.tsx

@@ -71,7 +71,11 @@ export const LaterMeetingDialog = ({
                     aria-label={t('copyUrl')}
                     tooltip={t('copyUrl')}
                   >
-                    {isRoomUrlCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+                    {isRoomUrlCopied ? (
+                      <RiCheckLine aria-hidden="true" />
+                    ) : (
+                      <RiFileCopyLine aria-hidden="true" />
+                    )}
                   </Button>
                 )}
               </div>
@@ -103,13 +107,18 @@ export const LaterMeetingDialog = ({
               >
                 {isCopied ? (
                   <>
-                    <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                    <RiCheckLine
+                      size={18}
+                      style={{ marginRight: '8px' }}
+                      aria-hidden="true"
+                    />
                     {t('copied')}
                   </>
                 ) : (
                   <>
                     <RiFileCopyLine
                       style={{ marginRight: '6px', minWidth: '18px' }}
+                      aria-hidden="true"
                     />
                     {t('copy')}
                   </>
@@ -131,7 +140,11 @@ export const LaterMeetingDialog = ({
             >
               {isCopied ? (
                 <>
-                  <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                  <RiCheckLine
+                    size={18}
+                    style={{ marginRight: '8px' }}
+                    aria-hidden="true"
+                  />
                   {t('copied')}
                 </>
               ) : (
@@ -139,6 +152,7 @@ export const LaterMeetingDialog = ({
                   <RiFileCopyLine
                     size={18}
                     style={{ marginRight: '8px', minWidth: '18px' }}
+                    aria-hidden="true"
                   />
                   {isHovered ? (
                     t('copy')
@@ -173,6 +187,7 @@ export const LaterMeetingDialog = ({
                   className={css({
                     fill: 'primary.500',
                   })}
+                  aria-hidden="true"
                 />
               </div>
               <Text variant="sm" style={{ marginTop: '1rem' }}>

src/frontend/src/features/rooms/components/InviteDialog.tsx

@@ -115,7 +115,11 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
                     aria-label={t('copyUrl')}
                     tooltip={t('copyUrl')}
                   >
-                    {isRoomUrlCopied ? <RiCheckLine /> : <RiFileCopyLine />}
+                    {isRoomUrlCopied ? (
+                      <RiCheckLine aria-hidden="true" />
+                    ) : (
+                      <RiFileCopyLine aria-hidden="true" />
+                    )}
                   </Button>
                 )}
               </div>
@@ -147,13 +151,18 @@ export const InviteDialog = (props: Omit<DialogProps, 'title'>) => {
               >
                 {isCopied ? (
                   <>
-                    <RiCheckLine size={18} style={{ marginRight: '8px' }} />
+                    <RiCheckLine
+                      size={18}
+                      style={{ marginRight: '8px' }}
+                      aria-hidden="true"
+                    />
                     {t('copied')}
                   </>
                 ) : (
                   <>
                     <RiFileCopyLine
                       style={{ marginRight: '6px', minWidth: '18px' }}
+                      aria-hidden="true"
                     />
                     {t('copy')}
                   </>

src/frontend/src/features/rooms/livekit/components/Info.tsx

@@ -78,12 +78,20 @@ export const Info = () => {
         >
           {isCopied ? (
             <>
-              <RiCheckLine size={24} style={{ marginRight: '6px' }} />
+              <RiCheckLine
+                size={24}
+                style={{ marginRight: '6px' }}
+                aria-hidden="true"
+              />
               {t('roomInformation.button.copied')}
             </>
           ) : (
             <>
-              <RiFileCopyLine size={24} style={{ marginRight: '6px' }} />
+              <RiFileCopyLine
+                size={24}
+                style={{ marginRight: '6px' }}
+                aria-hidden="true"
+              />
               {t('roomInformation.button.copy')}
             </>
           )}