mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-20 02:10:15 +01:00
1143f73f59
If you've got a screen reader that is reading out the whole page, each icon button (i.e., `<button><SVG></button>`) will have both the button's aria-label read out as well as the title from the SVG (which is usually just "image"). Since we are pretty good about setting aria-labels, we should instead use `aria-hidden="true"` on these images, since they are not useful to be read out. I don't consider this a comprehensive review of all icons in the app, but I knocked out all the low hanging fruit in this commit.
35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '~/utils';
|
|
|
|
type IconProps = {
|
|
className?: string;
|
|
size?: string;
|
|
};
|
|
|
|
const EditIcon = React.forwardRef<SVGSVGElement, IconProps>((props: IconProps, ref) => {
|
|
const { className = 'icon-md', size = '1.2em' } = props;
|
|
return (
|
|
<svg
|
|
ref={ref}
|
|
fill="none"
|
|
strokeWidth="2"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
height={size}
|
|
width={size}
|
|
className={cn(className)}
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M13.2929 4.29291C15.0641 2.52167 17.9359 2.52167 19.7071 4.2929C21.4783 6.06414 21.4783 8.93588 19.7071 10.7071L18.7073 11.7069L11.1603 19.2539C10.7182 19.696 10.1489 19.989 9.53219 20.0918L4.1644 20.9864C3.84584 21.0395 3.52125 20.9355 3.29289 20.7071C3.06453 20.4788 2.96051 20.1542 3.0136 19.8356L3.90824 14.4678C4.01103 13.8511 4.30396 13.2818 4.7461 12.8397L13.2929 4.29291ZM13 7.41422L6.16031 14.2539C6.01293 14.4013 5.91529 14.591 5.88102 14.7966L5.21655 18.7835L9.20339 18.119C9.40898 18.0847 9.59872 17.9871 9.7461 17.8397L16.5858 11L13 7.41422ZM18 9.5858L14.4142 6.00001L14.7071 5.70712C15.6973 4.71693 17.3027 4.71693 18.2929 5.70712C19.2831 6.69731 19.2831 8.30272 18.2929 9.29291L18 9.5858Z"
|
|
fill="currentColor"
|
|
></path>
|
|
</svg>
|
|
);
|
|
});
|
|
|
|
export default EditIcon;
|