Context Navigation

← Previous Ticket
Next Ticket →

#65334 closed defect (bug) (fixed)

Plugin Installer modal: plugin-information-footer overlaps and hides bottom arrow of plugin-information-scrollable

Reported by:	projektisle	Owned by:	joedolson
Priority:	normal	Milestone:	7.1
Component:	Plugins	Version:
Severity:	normal	Keywords:	has-screenshots has-patch commit
Cc:		Focuses:	ui, accessibility, css, administration

Description

Go to the plugin page, click on 'View Details'. Try scrolling down.

Notice how the plugin-information-footer hides the bottom arrow of plugin-information-scrollable id

Attachments (1)

plugin-information-css.jpg (47.5 KB ) - added by projektisle 7 weeks ago.

Download all attachments as: .zip

Change History (10)

@projektisle
7 weeks ago

Attachment plugin-information-css.jpg added

This ticket was mentioned in PR #11957 on WordPress/wordpress-develop by @alanjacobmathew.

7 weeks ago #1

Keywords has-patch added

Modify the height of 'plugin-information-scrollable' to 90% so that the remaining height is for 'plugin-information-footer'.

This will make sure the bottom arrow of the scrollbar is always visible and not hidden below the 'plugin-information-footer'

Trac ticket: https://core.trac.wordpress.org/ticket/65334

#2 @sabernhardt
7 weeks ago

Focuses administration added
Version trunk

The overlap occurred with WordPress 5.8, and likely earlier too.

This ticket was mentioned in Slack in #accessibility by joedolson. View the logs.

7 weeks ago

#4 @joedolson
7 weeks ago

Milestone Awaiting Review → 7.1
Owner set to joedolson
Status new → accepted

@joedolson commented on PR #11957:

2 weeks ago #5

Also added a separate height calculation for smaller viewports, where the footer height is different.

#6 @joedolson
2 weeks ago

To further enhance the accessibility of the plugin modal, I'm also adding tabindex to the scrollable container so keyboard users can consistently manage the scrolling behavior. This will otherwise be unavailable on Safari.

[Note: I reverted this. Based on testing, this didn't work on the one browser that requires it. As such, I don't see any reason to burden users who are on browsers that already support keyboard navigation of scrollable regions with the verbosity.]

Last edited 2 weeks ago by joedolson (previous) (diff)

#7 @joedolson
2 weeks ago

Test:

Open a plugin modal and verify that the bottom of the scrollbar is visible at the bottom of the modal, above the modal footer.
Reduce the viewport and verify there's no extraneous gap nor a hidden scrollbar at the bottom of the modal below 771px.

#8 @joedolson
4 days ago

Keywords commit added

#9 @joedolson
4 days ago

Resolution → fixed
Status accepted → closed

In 62691:

Plugins: Fix plugin modal scrollbar visibility.

Set height of scrollable container to exclude the modal footer so that the bottom of the scrollbar remains visible and accessible. Simplify styling by eliminating small viewport height adjustment. Change modal positioning in mobile viewports to ensure entire modal is visible with a masked margin.

Developed in https://github.com/WordPress/wordpress-develop/pull/11957

Props projektisle, alanjacobmathew, joedolson, sabernhardt.
Fixes #65334.

Note: See TracTickets for help on using tickets.

Download in other formats:

Make WordPress Core

Context Navigation

#65334 closed defect (bug) (fixed)

Plugin Installer modal: plugin-information-footer overlaps and hides bottom arrow of plugin-information-scrollable

Description

Attachments (1)

Change History (10)

@projektisle 7 weeks ago

This ticket was mentioned in ​PR #11957 on ​WordPress/wordpress-develop by ​@alanjacobmathew. 7 weeks ago #1

#2 @sabernhardt 7 weeks ago

This ticket was mentioned in ​Slack in #accessibility by joedolson. ​View the logs. 7 weeks ago

#4 @joedolson 7 weeks ago

​@joedolson commented on ​PR #11957: 2 weeks ago #5

#6 @joedolson 2 weeks ago

#7 @joedolson 2 weeks ago

#8 @joedolson 4 days ago

#9 @joedolson 4 days ago