Add contentDescription for icons

Author: ShreckYe

compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/material/Icon.kt

@@ -8,4 +8,6 @@ import com.huanshankeji.compose.ui.ModifierOrAttrs
 expect abstract class IconElement : Element
 
 @Composable
-expect fun Icon(materialIcon: MaterialIcon, modifierOrAttrs: ModifierOrAttrs<IconElement> = null)
+expect fun Icon(
+    materialIcon: MaterialIcon, contentDescription: String?, modifierOrAttrs: ModifierOrAttrs<IconElement> = null
+)

compose-multiplatform-material/src/commonMain/kotlin/com/huanshankeji/compose/material/TopAppBarScaffold.kt

@@ -8,15 +8,15 @@ expect class NavigationIconScope {
     fun NavButton(onClick: () -> Unit, content: @Composable () -> Unit)
 
     @Composable
-    fun MaterialIconNavButton(onClick: () -> Unit, materialIcon: MaterialIcon)
+    fun MaterialIconNavButton(onClick: () -> Unit, materialIcon: MaterialIcon, contentDescription: String?)
 }
 
 expect class TopAppBarActionsScope {
     @Composable
     fun ActionButton(onClick: () -> Unit, content: @Composable () -> Unit)
 
     @Composable
-    fun MaterialIconActionButton(onClick: () -> Unit, materialIcon: MaterialIcon)
+    fun MaterialIconActionButton(onClick: () -> Unit, materialIcon: MaterialIcon, contentDescription: String?)
 }
 
 @Composable

compose-multiplatform-material/src/jsMain/kotlin/com/huanshankeji/compose/material/Icon.kt

@@ -4,7 +4,10 @@ import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.material.icon.MaterialIcon
 import com.huanshankeji.compose.ui.ModifierOrAttrs
 import com.huanshankeji.compose.ui.toAttrs
+import com.huanshankeji.compose.web.attributes.attrs
+import com.huanshankeji.compose.web.attributes.plus
 import dev.petuska.kmdcx.icons.MDCIconSpan
+import org.jetbrains.compose.web.attributes.AttrsScope
 import org.w3c.dom.HTMLSpanElement
 
 actual typealias IconElement = HTMLSpanElement
@@ -13,5 +16,18 @@ actual typealias IconElement = HTMLSpanElement
  * There is often a better alternative of adding the CSS rule to the parent element to using this composable directly.
  */
 @Composable
-actual fun Icon(materialIcon: MaterialIcon, modifierOrAttrs: ModifierOrAttrs<IconElement>) =
-    MDCIconSpan(materialIcon.mdcIcon, attrs = modifierOrAttrs.toAttrs())
+actual fun Icon(
+    materialIcon: MaterialIcon, contentDescription: String?, modifierOrAttrs: ModifierOrAttrs<IconElement>
+) =
+    MDCIconSpan(materialIcon.mdcIcon, attrs = attrs<IconElement> {
+        contentDescription(contentDescription)
+    } + modifierOrAttrs.toAttrs())
+
+fun AttrsScope<*>.contentDescription(contentDescription: String?) =
+    contentDescription?.let {
+        // aria-label's semantics don't seem to meet the requirements perfectly because it labels an interactive element
+        // see: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label, https://stackoverflow.com/questions/22039910/what-is-aria-label-and-how-should-i-use-it
+        //attr("aria-label", it)
+
+        title(it)
+    }

compose-multiplatform-material/src/jsMain/kotlin/com/huanshankeji/compose/material/TopAppBarScaffold.kt

@@ -4,15 +4,19 @@ import androidx.compose.runtime.Composable
 import com.huanshankeji.compose.material.icon.MaterialIcon
 import dev.petuska.kmdc.top.app.bar.*
 import dev.petuska.kmdcx.icons.mdcIcon
