KEMBAR78
Introduce the basic support of accessibility in the web target by eymar · Pull Request #2188 · JetBrains/compose-multiplatform-core · GitHub
Skip to content

Conversation

@eymar
Copy link
Member

@eymar eymar commented Jun 20, 2025

Introduce the basic support of accessibility in the web target

Fixes https://youtrack.jetbrains.com/issue/CMP-7675

Testing

  • Added the tests
  • This should be tested by QA

Release Notes

Highlights - Web

  • Introduce the basic support of accessibility in the web target

@eymar eymar changed the title Ok/cfw a11y Introduce the basic support of accessibility in the web target Jun 20, 2025
@eymar eymar marked this pull request as ready for review June 30, 2025 10:31
@eymar eymar requested review from Schahen and terrakok June 30, 2025 10:31
Comment on lines 736 to 743
sealed class A11YConfiguration {
internal object Disabled : A11YConfiguration()
internal object Enabled : A11YConfiguration()

internal fun isA11YEnabled(): Boolean {
return this == Enabled
}
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why do we design it as a sealed class instead of a simple enum?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I changed the API in the latest commit.

Now there is this class:

class ComposeViewportConfiguration internal constructor() {

    internal var isA11YEnabled: Boolean = true

    fun disableA11Y() {
        isA11YEnabled = false
    }
}

The fun ComposeViewport function now has a configure lambda where a user can change the configuration.

iOS has a similar config and a lambda in the entry point. So I think this would keep simple and allow for more features if needed.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed it again according to our discussion:

class ComposeViewportConfiguration internal constructor() {

    @ExperimentalComposeUiApi
    var isA11YEnabled: Boolean = true
}

Copy link

@Schahen Schahen left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

An impressive piece of work, thank you for taking care of this!

@eymar eymar merged commit 640b334 into jb-main Jul 7, 2025
10 checks passed
@eymar eymar deleted the ok/cfw_a11y branch July 7, 2025 12:05
const val Tab = 4
const val Image = 5
const val DropdownList = 6
const val ValuePicker = Unknown // TODO: Any web alternative?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe ComboBox?

const val Image = 5
const val DropdownList = 6
const val ValuePicker = Unknown // TODO: Any web alternative?
const val Carousel = Unknown // TODO: Any web alternative?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most similar to TabList (kinda a tabbed role)

Role.Carousel KDoc:

Associated semantics properties for Pager accessibility actions: SemanticsActions.PageUp,SemanticsActions.PageDown,SemanticsActions.PageLeft, SemanticsActions.PageRight

TabList Description:

Keyboard interactions
For the tab list:
Tab
When focus moves into the tab list, places focus on the active tab element.

When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the >tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is >focusable.

When focus is on a tab element in a horizontal tab list:

Left Arrow
moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates >the newly focused tab

Right Arrow
Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, >activates the newly focused tab

When focus is on a tab element in a vertical tab list:

Up Arrow
moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates >the newly focused tab

Down Arrow
Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, >activates the newly focused tab

If the tab list is horizontal, it does not listen for Down Arrow or Up Arrow so those keys can provide their >normal browser scrolling functions even when focus is inside the tab list.

When focus is on a tab in a tablist with either horizontal or vertical orientation:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants