[App Search] Misc credentials key UI enhancements (#81817)

* Fix screen reader still reading out bullet bullet bullet * Even out horizontal spacing * Break long password text * Make EUI table cell full width on mobile
elastic · Dec 23, 2020 · e389605 · e389605
1 parent 62b5ef9
commit e389605
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/...applications/app_search/components/credentials/credentials_list/credentials_list.test.tsx b/...applications/app_search/components/credentials/credentials_list/credentials_list.test.tsx
@@ -204,7 +204,11 @@ describe('Credentials', () => {
           copy: expect.any(Function),
           toggleIsHidden: expect.any(Function),
           isHidden: expect.any(Boolean),
-          text: <span aria-label="Hidden text">•••••••</span>,
+          text: (
+            <span aria-label="Hidden text">
+              <span aria-hidden={true}>•••••••</span>
+            </span>
+          ),
         });
       });
     });

diff --git a/...blic/applications/app_search/components/credentials/credentials_list/credentials_list.tsx b/...blic/applications/app_search/components/credentials/credentials_list/credentials_list.tsx
@@ -40,6 +40,7 @@ export const CredentialsList: React.FC = () => {
     {
       name: 'Key',
       width: '36%',
+      className: 'eui-textBreakAll',
       render: (token: ApiToken) => {
         const { key } = token;
         if (!key) return null;
@@ -60,6 +61,10 @@ export const CredentialsList: React.FC = () => {
           </EuiCopy>
         );
       },
+      mobileOptions: {
+        // @ts-ignore - EUI's type definitions need to be updated
+        width: '100%',
+      },
     },
     {
       name: 'Modes',

diff --git a/...ise_search/public/applications/app_search/components/credentials/credentials_list/key.tsx b/...ise_search/public/applications/app_search/components/credentials/credentials_list/key.tsx
@@ -39,6 +39,7 @@ export const Key: React.FC<Props> = ({ copy, toggleIsHidden, isHidden, text }) =
         iconType={hideIcon}
         aria-label={hideIconLabel}
         aria-pressed={!isHidden}
+        style={{ marginRight: '0.25em' }}
       />
       {text}
     </>

diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/hidden_text/hidden_text.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/hidden_text/hidden_text.tsx
@@ -25,7 +25,9 @@ export const HiddenText: React.FC<Props> = ({ text, children }) => {
     defaultMessage: 'Hidden text',
   });
   const hiddenText = isHidden ? (
-    <span aria-label={hiddenLabel}>{text.replace(/./g, '•')}</span>
+    <span aria-label={hiddenLabel}>
+      <span aria-hidden={true}>{text.replace(/./g, '•')}</span>
+    </span>
   ) : (
     text
   );