Skip to content

A11y list of issues #889

@ScharfViktor

Description

@ScharfViktor

Description:

This ticket originates from automated accessibility (A11Y) testing. The report highlights multiple issues that need to be addressed, such as missing or incorrect labels, invalid attributes, and other markup problems. Each identified issue must be reviewed and corrected to ensure compliance with accessibility standards.

Acceptance Criteria:

  • Review the full list of reported accessibility issues
  • Verify each item individually and confirm whether it is valid
  • Fix all confirmed accessibility violations (e.g., missing labels, incorrect attributes)
  • Rerun the automated accessibility tests to ensure no violations remain with viktor

Reporting

♿ Accessibility violations detected in before clicking login submit:

[autocomplete-valid] autocomplete attribute must be used correctly
  Impact: serious
  Description: Ensure the autocomplete attribute is correct and suitable for the form field
  Help: https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=playwright
  Node 1: <input class="oc-input " autocapitalize="off" spellcheck="false" autocomplete="kopano-account username" placeholder="Username" id="oc-login-username" aria-invalid="false" value="Alice-a96">
  Node 2: <input class="oc-input " type="password" margin="normal" autocomplete="kopano-account current-password" placeholder="Password" id="oc-login-password" aria-invalid="false">
Accessibility check failed with 1 violation(s) in before clicking login submit.
    ✔ When "Alice" logs in                                                                                                                          # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/session.ts:32
♿ Accessibility violations detected in before clicking login submit:

[autocomplete-valid] autocomplete attribute must be used correctly
  Impact: serious
  Description: Ensure the autocomplete attribute is correct and suitable for the form field
  Help: https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=playwright
  Node 1: <input class="oc-input " autocapitalize="off" spellcheck="false" autocomplete="kopano-account username" placeholder="Username" id="oc-login-username" aria-invalid="false" value="Brian-a96">
  Node 2: <input class="oc-input " type="password" margin="normal" autocomplete="kopano-account current-password" placeholder="Password" id="oc-login-password" aria-invalid="false">
Accessibility check failed with 1 violation(s) in before clicking login submit.
    ✔ And "Brian" logs in                                                                                                                           # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/session.ts:32
    ✔ And "Alice" opens the "files" app                                                                                                             # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/application.ts:9
♿ Accessibility violations detected in personal space:

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">
  Node 2: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">
  Node 3: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">
  Node 4: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">

[link-name] Links must have discernible text
  Impact: serious
  Description: Ensure links have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/link-name?application=playwright
  Node 1: <a href="/files/spaces/personal/alice-a96/deletedFolder?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%213d3a5a51-0ceb-4352-b064-b384481c7e4c" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
  Node 2: <a href="/files/spaces/personal/alice-a96/parent?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%216d8ebf4e-3f9a-4447-8727-4db7c2187df1" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
  Node 3: <a href="/text-editor/personal/alice-a96/lorem.txt?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%2119d765f3-356b-49a1-9c94-d184c7f5bd32&amp;contextRouteName=files-spaces-generic&amp;contextRouteParams.driveAliasAndItem=personal/alice-a96&amp;contextRouteQuery.fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%218425c11c-661c-4108-9d7a-f12e6e6aebdd&amp;contextRouteQuery.sort-by=name&amp;contextRouteQuery.sort-dir=asc" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
  Node 4: <a href="/preview/personal/alice-a96/testavatar.jpeg?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%213e70bbc1-4ec1-439c-88f7-881b9aabe85f&amp;contextRouteName=files-spaces-generic&amp;contextRouteParams.driveAliasAndItem=personal/alice-a96&amp;contextRouteQuery.fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%218425c11c-661c-4108-9d7a-f12e6e6aebdd&amp;contextRouteQuery.sort-by=name&amp;contextRouteQuery.sort-dir=asc" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
Accessibility check failed with 2 violation(s) in personal space.
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "personal space"                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" switches to the tiles-view                                                                                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/resources.ts:258
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "personal space"                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" switches to the "resource-table-condensed" view mode                                                                              # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/resources.ts:263
♿ Accessibility violations detected in personal space:

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">
  Node 2: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">
  Node 3: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">
  Node 4: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">

[link-name] Links must have discernible text
  Impact: serious
  Description: Ensure links have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/link-name?application=playwright
  Node 1: <a href="/files/spaces/personal/alice-a96/deletedFolder?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%213d3a5a51-0ceb-4352-b064-b384481c7e4c" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
  Node 2: <a href="/files/spaces/personal/alice-a96/parent?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%216d8ebf4e-3f9a-4447-8727-4db7c2187df1" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
  Node 3: <a href="/text-editor/personal/alice-a96/lorem.txt?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%2119d765f3-356b-49a1-9c94-d184c7f5bd32&amp;contextRouteName=files-spaces-generic&amp;contextRouteParams.driveAliasAndItem=personal/alice-a96&amp;contextRouteQuery.fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%218425c11c-661c-4108-9d7a-f12e6e6aebdd&amp;contextRouteQuery.sort-by=name&amp;contextRouteQuery.sort-dir=asc" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
  Node 4: <a href="/preview/personal/alice-a96/testavatar.jpeg?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%213e70bbc1-4ec1-439c-88f7-881b9aabe85f&amp;contextRouteName=files-spaces-generic&amp;contextRouteParams.driveAliasAndItem=personal/alice-a96&amp;contextRouteQuery.fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%218425c11c-661c-4108-9d7a-f12e6e6aebdd&amp;contextRouteQuery.sort-by=name&amp;contextRouteQuery.sort-dir=asc" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
Accessibility check failed with 2 violation(s) in personal space.
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "personal space"                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" navigates to the shared with me page                                                                                              # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/shares.ts:84
♿ Accessibility violations detected in shares:

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-p-xs oc-files-actions-hide-share-trigger raw-hover-surface">

[link-name] Links must have discernible text
  Impact: serious
  Description: Ensure links have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/link-name?application=playwright
  Node 1: <a href="/files/spaces/personal/alice-a96?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%216d8ebf4e-3f9a-4447-8727-4db7c2187df1" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
Accessibility check failed with 2 violation(s) in shares.
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "shares"                                                # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" navigates to the shared with others page                                                                                          # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/shares.ts:89
♿ Accessibility violations detected in shares:

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">

[link-name] Links must have discernible text
  Impact: serious
  Description: Ensure links have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/link-name?application=playwright
  Node 1: <a href="/files/spaces/personal/alice-a96/parent?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%216d8ebf4e-3f9a-4447-8727-4db7c2187df1" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
Accessibility check failed with 2 violation(s) in shares.
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "shares"                                                # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" navigates to the shared via link page                                                                                             # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/shares.ts:94
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "shares"                                                # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" navigates to the projects space page                                                                                              # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/spaces.ts:9
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "project spaces"                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" switches to the tiles-view                                                                                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/resources.ts:258
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "project spaces"                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" navigates to the project space "my_space"                                                                                         # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/spaces.ts:21
♿ Accessibility violations detected in project spaces:

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">

[link-name] Links must have discernible text
  Impact: serious
  Description: Ensure links have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/link-name?application=playwright
  Node 1: <a href="/files/spaces/project/my_space/spaceFolder?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%2405072c89-7842-4835-b823-f752918e83b7%211ff88a0f-b0ea-4dac-b5b5-cffb9fafb2bc" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
Accessibility check failed with 2 violation(s) in project spaces.
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "project spaces"                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" switches to the "resource-table" view mode                                                                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/resources.ts:263
♿ Accessibility violations detected in project spaces:

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">

[link-name] Links must have discernible text
  Impact: serious
  Description: Ensure links have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/link-name?application=playwright
  Node 1: <a href="/files/spaces/project/my_space/spaceFolder?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%2405072c89-7842-4835-b823-f752918e83b7%211ff88a0f-b0ea-4dac-b5b5-cffb9fafb2bc" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
Accessibility check failed with 2 violation(s) in project spaces.
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "project spaces"                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" navigates to the trashbin                                                                                                         # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/trashbin.ts:26
♿ Accessibility violations detected in deleted files:

[link-name] Links must have discernible text
  Impact: serious
  Description: Ensure links have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/link-name?application=playwright
  Node 1: <a href="/files/trash/personal/alice-a96" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
  Node 2: <a href="/files/trash/project/my_space" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
Accessibility check failed with 1 violation(s) in deleted files.
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "deleted files"                                         # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" opens trashbin of the personal space                                                                                              # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/trashbin.ts:36
♿ Accessibility violations detected in deleted files -> Personal:

[aria-hidden-focus] ARIA hidden element must not be focusable or contain focusable elements
  Impact: serious
  Description: Ensure aria-hidden elements are not focusable nor contain focusable elements
  Help: https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=playwright
  Node 1: <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr">
Accessibility check failed with 1 violation(s) in deleted files -> Personal.
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "deleted files -> Personal"                             # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" searches "test" using the global search and the "all files" filter and presses enter                                              # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/resources.ts:222
♿ Accessibility violations detected in Search result:

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">

