Skip to content

fix(tags): add accessible name to tag modal#13325

Merged
ChristophWurst merged 1 commit into
mainfrom
fix/tag-modal-a11y-name
Jul 21, 2026
Merged

fix(tags): add accessible name to tag modal#13325
ChristophWurst merged 1 commit into
mainfrom
fix/tag-modal-a11y-name

Conversation

@ChristophWurst

@ChristophWurst ChristophWurst commented Jul 20, 2026

Copy link
Copy Markdown
Member

NcModal requires a name or labelId for accessibility; without it Vue warns and screen readers get no dialog label;

[Vue warn]: [NcModal] You need either set the name or set a `labelId` for accessibility.

found in

---> <NcModal>
       <TagModal> at src/components/TagModal.vue
         <RouterLink>
           <EnvelopeSkeleton> at src/components/EnvelopeSkeleton.vue
             <Envelope> at src/components/Envelope.vue
               <TransitionGroup>
                 <EnvelopeList> at src/components/EnvelopeList.vue
                   <Mailbox> at src/components/Mailbox.vue
                     <NcAppContentList>
                       <Pane>
                         <Splitpanes>
                           <NcAppContent>
                             <MailboxThread> at src/components/MailboxThread.vue
                               <NcContent>
                                 <Home> at src/views/Home.vue
                                   <App> at src/App.vue
                                     <Root>

Assisted-by: Claude:claude-opus-4-8

Discovered while testing #13257.

How to test

  1. Open the three dot menu of a thread envelope
  2. Click Edit tags

main: console Vue warning
here: ✨

🤖 AI (if applicable)

  • The content of this PR was partly or fully generated using AI

@ChristophWurst

Copy link
Copy Markdown
Member Author

/backport to stable5.10

@odzhychko odzhychko left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

LGTM, if the visual side effect was intended/acceptable.

Has side effect of making the backdrop darker.
Left before, right after:

Image

Accessibility works as expected.

@ChristophWurst

Copy link
Copy Markdown
Member Author

Has side effect of making the backdrop darker.
Left before, right after:

That seems to be intended: https://github.com/nextcloud-libraries/nextcloud-vue/blob/5de5b9ce20c8b85d929837498d2cfe9f05c76747/src/components/NcModal/NcModal.vue#L640-L649

NcModal requires a name or labelId for accessibility; without it Vue
warns and screen readers get no dialog label.

Signed-off-by: Christoph Wurst <1374172+ChristophWurst@users.noreply.github.com>
@ChristophWurst
ChristophWurst force-pushed the fix/tag-modal-a11y-name branch from f0abe44 to 0a6eb9d Compare July 20, 2026 15:24
@ChristophWurst

Copy link
Copy Markdown
Member Author

Pushed an alternative that now reference an existing heading as modal accessibility label. This way we can keep the light opacity of the backdrop.

@odzhychko odzhychko left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

New changes look also good.
No visual difference to main.
But added accessibility.

@ChristophWurst
ChristophWurst merged commit 9ee3c7b into main Jul 21, 2026
42 checks passed
@ChristophWurst
ChristophWurst deleted the fix/tag-modal-a11y-name branch July 21, 2026 06:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants