-
Notifications
You must be signed in to change notification settings - Fork 28
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add @role for elements #190
base: master
Are you sure you want to change the base?
Conversation
# Conflicts: # packages/desktop/src/list/List.tsx # packages/mobile/src/list/List.tsx
@@ -13,6 +13,8 @@ export interface BlockProps { | |||
|
|||
export const Block: FC<BlockProps> = (props) => ( | |||
<Card | |||
role="section" | |||
aria-label="block" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Атрибут aria-label создаёт текстовую метку текущего элемента в случае отсутствия видимого текста описания элемента.
зачем тут просто block
всегда?
@@ -23,7 +23,7 @@ export const Grid: FC<GridProps> = ({gutter = 20, columns = 12, layout = columns | |||
const rowBlocksCount: number = columns / layoutSum * layoutLength | |||
|
|||
return ( | |||
<Flex wrap="wrap"> | |||
<Flex wrap="wrap" role="section" aria-label="grid"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
есть роль grid и опять label один для всех и не понятно зачем он тут
@@ -200,7 +200,7 @@ export const Icon: FC<IconProps> = ({ | |||
size = 6, | |||
color = '#000', | |||
}) => ( | |||
<Svg width={size} height={size} viewBox="0 0 24 24" focusable="false"> | |||
<Svg width={size} height={size} viewBox="0 0 24 24" focusable="false" role="img" alt={name}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
как я понял тут aria-label
нужен, а не alt
@@ -54,6 +54,7 @@ export const BasicInput: FunctionComponent<BasicInputProps> = (props) => { | |||
onBlur: props.onBlur, | |||
onKeyDown: props.onKeyDown, | |||
onKeyUp: props.onKeyUp, | |||
role: 'textbox', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
перед хендлерами
@@ -7,6 +7,7 @@ export interface LinkControlProps { | |||
onFocus?: () => void | |||
onBlur?: () => void | |||
href?: string | |||
title?: string |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
зачем?
@@ -9,6 +9,7 @@ interface SvgProps { | |||
transition?: string | |||
transform?: string | |||
transformOrigin?: string | |||
alt?: string |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
как выше писал, возможно aria-label
, а не alt
@@ -27,6 +27,7 @@ const BlockAccordionIndent: { | |||
|
|||
export const BlockAccordion: FunctionComponent<BlockAccordionProps<BlockAccordionItemModel>> = ({items, indent = 'm', tabIndex = 0, opened, onChange}) => ( | |||
<AccordionControl<BlockAccordionItemModel> | |||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
лишняя строчка
@@ -45,6 +45,7 @@ const TextColor: { [color in NonNullable<TextProps['color']>]: string } = { | |||
export const Text: FunctionComponent<TextProps> = ({display, compact, size, bold, color, decoration, transform, transition, align, clamp, children}) => ( | |||
<Typo | |||
as="span" | |||
role="textbox" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
зачем у текста textbox?
Добавил role для