Skip to content

Commit 1e18a82

Browse files
khaykovkhaykov
authored
Merge pull request #647 from wordpress-mobile/feature/awesome-accessibility-contentDescription
Add content description for heading and list menu items
2 parents 840ed9c + 76c25f6 commit 1e18a82

File tree

1 file changed

+94
-58
lines changed

1 file changed

+94
-58
lines changed

‎aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt‎

Lines changed: 94 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
package org.wordpress.aztec.toolbar
22

3+
import android.annotation.SuppressLint
34
import android.content.Context
45
import android.os.Build
56
import android.os.Bundle
@@ -21,6 +22,7 @@ import android.widget.PopupMenu
2122
import android.widget.PopupMenu.OnMenuItemClickListener
2223
import android.widget.Toast
2324
import android.widget.ToggleButton
25+
import org.wordpress.android.util.AppLog
2426
import org.wordpress.aztec.AztecText
2527
import org.wordpress.aztec.AztecTextFormat
2628
import org.wordpress.aztec.ITextFormat
@@ -253,49 +255,50 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
253255
override fun onMenuItemClick(item: MenuItem?): Boolean {
254256
val checked = (item?.isChecked == false)
255257
item?.isChecked = checked
258+
val headingButton = findViewById<ToggleButton>(R.id.format_bar_button_heading)
256259

257260
when (item?.itemId) {
258261
// Heading Menu
259262
R.id.paragraph -> {
260263
aztecToolbarListener?.onToolbarFormatButtonClicked(AztecTextFormat.FORMAT_PARAGRAPH, false)
261264
editor?.toggleFormatting(AztecTextFormat.FORMAT_PARAGRAPH)
262-
setHeadingMenuSelector(AztecTextFormat.FORMAT_PARAGRAPH)
265+
updateHeadingMenuItem(AztecTextFormat.FORMAT_PARAGRAPH, headingButton)
263266
return true
264267
}
265268
R.id.heading_1 -> {
266269
aztecToolbarListener?.onToolbarFormatButtonClicked(AztecTextFormat.FORMAT_HEADING_1, false)
267270
editor?.toggleFormatting(AztecTextFormat.FORMAT_HEADING_1)
268-
setHeadingMenuSelector(AztecTextFormat.FORMAT_HEADING_1)
271+
updateHeadingMenuItem(AztecTextFormat.FORMAT_HEADING_1, headingButton)
269272
return true
270273
}
271274
R.id.heading_2 -> {
272275
aztecToolbarListener?.onToolbarFormatButtonClicked(AztecTextFormat.FORMAT_HEADING_2, false)
273276
editor?.toggleFormatting(AztecTextFormat.FORMAT_HEADING_2)
274-
setHeadingMenuSelector(AztecTextFormat.FORMAT_HEADING_2)
277+
updateHeadingMenuItem(AztecTextFormat.FORMAT_HEADING_2, headingButton)
275278
return true
276279
}
277280
R.id.heading_3 -> {
278281
aztecToolbarListener?.onToolbarFormatButtonClicked(AztecTextFormat.FORMAT_HEADING_3, false)
279282
editor?.toggleFormatting(AztecTextFormat.FORMAT_HEADING_3)
280-
setHeadingMenuSelector(AztecTextFormat.FORMAT_HEADING_3)
283+
updateHeadingMenuItem(AztecTextFormat.FORMAT_HEADING_3, headingButton)
281284
return true
282285
}
283286
R.id.heading_4 -> {
284287
aztecToolbarListener?.onToolbarFormatButtonClicked(AztecTextFormat.FORMAT_HEADING_4, false)
285288
editor?.toggleFormatting(AztecTextFormat.FORMAT_HEADING_4)
286-
setHeadingMenuSelector(AztecTextFormat.FORMAT_HEADING_4)
289+
updateHeadingMenuItem(AztecTextFormat.FORMAT_HEADING_4, headingButton)
287290
return true
288291
}
289292
R.id.heading_5 -> {
290293
aztecToolbarListener?.onToolbarFormatButtonClicked(AztecTextFormat.FORMAT_HEADING_5, false)
291294
editor?.toggleFormatting(AztecTextFormat.FORMAT_HEADING_5)
292-
setHeadingMenuSelector(AztecTextFormat.FORMAT_HEADING_5)
295+
updateHeadingMenuItem(AztecTextFormat.FORMAT_HEADING_5, headingButton)
293296
return true
294297
}
295298
R.id.heading_6 -> {
296299
aztecToolbarListener?.onToolbarFormatButtonClicked(AztecTextFormat.FORMAT_HEADING_6, false)
297300
editor?.toggleFormatting(AztecTextFormat.FORMAT_HEADING_6)
298-
setHeadingMenuSelector(AztecTextFormat.FORMAT_HEADING_6)
301+
updateHeadingMenuItem(AztecTextFormat.FORMAT_HEADING_6, headingButton)
299302
return true
300303
}
301304
// TODO: Uncomment when Preformat is to be added back as a feature
@@ -621,55 +624,41 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
621624
}
622625

623626
private fun selectHeadingMenuItem(textFormats: ArrayList<ITextFormat>) {
624-
if (textFormats.size == 0) {
625-
// Select paragraph by default.
626-
headingMenu?.menu?.findItem(R.id.paragraph)?.isChecked = true
627-
// Use unnumbered heading selector by default.
628-
setHeadingMenuSelector(AztecTextFormat.FORMAT_PARAGRAPH)
629-
} else {
630-
textFormats.forEach {
627+
val headingButton = findViewById<ToggleButton>(R.id.format_bar_button_heading)
628+
// Use unnumbered heading selector by default.
629+
updateHeadingMenuItem(AztecTextFormat.FORMAT_PARAGRAPH, headingButton)
630+
headingMenu?.menu?.findItem(R.id.paragraph)?.isChecked = true
631+
if (textFormats.size != 0) {
632+
foreach@ for (it in textFormats) {
631633
when (it) {
632634
AztecTextFormat.FORMAT_HEADING_1 -> headingMenu?.menu?.findItem(R.id.heading_1)?.isChecked = true
633635
AztecTextFormat.FORMAT_HEADING_2 -> headingMenu?.menu?.findItem(R.id.heading_2)?.isChecked = true
634636
AztecTextFormat.FORMAT_HEADING_3 -> headingMenu?.menu?.findItem(R.id.heading_3)?.isChecked = true
635637
AztecTextFormat.FORMAT_HEADING_4 -> headingMenu?.menu?.findItem(R.id.heading_4)?.isChecked = true
636638
AztecTextFormat.FORMAT_HEADING_5 -> headingMenu?.menu?.findItem(R.id.heading_5)?.isChecked = true
637639
AztecTextFormat.FORMAT_HEADING_6 -> headingMenu?.menu?.findItem(R.id.heading_6)?.isChecked = true
638-
// TODO: Uncomment when Preformat is to be added back as a feature
639-
// AztecTextFormat.FORMAT_PREFORMAT -> headingMenu?.menu?.findItem(R.id.preformat)?.isChecked = true
640-
else -> {
641-
// Select paragraph by default.
642-
headingMenu?.menu?.findItem(R.id.paragraph)?.isChecked = true
643-
}
640+
// TODO: Uncomment when Preformat is to be added back as a feature
641+
// AztecTextFormat.FORMAT_PREFORMAT -> headingMenu?.menu?.findItem(R.id.preformat)?.isChecked = true
642+
else -> continue@foreach
644643
}
645644

646-
setHeadingMenuSelector(it)
647-
648-
return
645+
updateHeadingMenuItem(it, headingButton)
649646
}
650647
}
651648
}
652649

653650
private fun selectListMenuItem(textFormats: ArrayList<ITextFormat>) {
654-
if (textFormats.size == 0) {
655-
// Select no list by default.
656-
listMenu?.menu?.findItem(R.id.list_none)?.isChecked = true
657-
// Use unordered list selector by default.
658-
setListMenuSelector(AztecTextFormat.FORMAT_UNORDERED_LIST)
659-
} else {
660-
textFormats.forEach {
651+
val listButton = findViewById<ToggleButton>(R.id.format_bar_button_list)
652+
updateListMenuItem(AztecTextFormat.FORMAT_NONE, listButton)
653+
listMenu?.menu?.findItem(R.id.list_none)?.isChecked = true
654+
if (textFormats.size != 0) {
655+
foreach@ for (it in textFormats) {
661656
when (it) {
662657
AztecTextFormat.FORMAT_UNORDERED_LIST -> listMenu?.menu?.findItem(R.id.list_unordered)?.isChecked = true
663658
AztecTextFormat.FORMAT_ORDERED_LIST -> listMenu?.menu?.findItem(R.id.list_ordered)?.isChecked = true
664-
else -> {
665-
// Select no list by default.
666-
listMenu?.menu?.findItem(R.id.list_none)?.isChecked = true
667-
}
659+
else -> continue@foreach
668660
}
669-
670-
setListMenuSelector(it)
671-
672-
return
661+
updateListMenuItem(it, listButton)
673662
}
674663
}
675664
}
@@ -868,31 +857,74 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
868857
listMenu?.inflate(R.menu.list)
869858
}
870859

871-
private fun setListMenuSelector(textFormat: ITextFormat) {
860+
private fun updateListMenuItem(textFormat: ITextFormat, listButton: ToggleButton) {
861+
var backgroundRes = R.drawable.format_bar_button_ul_selector
862+
var contentDescriptionRes = R.string.format_bar_description_list
863+
var check = true
872864
when (textFormat) {
873-
AztecTextFormat.FORMAT_UNORDERED_LIST -> findViewById<ToggleButton>(R.id.format_bar_button_list).setBackgroundResource(R.drawable.format_bar_button_ul_selector)
874-
AztecTextFormat.FORMAT_ORDERED_LIST -> findViewById<ToggleButton>(R.id.format_bar_button_list).setBackgroundResource(R.drawable.format_bar_button_ol_selector)
865+
AztecTextFormat.FORMAT_ORDERED_LIST -> {
866+
backgroundRes = R.drawable.format_bar_button_ol_selector
867+
contentDescriptionRes = R.string.item_format_list_ordered
868+
}
869+
AztecTextFormat.FORMAT_UNORDERED_LIST -> {
870+
contentDescriptionRes = R.string.item_format_list_unordered
871+
// keep default background
872+
}
873+
AztecTextFormat.FORMAT_NONE -> {
874+
check = false
875+
// keep default background and content description
876+
}
875877
else -> {
876-
// Use unordered list selector by default.
877-
findViewById<ToggleButton>(R.id.format_bar_button_list).setBackgroundResource(R.drawable.format_bar_button_ul_selector)
878+
AppLog.w(AppLog.T.EDITOR, "Unknown list menu item - text format")
879+
return
878880
}
879881
}
882+
listButton.setBackgroundResource(backgroundRes)
883+
listButton.contentDescription = context.getString(contentDescriptionRes)
884+
listButton.isChecked = check
880885
}
881886

882-
private fun setHeadingMenuSelector(textFormat: ITextFormat) {
887+
private fun updateHeadingMenuItem(textFormat: ITextFormat, headingButton: ToggleButton) {
888+
var backgroundRes = R.drawable.format_bar_button_heading_selector
889+
var contentDescriptionRes = R.string.format_bar_description_heading
890+
var check = true
883891
when (textFormat) {
884-
AztecTextFormat.FORMAT_HEADING_1 -> findViewById<ToggleButton>(R.id.format_bar_button_heading).setBackgroundResource(R.drawable.format_bar_button_heading_1_selector)
885-
AztecTextFormat.FORMAT_HEADING_2 -> findViewById<ToggleButton>(R.id.format_bar_button_heading).setBackgroundResource(R.drawable.format_bar_button_heading_2_selector)
886-
AztecTextFormat.FORMAT_HEADING_3 -> findViewById<ToggleButton>(R.id.format_bar_button_heading).setBackgroundResource(R.drawable.format_bar_button_heading_3_selector)
887-
AztecTextFormat.FORMAT_HEADING_4 -> findViewById<ToggleButton>(R.id.format_bar_button_heading).setBackgroundResource(R.drawable.format_bar_button_heading_4_selector)
888-
AztecTextFormat.FORMAT_HEADING_5 -> findViewById<ToggleButton>(R.id.format_bar_button_heading).setBackgroundResource(R.drawable.format_bar_button_heading_5_selector)
889-
AztecTextFormat.FORMAT_HEADING_6 -> findViewById<ToggleButton>(R.id.format_bar_button_heading).setBackgroundResource(R.drawable.format_bar_button_heading_6_selector)
890-
AztecTextFormat.FORMAT_PARAGRAPH -> findViewById<ToggleButton>(R.id.format_bar_button_heading).setBackgroundResource(R.drawable.format_bar_button_heading_selector)
892+
AztecTextFormat.FORMAT_HEADING_1 -> {
893+
backgroundRes = R.drawable.format_bar_button_heading_1_selector
894+
contentDescriptionRes = R.string.heading_1
895+
}
896+
AztecTextFormat.FORMAT_HEADING_2 -> {
897+
backgroundRes = R.drawable.format_bar_button_heading_2_selector
898+
contentDescriptionRes = R.string.heading_2
899+
}
900+
AztecTextFormat.FORMAT_HEADING_3 -> {
901+
backgroundRes = R.drawable.format_bar_button_heading_3_selector
902+
contentDescriptionRes = R.string.heading_3
903+
}
904+
AztecTextFormat.FORMAT_HEADING_4 -> {
905+
backgroundRes = R.drawable.format_bar_button_heading_4_selector
906+
contentDescriptionRes = R.string.heading_4
907+
}
908+
AztecTextFormat.FORMAT_HEADING_5 -> {
909+
backgroundRes = R.drawable.format_bar_button_heading_5_selector
910+
contentDescriptionRes = R.string.heading_5
911+
}
912+
AztecTextFormat.FORMAT_HEADING_6 -> {
913+
backgroundRes = R.drawable.format_bar_button_heading_6_selector
914+
contentDescriptionRes = R.string.heading_6
915+
}
916+
AztecTextFormat.FORMAT_PARAGRAPH -> {
917+
// keep default background and contentDescription
918+
check = false
919+
}
891920
else -> {
892-
// Use unnumbered heading selector by default.
893-
findViewById<ToggleButton>(R.id.format_bar_button_heading).setBackgroundResource(R.drawable.format_bar_button_heading_selector)
921+
AppLog.w(AppLog.T.EDITOR, "Unknown heading menu item - text format")
922+
return
894923
}
895924
}
925+
headingButton.setBackgroundResource(backgroundRes)
926+
headingButton.contentDescription = context.getString(contentDescriptionRes)
927+
headingButton.isChecked = check
896928
}
897929

898930
private fun showCollapsedToolbar() {
@@ -922,19 +954,22 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
922954
}
923955

924956
private fun toggleListMenuSelection(listMenuItemId: Int, isChecked: Boolean) {
957+
val listButton = findViewById<ToggleButton>(R.id.format_bar_button_list)
925958
if (isChecked) {
926959
listMenu?.menu?.findItem(listMenuItemId)?.isChecked = true
927960

928961
when (listMenuItemId) {
929-
R.id.list_ordered -> setListMenuSelector(AztecTextFormat.FORMAT_ORDERED_LIST)
930-
R.id.list_unordered -> setListMenuSelector(AztecTextFormat.FORMAT_UNORDERED_LIST)
931-
else -> setListMenuSelector(AztecTextFormat.FORMAT_UNORDERED_LIST) // Use unordered list selector by default.
962+
R.id.list_ordered -> updateListMenuItem(AztecTextFormat.FORMAT_ORDERED_LIST, listButton)
963+
R.id.list_unordered -> updateListMenuItem(AztecTextFormat.FORMAT_UNORDERED_LIST, listButton)
964+
else -> {
965+
AppLog.w(AppLog.T.EDITOR, "Unknown list menu item")
966+
updateListMenuItem(AztecTextFormat.FORMAT_UNORDERED_LIST, listButton) // Use unordered list selector by default.
967+
}
932968
}
933969
} else {
934970
listMenu?.menu?.findItem(R.id.list_none)?.isChecked = true
935971

936-
// Use unordered list selector by default.
937-
setListMenuSelector(AztecTextFormat.FORMAT_UNORDERED_LIST)
972+
updateListMenuItem(AztecTextFormat.FORMAT_NONE, listButton)
938973
}
939974
}
940975

@@ -959,6 +994,7 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
959994
toolbarButtonPlugins.forEach { button -> if (button !is IMediaToolbarButton) button.toolbarStateAboutToChange(this, !isEnabled) }
960995
}
961996

997+
@SuppressLint("InflateParams")
962998
private fun showDialogShortcuts() {
963999
val layout = LayoutInflater.from(context).inflate(R.layout.dialog_shortcuts, null)
9641000
val builder = AlertDialog.Builder(context)

0 commit comments

Comments
 (0)