fix class importance weights callout truncated in small view for accessibility #2462
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
imatiach-msft
requested review from
tongyu-microsoft,
xuke444,
RubyZ10,
vinuthakaranth,
hawestra and
gaugup
as code owners
imatiach-msft
force-pushed
the
ilmat/class-imp-weights-callout-accessibility
branch
from
46e11a2
to
1561f0c
Compare
RubyZ10
approved these changes
Dec 18, 2023
imatiach-msft
deleted the
ilmat/class-imp-weights-callout-accessibility
branch
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
fix class importance weights callout truncated in small view for accessibility
The class importance weights callout/tooltip is getting truncated when window size is small. This is occurring due to the doNotLayer=True value. However, the code for the callout is duplicated between the global importances and individual feature importances windows (despite being very similar) and during debugging I found there were numerous other issues due to the code being in two different places with slightly different parameters. Hence, this PR not only resolves the accessibility issue but also unifies the duplicated code into one ClassImportanceWeights class and re-uses it.
Class importance weights dropdown without callout:
Truncated view before fix:
Note how there is no scrollbar. Interestingly, sometimes, on multiple clicks, a scrollbar does appear but it still does not scroll all the way down, only partially.
After fix in global importances view (with scrollbar):
After fix in local importances view:
Note after the fix the scrollbar can scroll all the way down.
More information from original task filed:
[Usable – Responsible AI Dashboard – Feature Importance>Individual Feature Importance]: Tooltip of "Class importance weights Info(i)" button is truncated in the normal mode (100% zoom).
User Experience:
Low vision users and keyboard dependent people will get impacted if the text is misplaced/truncated in the normal mode. The end user finds some difficulty understanding the tooltip information and cannot access it properly.
Repro Steps:
Open RAI Dashboard
Navigate to "Feature importance's" section.
Navigate the "Individual Feature Importance" tab and the table present under it.
Select the row of the table, new data gets added below navigate it such as the edit fields, slider, TEXT FEATURE LEGEND Buttons etc.
Navigate to "Label Place" section.
Navigate to "Class importance weights Info(i)" button and select it.
A tooltip appears.
Observe whether the tooltip of "Class importance weights Info(i)" button is truncated in the normal mode (100% zoom) or not.
Actual Result:
The tooltip information of "Class importance weights Info(i)" button is truncated in the normal mode (100% zoom).
Observation: Tooltip information clearly visible when user decrease the display size (Zoom at 90%).
Expected Result:
The tooltip information of "Class importance weights Info(i)" button should not truncated in the normal mode (100% zoom). There should be some minimal gap between the button text and button boundary.
Note: The same issue exists in resize (Zoom at 200%) and reflow (Set the viewport to 320*256).
Checklist