Link to issue number:

None

Summary of the issue:

The ui.browseableMessage has no margin. For people with visual difficulties, it makes more difficult to isolate the content of the browseable message from the text present in the background around the browseable message.

Description of user facing changes

The content of browseable message such as formatting information (double press of NVDA+F) is now rendered with a margin around the text.

Description of development approach

Just added the following style property to the message's body:
style="margin:1em"
The 1em measurement should correspond to 1 character.

Note for reviewers:
I know almost nothing in CSS and styles. Thus feel free to suggest something else if the way the margin is implemented is not the best solution.

Testing strategy:

• Checked visually the left and top margin of the text on a formatting information message.

Before (NVDA 2022.2beta3):

After (with this PR):

Known issues with pull request:

The right margin does not seem to appear. Maybe due to the <pre> tag in the ui.browseableMessage function?
Anyway, the most important margin is the left one, at least for left-aligned LTR text; I guess that all is reverse for RTL text.

Change log entries:

Not needed.

Code Review Checklist:

• Pull Request description:
  • description is up to date
  • change log entries
• Testing:
  • Unit tests
  • System (end to end) tests
  • Manual testing
• API is compatible with existing add-ons.
• Documentation:
  • User Documentation
  • Developer / Technical Documentation
  • Context sensitive help for GUI changes
• UX of all users considered:
  • Speech
  • Braille
  • Low Vision
  • Different web browsers
  • Localization in other languages / culture than English