Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
La Quadrature du Net
mamot
Commits
43a29a9d
Commit
43a29a9d
authored
Apr 27, 2017
by
Lindsey Bieda
Committed by
Eugen Rochko
Apr 27, 2017
Browse files
Add aria-label to icon driven dropdown menus (#2516)
parent
0dd71af5
Changes
3
Hide whitespace changes
Inline
Side-by-side
app/assets/javascripts/components/components/dropdown_menu.jsx
View file @
43a29a9d
...
...
@@ -43,13 +43,13 @@ class DropdownMenu extends React.PureComponent {
}
render
()
{
const
{
icon
,
items
,
size
,
direction
}
=
this
.
props
;
const
{
icon
,
items
,
size
,
direction
,
ariaLabel
}
=
this
.
props
;
const
directionClass
=
(
direction
===
"
left
"
)
?
"
dropdown__left
"
:
"
dropdown__right
"
;
return
(
<
Dropdown
ref
=
{
this
.
setRef
}
>
<
DropdownTrigger
className
=
'icon-button'
style
=
{
{
fontSize
:
`
${
size
}
px`
,
width
:
`
${
size
}
px`
,
lineHeight
:
`
${
size
}
px`
}
}
>
<
i
className
=
{
`fa fa-fw fa-
${
icon
}
dropdown__icon`
}
/>
<
DropdownTrigger
className
=
'icon-button'
style
=
{
{
fontSize
:
`
${
size
}
px`
,
width
:
`
${
size
}
px`
,
lineHeight
:
`
${
size
}
px`
}
}
aria-label
=
{
ariaLabel
}
>
<
i
className
=
{
`fa fa-fw fa-
${
icon
}
dropdown__icon`
}
aria-hidden
=
{
true
}
/>
</
DropdownTrigger
>
<
DropdownContent
className
=
{
directionClass
}
>
...
...
@@ -67,7 +67,12 @@ DropdownMenu.propTypes = {
icon
:
PropTypes
.
string
.
isRequired
,
items
:
PropTypes
.
array
.
isRequired
,
size
:
PropTypes
.
number
.
isRequired
,
direction
:
PropTypes
.
string
direction
:
PropTypes
.
string
,
ariaLabel
:
PropTypes
.
string
};
DropdownMenu
.
defaultProps
=
{
ariaLabel
:
"
Menu
"
};
export
default
DropdownMenu
;
app/assets/javascripts/components/components/status_action_bar.jsx
View file @
43a29a9d
...
...
@@ -108,7 +108,7 @@ class StatusActionBar extends React.PureComponent {
<
div
className
=
'status__action-bar-button-wrapper'
><
IconButton
animate
=
{
true
}
active
=
{
status
.
get
(
'
favourited
'
)
}
title
=
{
intl
.
formatMessage
(
messages
.
favourite
)
}
icon
=
'star'
onClick
=
{
this
.
handleFavouriteClick
}
className
=
'star-icon'
/></
div
>
<
div
className
=
'status__action-bar-dropdown'
>
<
DropdownMenu
items
=
{
menu
}
icon
=
'ellipsis-h'
size
=
{
18
}
direction
=
"right"
/>
<
DropdownMenu
items
=
{
menu
}
icon
=
'ellipsis-h'
size
=
{
18
}
direction
=
"right"
ariaLabel
=
"More"
/>
</
div
>
</
div
>
);
...
...
app/assets/javascripts/components/features/status/components/action_bar.jsx
View file @
43a29a9d
...
...
@@ -75,7 +75,7 @@ class ActionBar extends React.PureComponent {
<
div
className
=
'detailed-status__button'
><
IconButton
title
=
{
intl
.
formatMessage
(
messages
.
reply
)
}
icon
=
{
status
.
get
(
'
in_reply_to_id
'
,
null
)
===
null
?
'
reply
'
:
'
reply-all
'
}
onClick
=
{
this
.
handleReplyClick
}
/></
div
>
<
div
className
=
'detailed-status__button'
><
IconButton
disabled
=
{
reblog_disabled
}
active
=
{
status
.
get
(
'
reblogged
'
)
}
title
=
{
reblog_disabled
?
intl
.
formatMessage
(
messages
.
cannot_reblog
)
:
intl
.
formatMessage
(
messages
.
reblog
)
}
icon
=
{
reblogIcon
}
onClick
=
{
this
.
handleReblogClick
}
/></
div
>
<
div
className
=
'detailed-status__button'
><
IconButton
animate
=
{
true
}
active
=
{
status
.
get
(
'
favourited
'
)
}
title
=
{
intl
.
formatMessage
(
messages
.
favourite
)
}
icon
=
'star'
onClick
=
{
this
.
handleFavouriteClick
}
activeStyle
=
{
{
color
:
'
#ca8f04
'
}
}
/></
div
>
<
div
className
=
'detailed-status__button'
><
DropdownMenu
size
=
{
18
}
icon
=
'ellipsis-h'
items
=
{
menu
}
direction
=
"left"
/></
div
>
<
div
className
=
'detailed-status__button'
><
DropdownMenu
size
=
{
18
}
icon
=
'ellipsis-h'
items
=
{
menu
}
direction
=
"left"
ariaLabel
=
"More"
/></
div
>
</
div
>
);
}
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment