BL-15212 add language tags in edit #7502
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Pull Request Overview
This PR implements functionality to display language tags/codes in the edit interface, addressing BL-15212. The implementation uses a UI workaround since language code tooltips cannot be directly attached to pseudo-elements.
- Adds language code display to the format toolbar title bar
- Shows language tags as tooltips on source bubble tabs
- Updates both the source bubbles and style editor components
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| src/BloomBrowserUI/bookEdit/sourceBubbles/BloomSourceBubbles.tsx | Adds language tag as both id and title attributes to source text tab list items for tooltip display |
| src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.ts | Implements updateTitleBarLanguageCode() method to display language code in the format toolbar title bar |
| src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.pug | Restructures title bar to include a span element for displaying the language code |
| src/BloomBrowserUI/bookEdit/StyleEditor/StyleEditor.less | Adds CSS styling to position and style the language code display in the title bar |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .bloomDialogTitleBar(data-i18n="EditTab.FormatDialog.Format") Format | ||
| .bloomDialogTitleBar | ||
| span(data-i18n="EditTab.FormatDialog.Format") Format | ||
| span#format-toolbar-lang-code |
There was a problem hiding this comment.
The span#format-toolbar-lang-code element should have aria-hidden="true" as an initial attribute since it starts empty and will be hidden by updateTitleBarLanguageCode() when there's no language code. This prevents screen readers from announcing an empty element before the JavaScript initialization runs.
| span#format-toolbar-lang-code | |
| span#format-toolbar-lang-code(aria-hidden="true") |
| } | ||
|
|
||
| // this is an unfortunate ui hack because we can't yet put the language code as a tooltip on the language | ||
| // tag itself because it is a psuedo-element (BL-15212). |
There was a problem hiding this comment.
Spelling error: "psuedo-element" should be "pseudo-element".
| // tag itself because it is a psuedo-element (BL-15212). | |
| // tag itself because it is a pseudo-element (BL-15212). |
| } | ||
|
|
||
| // this is an unfortunate ui hack because we can't yet put the language code as a tooltip on the language | ||
| // tag itself because it is a psuedo-element. (BL-15212) |
There was a problem hiding this comment.
Spelling error: "psuedo-element" should be "pseudo-element".
| // tag itself because it is a psuedo-element. (BL-15212) | |
| // tag itself because it is a pseudo-element. (BL-15212) |
andrew-polk
left a comment
andrew-polk
left a comment
There was a problem hiding this comment.
@andrew-polk reviewed 4 of 4 files at r1, all commit messages.
@andrew-polk dismissed @copilot-pull-request-reviewer[bot] from a discussion.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on @hatton)
|
@andrew-polk I've opened a new pull request, #7507, to work on those changes. Once the pull request is ready, I'll request review from you. |
This change is