+import org.jetbrains.compose.web.dom.Text
 
 actual class NavigationIconScope(val mdcTopAppBarSectionScope: MDCTopAppBarSectionScope) {
     @Composable
     actual fun NavButton(onClick: () -> Unit, content: @Composable () -> Unit) =
         mdcTopAppBarSectionScope.NavButton(attrs = { onClick { onClick() } }) { content() }
 
     @Composable
-    actual fun MaterialIconNavButton(onClick: () -> Unit, materialIcon: MaterialIcon) =
-        mdcTopAppBarSectionScope.NavButton(attrs = { mdcIcon() }) { org.jetbrains.compose.web.dom.Text(materialIcon.mdcIcon.type) }
+    actual fun MaterialIconNavButton(onClick: () -> Unit, materialIcon: MaterialIcon, contentDescription: String?) =
+        mdcTopAppBarSectionScope.NavButton(attrs = {
+            mdcIcon()
+            contentDescription(contentDescription)
+        }) { Text(materialIcon.mdcIcon.type) }
 }
 
 actual class TopAppBarActionsScope(val mdcTopAppBarSectionScope: MDCTopAppBarSectionScope) {
@@ -21,11 +25,11 @@ actual class TopAppBarActionsScope(val mdcTopAppBarSectionScope: MDCTopAppBarSec
         mdcTopAppBarSectionScope.ActionButton(attrs = { onClick { onClick() } }) { content() }
 
     @Composable
-    actual fun MaterialIconActionButton(
-        onClick: () -> Unit,
-        materialIcon: MaterialIcon
-    ) =
-        mdcTopAppBarSectionScope.ActionButton(attrs = { mdcIcon() }) { org.jetbrains.compose.web.dom.Text(materialIcon.mdcIcon.type) }
+    actual fun MaterialIconActionButton(onClick: () -> Unit, materialIcon: MaterialIcon, contentDescription: String?) =
+        mdcTopAppBarSectionScope.ActionButton(attrs = {
+            mdcIcon()
+            contentDescription(contentDescription)
+        }) { Text(materialIcon.mdcIcon.type) }
 }
 
 @Composable

compose-multiplatform-material/src/jvmMain/kotlin/com/huanshankeji/compose/material/Icon.kt

@@ -9,6 +9,7 @@ import com.huanshankeji.compose.ui.toModifier
 actual abstract class IconElement : Element()
 
 @Composable
-actual fun Icon(materialIcon: MaterialIcon, modifierOrAttrs: ModifierOrAttrs<IconElement>) =
-    androidx.compose.material.Icon(materialIcon, null, modifierOrAttrs.toModifier())
-// no `contentDescription` for now
+actual fun Icon(
+    materialIcon: MaterialIcon, contentDescription: String?, modifierOrAttrs: ModifierOrAttrs<IconElement>
+) =
+    androidx.compose.material.Icon(materialIcon, contentDescription, modifierOrAttrs.toModifier())

compose-multiplatform-material/src/jvmMain/kotlin/com/huanshankeji/compose/material/TopAppBarScaffold.kt

@@ -12,8 +12,8 @@ actual class NavigationIconScope private constructor() {
         IconButton(onClick, content = content)
 
     @Composable
-    actual fun MaterialIconNavButton(onClick: () -> Unit, materialIcon: MaterialIcon) =
-        IconButton(onClick) { Icon(materialIcon) }
+    actual fun MaterialIconNavButton(onClick: () -> Unit, materialIcon: MaterialIcon, contentDescription: String?) =
+        IconButton(onClick) { Icon(materialIcon, contentDescription) }
 
     companion object {
         val instance = NavigationIconScope()
@@ -26,8 +26,8 @@ actual class TopAppBarActionsScope(val rowScope: RowScope) {
         IconButton(onClick, content = content)
 
     @Composable
-    actual fun MaterialIconActionButton(onClick: () -> Unit, materialIcon: MaterialIcon) =
-        IconButton(onClick) { Icon(materialIcon) }
+    actual fun MaterialIconActionButton(onClick: () -> Unit, materialIcon: MaterialIcon, contentDescription: String?) =
+        IconButton(onClick) { Icon(materialIcon, contentDescription) }
 
 }