[link-name] Links must have discernible text
  Impact: serious
  Description: Ensure links have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/link-name?application=playwright
  Node 1: <a href="/preview/personal/alice-a96/testavatar.jpeg?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%248425c11c-661c-4108-9d7a-f12e6e6aebdd%213e70bbc1-4ec1-439c-88f7-881b9aabe85f&amp;contextRouteName=files-common-search&amp;contextRouteParams.page=&amp;contextRouteQuery.term=test&amp;contextRouteQuery.provider=files.sdk&amp;contextRouteQuery.useScope=false" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
Accessibility check failed with 2 violation(s) in Search result.
    ✔ And "Alice" checks the accessibility of the DOM selector ".files-view-wrapper" on the "Search result"                                         # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" checks the accessibility of the DOM selector "#oc-topbar" on the "top bar"                                                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" opens location search panel                                                                                                       # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/search.ts:37
    ✔ And "Brian" checks the accessibility of the DOM selector ".tippy-content" on the "search panel"                                               # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" opens notifications dropdown                                                                                                      # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/notifications.ts:29
    ✔ And "Brian" checks the accessibility of the DOM selector "#oc-notifications-drop" on the "notifications dropdown"                             # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" opens the apps menu                                                                                                               # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/application.ts:14
    ✔ And "Brian" checks the accessibility of the DOM selector "#app-switcher-dropdown" on the "apps menu"                                          # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" checks the accessibility of the DOM selector "#web-nav-sidebar" on the "left sidebar"                                             # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" opens the user menu                                                                                                               # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/accountMenu.ts:19
    ✔ And "Brian" checks the accessibility of the DOM selector "#account" on the "account menu"                                                     # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" opens the "admin-settings" app                                                                                                    # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/application.ts:9
♿ Accessibility violations detected in admin settings->general:

[aria-hidden-focus] ARIA hidden element must not be focusable or contain focusable elements
  Impact: serious
  Description: Ensure aria-hidden elements are not focusable nor contain focusable elements
  Help: https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=playwright
  Node 1: <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr">
Accessibility check failed with 1 violation(s) in admin settings->general.
    ✔ And "Brian" checks the accessibility of the DOM selector "#admin-settings-view-wrapper" on the "admin settings->general"                      # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" navigates to the users management page                                                                                            # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/adminSettings.ts:86
♿ Accessibility violations detected in admin settings->users:

[aria-hidden-focus] ARIA hidden element must not be focusable or contain focusable elements
  Impact: serious
  Description: Ensure aria-hidden elements are not focusable nor contain focusable elements
  Help: https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=playwright
  Node 1: <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr">

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button data-v-6a1cc744="" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-ml-xs oc-p-xs" id="users-filter-confirm">

[empty-table-header] Table header text should not be empty
  Impact: minor
  Description: Ensure table headers have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/empty-table-header?application=playwright
  Node 1: <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-avatar" style="top: 114px;"><div><span class="oc-table-thead-content header-text"></span></div></th>
Accessibility check failed with 3 violation(s) in admin settings->users.
    ✔ And "Brian" checks the accessibility of the DOM selector "#admin-settings-view-wrapper" on the "admin settings->users"                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" selects the user "Alice"                                                                                                          # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/adminSettings.ts:337
♿ Accessibility violations detected in admin settings->users:

[aria-hidden-focus] ARIA hidden element must not be focusable or contain focusable elements
  Impact: serious
  Description: Ensure aria-hidden elements are not focusable nor contain focusable elements
  Help: https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=playwright
  Node 1: <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr">

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button data-v-6a1cc744="" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-ml-xs oc-p-xs" id="users-filter-confirm">

[empty-table-header] Table header text should not be empty
  Impact: minor
  Description: Ensure table headers have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/empty-table-header?application=playwright
  Node 1: <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-avatar" style="top: 114px;"><div><span class="oc-table-thead-content header-text"></span></div></th>
Accessibility check failed with 3 violation(s) in admin settings->users.
    ✔ And "Brian" checks the accessibility of the DOM selector "#admin-settings-view-wrapper" on the "admin settings->users"                        # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" opens the edit panel of user "Alice" using the context menu                                                                       # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/adminSettings.ts:303
    ✔ And "Brian" checks the accessibility of the DOM selector "#sidebar-panel-EditPanel" on the "admin settings->users->edit user sidebar panel"   # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" navigates to the groups management page                                                                                           # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/adminSettings.ts:231
♿ Accessibility violations detected in admin settings->groups:

[aria-hidden-focus] ARIA hidden element must not be focusable or contain focusable elements
  Impact: serious
  Description: Ensure aria-hidden elements are not focusable nor contain focusable elements
  Help: https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=playwright
  Node 1: <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr">

[empty-table-header] Table header text should not be empty
  Impact: minor
  Description: Ensure table headers have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/empty-table-header?application=playwright
  Node 1: <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-avatar" style="top: 114px;"><div><span class="oc-table-thead-content header-text"></span></div></th>
Accessibility check failed with 2 violation(s) in admin settings->groups.
    ✔ And "Brian" checks the accessibility of the DOM selector "#admin-settings-view-wrapper" on the "admin settings->groups"                       # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" selects the group "sales"                                                                                                         # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/adminSettings.ts:342
♿ Accessibility violations detected in admin settings->groups:

[aria-hidden-focus] ARIA hidden element must not be focusable or contain focusable elements
  Impact: serious
  Description: Ensure aria-hidden elements are not focusable nor contain focusable elements
  Help: https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=playwright
  Node 1: <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr">

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-groups-actions-delete-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" data-testid="action-handler">

[empty-table-header] Table header text should not be empty
  Impact: minor
  Description: Ensure table headers have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/empty-table-header?application=playwright
  Node 1: <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-avatar" style="top: 114px;"><div><span class="oc-table-thead-content header-text"></span></div></th>
Accessibility check failed with 3 violation(s) in admin settings->groups.
    ✔ And "Brian" checks the accessibility of the DOM selector "#admin-settings-view-wrapper" on the "admin settings->groups"                       # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" opens the edit panel of group "sales" using the context menu                                                                      # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/adminSettings.ts:308
    ✔ And "Brian" checks the accessibility of the DOM selector "#sidebar-panel-EditPanel" on the "admin settings->groups->edit group sidebar panel" # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" navigates to the project spaces management page                                                                                   # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/application.ts:4
♿ Accessibility violations detected in admin settings->spaces:

[aria-hidden-focus] ARIA hidden element must not be focusable or contain focusable elements
  Impact: serious
  Description: Ensure aria-hidden elements are not focusable nor contain focusable elements
  Help: https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=playwright
  Node 1: <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr">

[empty-table-header] Table header text should not be empty
  Impact: minor
  Description: Ensure table headers have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/empty-table-header?application=playwright
  Node 1: <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-icon" style="top: 114px;"><div><span class="oc-table-thead-content header-text"></span></div></th>
Accessibility check failed with 2 violation(s) in admin settings->spaces.
    ✔ And "Brian" checks the accessibility of the DOM selector "#admin-settings-view-wrapper" on the "admin settings->spaces"                       # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" selects the space "my_space"                                                                                                      # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/adminSettings.ts:347
♿ Accessibility violations detected in admin settings->spaces:

[aria-hidden-focus] ARIA hidden element must not be focusable or contain focusable elements
  Impact: serious
  Description: Ensure aria-hidden elements are not focusable nor contain focusable elements
  Help: https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=playwright
  Node 1: <li data-key="1" aria-hidden="true" class="oc-breadcrumb-list-item oc-flex oc-flex-middle oc-invisible-sr">

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-actions-edit-quota-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" data-testid="action-handler">
  Node 2: <button type="button" aria-label="" class="oc-button oc-rounded oc-button-m oc-button-justify-content-left oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw oc-files-actions-disable-trigger action-menu-item oc-py-s oc-px-m oc-width-1-1" data-testid="action-handler">

[empty-table-header] Table header text should not be empty
  Impact: minor
  Description: Ensure table headers have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/empty-table-header?application=playwright
  Node 1: <th class="oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-th oc-table-header-cell oc-table-header-cell-icon" style="top: 114px;"><div><span class="oc-table-thead-content header-text"></span></div></th>
Accessibility check failed with 3 violation(s) in admin settings->spaces.
    ✔ And "Brian" checks the accessibility of the DOM selector "#admin-settings-view-wrapper" on the "admin settings->spaces"                       # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Brian" lists the members of project space "my_space" using a sidebar panel                                                               # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/adminSettings.ts:318
    ✔ And "Brian" checks the accessibility of the DOM selector "#sidebar-panel-SpaceMembers" on the "admin settings->spaces->members sidebar panel" # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" navigates to the project space "my_space"                                                                                         # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/spaces.ts:21
♿ Accessibility violations detected in project space page:

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-raw oc-button-secondary-raw resource-table-edit-name raw-hover-surface oc-p-xs">

