-
Bug
-
Resolution: Unresolved
-
Low
-
None
-
4.22.3
-
Severity 2 - Major
-
Issue Summary
Content is lost, clipped, or obscured when the page is zoomed to 200% for the Object Overview Modal.
Tested URL
https://instenv-21072-japp.instenv.internal.atlassian.com/browse/ITSM-9#
Steps to Reproduce
- Launch the URL
- In the object navigate to the Affected Server details and activate the Link for the Object, it will open an Object overview modal
- In the modal, activate the Show graph icon.
- A new modal will appear for Object overview.
- Try to zoom the page to 200% using the browser zoom for different browsers.
Actual Results
The Object Overview Modal content fails to reflow when viewed at 200% zoom. The interactive elements and content are not visible on the page and the user is not able to scroll the modal with a mouse and keyboard. This will result in low vision users finding it difficult to access the content when zoomed in.
Expected Results
Low vision users access content by using the browser's zoom option turned on. Users have a tendency to zoom in up to 200-400%. Content at high zoom levels gets reflowed and text gets enlarged. Content when reflowed should be displayed in a single column.
Low vision users find it very helpful to access content displayed in a single column as they do not have to scroll both ways; horizontally and vertically in order to read it.
Screenshot
Screen Recording
Screen Recording 2022-05-27 at 3.37.45 PM.mov
Workaround
Currently, there is no known workaround for this behaviour. A workaround will be added here when available.
Bug Ref: 744627
Bulldog Ref: JSMDC-12542
- is blocked by
-
JSMDC-12542 You do not have permission to view this issue
- links to
| Form Name | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
[JSDSERVER-11601] Object Overview Modal :Content fails to reflow at 200% zoom.
| Labels | Original: 1.4.4 Accessibility Level-AA WCAG21 ax-bug ax-bulldog-bl ax-dev-ready ax-jsm ax-macos-safari ax-medium-priority ax-platform-dc ax-qa ax-qa-prioritised ax-windows-chrome ax-windows-firefox may-need-design-team | New: 1.4.4 Accessibility Level-AA WCAG21 ax-bug ax-bulldog-bl ax-dev-ready ax-jsm ax-macos-safari ax-medium-priority ax-platform-dc ax-qa ax-qa-prioritised ax-windows-chrome ax-windows-firefox may-need-design-team ril |
| Remote Link | New: This issue links to "Internal ticket (Web Link)" [ 955539 ] |
| Labels | Original: 1.4.4 Accessibility Level-AA WCAG21 ax-bug ax-bulldog-bl ax-dev-ready ax-jsm ax-macos-safari ax-medium-priority ax-platform-dc ax-qa-prioritised ax-windows-chrome ax-windows-firefox may-need-design-team | New: 1.4.4 Accessibility Level-AA WCAG21 ax-bug ax-bulldog-bl ax-dev-ready ax-jsm ax-macos-safari ax-medium-priority ax-platform-dc ax-qa ax-qa-prioritised ax-windows-chrome ax-windows-firefox may-need-design-team |
| Labels | Original: 1.4.4 Accessibility Level-AA WCAG21 ax-bug ax-bulldog-bl ax-dev-ready ax-jsm ax-macos-safari ax-medium-priority ax-platform-dc ax-qa-prioritised ax-windows-chrome ax-windows-firefox | New: 1.4.4 Accessibility Level-AA WCAG21 ax-bug ax-bulldog-bl ax-dev-ready ax-jsm ax-macos-safari ax-medium-priority ax-platform-dc ax-qa-prioritised ax-windows-chrome ax-windows-firefox may-need-design-team |
| Status | Original: Needs Triage [ 10030 ] | New: Ready for Development [ 10049 ] |
| Labels | Original: 1.4.4 Accessibility WCAG21 ax-at-NVDA ax-bug ax-bulldog-bl ax-jsm ax-mid-priority ax-platform-dc ax-qa-prioritised ax-qa-ready | New: 1.4.4 Accessibility Level-AA WCAG21 ax-bug ax-bulldog-bl ax-dev-ready ax-jsm ax-macos-safari ax-medium-priority ax-platform-dc ax-qa-prioritised ax-windows-chrome ax-windows-firefox |
| Affects Version/s | Original: 4.20.0 [ 96191 ] | |
| Affects Version/s | New: 4.22.3 [ 100692 ] |
| Summary | Original: Object Overview Modal : Content is lost at 200% zoom. | New: Object Overview Modal :Content fails to reflow at 200% zoom. |
| Description |
Original:
h3. Issue Summary
Content is lost, clipped, or obscured when the page is zoomed to 200%. Element name: The following content. -Object Overview -Search edit field. -oracledb-11g-prod -Key etc... Location: In the "Object Overview" modal. Note: The above content is lost at 200% zoom. h3. Tested URL [https://instenv-5971-nizh.instenv.atl-test.space/projects/JSM/queues/custom/31/JSM-111] h3. Steps to Reproduce # Step 1 h3. Actual Results {{Actual results}} h3. Expected Results *Fix Information* RULE : The name, role, value, states, and properties of user interface components MUST be programmatically determinable by assistive technologies. HOW TO FIX: Fix this issue by using the aria-current attribute to indicate which element is the current item within a container or set of related elements, such as the currently selected page, step, location, date, or time. REFERENCE: WAI-ARIA Recommendation: [https://www.w3.org/TR/wai-aria-1.1/#aria-current] BACKGROUND: States and properties are attributes used to convey essential information about an element to screen readers and other assistive technologies. Some roles require certain state and property information - such as the checked/unchecked state of a checkbox. Native HTML elements provide those required states and properties, so nothing more needs to be done. If you create a custom version of a native HTML element or a custom control or widget that does not have a native HTML equivalent, you must add the relevant states and properties using ARIA. h3. Screenshot !https://axeauditor.dequecloud.com/api/v1/file/ee8a0186-5f34-11ec-9e8f-9bed84223665|width=509,height=234! h3. Screen Recording {{screen recording}} h3. Workaround {{workaround}} Bug Ref: 744627 Bulldog Ref: JSMDC-12542 |
New:
h3. Issue Summary
Content is lost, clipped, or obscured when the page is zoomed to 200% for the Object Overview Modal. h3. Tested URL [https://instenv-21072-japp.instenv.internal.atlassian.com/browse/ITSM-9#] h3. Steps to Reproduce # Launch the URL # In the object navigate to the Affected Server details and activate the Link for the Object, it will open an Object overview modal # In the modal, activate the Show graph icon. # A new modal will appear for Object overview. # Try to zoom the page to 200% using the browser zoom for different browsers. h3. Actual Results The Object Overview Modal content fails to reflow when viewed at 200% zoom. The interactive elements and content are not visible on the page and the user is not able to scroll the modal with a mouse and keyboard. This will result in low vision users finding it difficult to access the content when zoomed in. h3. Expected Results Low vision users access content by using the browser's zoom option turned on. Users have a tendency to zoom in up to 200-400%. Content at high zoom levels gets reflowed and text gets enlarged. Content when reflowed should be displayed in a single column. Low vision users find it very helpful to access content displayed in a single column as they do not have to scroll both ways; horizontally and vertically in order to read it. h3. Screenshot !Screenshot 2022-05-27 at 3.37.02 PM.png|width=385,height=213! h3. Screen Recording [^Screen Recording 2022-05-27 at 3.37.45 PM.mov] h3. Workaround Currently, there is no known workaround for this behaviour. A workaround will be added here when available. Bug Ref: 744627 Bulldog Ref: JSMDC-12542 |
| Attachment | New: Screen Recording 2022-05-27 at 3.37.45 PM.mov [ 422015 ] |