fix line-height override on add tab button for accessibility

[imatiach-msft]

Description

fix line-height override on add tab button for accessibility

[Supporting platform – Responsible AI Dashboard – Vision Dashboard->Add component]: After applying text spacing, keyboard focus indicator overlaps on the "Add component" button.

User Experience:
Users with cognitive disability and low vision who require increased space between lines, words, and letters will not be able to access the 'Add component' button quickly and will find some difficulty to understand control as the keyboard focus indicator overlaps with the button.

Pre-Requisite:
Go to - https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en
Click on ‘Add to Chrome’ button.
After adding, you should find Stylus icon on the tool bar, click it to open drop down menu.
Select ‘Manage Styles’ from the menu.
On the manage styles screen, click on ‘Create new Style’.
The New style screen would open, here give a suitable name for your new style e.g. ‘Text spacing’
Add following CSS under ‘Code’ field –

* {
    line-height: 1.5 !important;
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
}
p
{ 
  margin-bottom: 2em !important;
}

Click on ‘Save’. Now you should be able to see the style applied automatically on the page including the content displayed within iFrames.

Repro Steps:
Open RAI dashboard
Navigate to the "Add component" button.
Observe whether keyboard focus indicator is overlapping on the button or not.
Actual Result:
After applying text spacing, keyboard focus indicator overlaps on the "Add component" button.
Expected Result:
After applying text spacing, keyboard focus indicator should not overlap on the "Add component" button. It should be clearly visible as they appear before applying text spacing.

Screenshot before fix without style overrides (no bug present):

Screenshot before fix with style overrides (see bug with focus window):

Screenshot after fix without style overrides:

Screenshot after fix with style overrides (bug fixed):

Checklist

• I have added screenshots above for all UI changes.
• I have added e2e tests for all UI changes.
• Documentation was updated if it was needed.

[github-actions]

https://responsibleai.blob.core.windows.net/pullrequest/microsoft/responsible-ai-toolbox/ilmat/component-box-accessible/dashboard/index.html

[github-actions]

https://responsibleai.blob.core.windows.net/pullrequest/microsoft/responsible-ai-toolbox/ilmat/component-box-accessible/dashboard/index.html

[github-actions]

https://responsibleai.blob.core.windows.net/pullrequest/microsoft/responsible-ai-toolbox/ilmat/component-box-accessible/dashboard/index.html