8000 feat: auto accessibility · coreui/coreui-icons-react@f93307c · GitHub
[go: up one dir, main page]
Skip to content

Commit f93307c

Browse files
mrholek 8000 mrholek
committed
feat: auto accessibility
1 parent 1dae358 commit f93307c

File tree

2 files changed

+46
-26
lines changed

2 files changed

+46
-26
lines changed

‎src/CIcon.css

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,4 +75,17 @@
7575
width: 0.875rem;
7676
height: 0.875rem;
7777
font-size: 0.875rem;
78+
}
79+
80+
.visually-hidden,
81+
.visually-hidden-focusable:not(:focus):not(:focus-within) {
82+
position: absolute!important;
83+
width: 1px!important;
84+
height: 1px!important;
85+
padding: 0!important;
86+
margin: -1px!important;
87+
overflow: hidden!important;
88+
clip: rect(0,0,0,0)!important;
89+
white-space: nowrap!important;
90+
border: 0!important;
7891
}

‎src/CIcon.tsx

Lines changed: 33 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React, { HTMLAttributes, forwardRef, useState, useMemo } from 'react'
33
import classNames from 'classnames'
44
import './CIcon.css'
55

6-
export interface CIconProps extends HTMLAttributes<SVGSVGElement> {
6+
export interface CIconProps extends Omit<HTMLAttributes<SVGSVGElement>, 'content'> {
77
/**
88
* A string of all className you want applied to the component.
99
*/
@@ -17,7 +17,7 @@ export interface CIconProps extends HTMLAttributes<SVGSVGElement> {
1717
/**
1818
* Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.
1919
*/
20-
customClassName?: string | string[] // eslint-disable-line @typescript-eslint/ban-types
20+
customClassName?: string | string[]
2121
/**
2222
* Name of the icon placed in React object or SVG content.
2323
*/
@@ -136,30 +136,37 @@ export const CIcon = forwardRef<SVGSVGElement, CIconProps>(
136136
className,
137137
)
138138

139-
return use ? (
140-
<svg
141-
xmlns="http://www.w3.org/2000/svg"
142-
className={_className}
143-
{...(height && { height: height })}
144-
{...(width && { width: width })}
145-
role="img"
146-
{...rest}
147-
ref={ref}
148-
>
149-
<use href={use}></use>
150-
</svg>
151-
) : (
152-
<svg
153-
xmlns="http://www.w3.org/2000/svg"
154-
viewBox={viewBox}
155-
className={_className}
156-
{...(height && { height: height })}
157-
{...(width && { width: width })}
158-
role="img"
159-
dangerouslySetInnerHTML={{ __html: titleCode + iconCode }}
160-
{...rest}
161-
ref={ref}
162-
/>
139+
return (
140+
<>
141+
{use ? (
142+
<svg
143+
xmlns="http://www.w3.org/2000/svg"
144+
className={_className}
145+
{...(height && { height: height })}
146+
{...(width && { width: width })}
147+
role="img"
148+
aria-hidden="true"
149+
{...rest}
150+
ref={ref}
151+
>
152+
<use href={use}></use>
153+
</svg>
154+
) : (
155+
<svg
156+
xmlns="http://www.w3.org/2000/svg"
157+
viewBox={viewBox}
158+
className={_className}
159+
{...(height && { height: height })}
160+
{...(width && { width: width })}
161+
role="img"
162+
aria-hidden="true"
163+
dangerouslySetInnerHTML={{ __html: titleCode + iconCode }}
164+
{...rest}
165+
ref={ref}
166+
/>
167+
)}
168+
{title && <span className="visually-hidden">{title}</span>}
169+
</>
163170
)
164171
},
165172
)

0 commit comments

Comments
 (0)
0