[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
This commit is contained in:
parent
62b5ef9459
commit
e3896050fc
|
@ -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>
|
||||
),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
@ -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',
|
||||
|
|
|
@ -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}
|
||||
</>
|
||||
|
|
|
@ -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
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue