[stable28] fix(menubar): menubar and table menus a11y #5330
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Migrate from deprecated slot syntax - Use a11y attrs from `NcPopover` on a custom button Signed-off-by: Grigorii K. Shartsev <[email protected]>
All these roles are correctly set by `NcAction*` components when needed. Setting these roles in mixins and menu bar puts them on wrong elements. Signed-off-by: Grigorii K. Shartsev <[email protected]>
- It must have string `"true"/"menu"` value - It must be placed on the `button` itself - It is already correctly set by `NcActions` and `NcPopover` Signed-off-by: Grigorii K. Shartsev <[email protected]>
- `aria-activedescendant` should identify a visually focused element when the real focus remains on this element. In the current implementation it identified selected element (even when the menu is closed), not the focused. - `aria-activedescendant` is not needed because NcAction has actual focus anyway. In case it will be actually needed, it should be implemented in the `NcActions` Signed-off-by: Grigorii K. Shartsev <[email protected]>
It has the same styles and correct a11y attributes. Signed-off-by: Grigorii K. Shartsev <[email protected]>
Signed-off-by: Grigorii K. Shartsev <[email protected]>
- `aria-pressed` is not valid for a menu trigger button - As alternative solution - show that there is a selected value directly in the text - Remove incorrect prop for NcActions Signed-off-by: Grigorii K. Shartsev <[email protected]>
Signed-off-by: Grigorii K. Shartsev <[email protected]>
- Since `@nextcloud/[email protected]` correct attributes are covered by `NcAction*` and `NcButton` components, including fixes: - Attribute should display not only active `attr="true"` state, but also non-active `attr="false"` - It should be `aria-pressed` for buttons and `aria-checked` for menu items instead of `aria-selected` - Set correct `type` and active state - `type="radio"` for a list of options like `Heading` - `type="checkbox"` for toggle buttons like `Bold` - `type="button"` for general buttons widhout active state like `Undo` Signed-off-by: Grigorii K. Shartsev <[email protected]>
- ActionSingle was used in 2 places: 1. As a single button in the menu 2. As an item in NcActions - NcActions doesn't fully support non-direct NcAction* children - Move NcActionButton usage from ActionSingle to a new component - This new component is named NcActionButton so that NcActions will consider it to be a valid NcAction* component Signed-off-by: Grigorii K. Shartsev <[email protected]>
- Separates different parts visually - Required for a11y to group radio button in the menu Signed-off-by: Grigorii K. Shartsev <[email protected]>
…NcActions Signed-off-by: Grigorii K. Shartsev <[email protected]>
JuliaKirschenheuter
approved these changes
Feb 1, 2024
juliusknorr
approved these changes
Feb 1, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Backport of PR #5218