[link-name] Links must have discernible text
  Impact: serious
  Description: Ensure links have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/link-name?application=playwright
  Node 1: <a href="/files/spaces/project/my_space/spaceFolder?fileId=f2a014cf-4e1a-4a94-8140-0a9d3f7cf944%2405072c89-7842-4835-b823-f752918e83b7%211ff88a0f-b0ea-4dac-b5b5-cffb9fafb2bc" class="oc-resource-link oc-resource-icon-link" target="_self" draggable="false" no-hover="">
Accessibility check failed with 2 violation(s) in project space page.
    ✔ And "Alice" checks the accessibility of the DOM selector "#files-view" on the "project space page"                                            # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" opens the "files" app                                                                                                             # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/application.ts:9
    ✔ And "Alice" opens the right sidebar of the resource "lorem.txt"                                                                               # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/resources.ts:691
    ✔ And "Alice" checks the accessibility of the DOM selector "#sidebar-panel-details" on the "right sidebar"                                      # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" opens a "actions" panel of the resource "lorem.txt"                                                                               # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/resources.ts:696
    ✔ And "Alice" checks the accessibility of the DOM selector "#sidebar-panel-actions" on the "right sidebar->actions panel"                       # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" opens a "versions" panel of the resource "lorem.txt"                                                                              # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/resources.ts:696
    ✔ And "Alice" checks the accessibility of the DOM selector "#sidebar-panel-versions" on the "right sidebar->versions panel"                     # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" opens a "activities" panel of the resource "lorem.txt"                                                                            # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/resources.ts:696
    ✔ And "Alice" checks the accessibility of the DOM selector "#sidebar-panel-sharing" on the "right sidebar->activities panel"                    # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" opens a "sharing" panel of the resource "lorem.txt"                                                                               # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/resources.ts:696
    ✔ And "Alice" checks the accessibility of the DOM selector "#sidebar-panel-sharing" on the "right sidebar->sharing panel"                       # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
♿ Accessibility violations detected in create public link modal:

[button-name] Buttons must have discernible text
  Impact: critical
  Description: Ensure buttons have discernible text
  Help: https://dequeuniversity.com/rules/axe/4.10/button-name?application=playwright
  Node 1: <button data-v-73fe1bf1="" type="button" class="oc-button oc-rounded oc-button-m oc-button-justify-content-center oc-button-gap-m oc-button-secondary oc-button-filled oc-button-secondary-filled link-modal-confirm oc-modal-body-actions-confirm-secondary-trigger" aria-expanded="false">
Accessibility check failed with 1 violation(s) in create public link modal.
    ✔ And "Alice" creates a public link of following resource using the sidebar panel                                                               # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/links.ts:5
        | resource | role             | password |
        | parent   | Secret File Drop | %public% |
    ✔ And "Anonymous" opens the public link "Unnamed link"                                                                                          # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/public.ts:7
    ✔ And "Anonymous" unlocks the public link with password "%public%"                                                                              # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/public.ts:24
    ✔ And "Anonymous" checks the accessibility of the DOM selector "#web-content" on the "public link page"                                         # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/a11.y.ts:3
    ✔ And "Alice" logs out                                                                                                                          # file:/Users/v.scharf/Work/opencloud/web/tests/e2e/cucumber/steps/ui/session.ts:40
    ✔ And "Brian" logs out   

full log see here: #1164

Template for reporting A11Y bugs:

Description:

An accessibility check (axe) reported a violation of the [autocomplete-valid] rule.
The autocomplete attributes on the login input fields are not valid and do not match allowed values.

Details:

Impact: serious
Rule: autocomplete-valid

Affected nodes:

Username field -
<input class="oc-input" autocapitalize="off" spellcheck="false" autocomplete="kopano-account username" placeholder="Username" id="oc-login-username" aria-invalid="false" value="Alice-a96">

Password field -
<input class="oc-input" type="password" margin="normal" autocomplete="kopano-account current-password" placeholder="Password" id="oc-login-password" aria-invalid="false">

Expected behavior:

The input fields should use valid autocomplete values according to the HTML specification, e.g.:

  • autocomplete="username" for the username field
  • autocomplete="current-password" for the password field

Steps to reproduce:

  1. Open the login page
  2. Run an axe accessibility check before clicking the login submit button
  3. Observe the reported autocomplete-valid violation

Acceptance criteria:

  • All autocomplete attributes on the login form use valid values
  • Accessibility check reports no autocomplete-valid violations

Original Bug

Metadata

Metadata

Type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions