Make WordPress Core

Opened 10 months ago

Closed 7 months ago

Last modified 5 months ago

#60496 closed defect (bug) (fixed)

Twenty Sixteen: visual and DOM order of elements in the footer mismatch

Reported by: afercia's profile afercia Owned by: karmatosed's profile karmatosed
Milestone: 6.6 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-screenshots has-patch has-dev-note
Focuses: accessibility Cc:

Description (last modified by sabernhardt)

In the footer of Twenty Sixteen, the footer site info and the social menu visual order and DOM order mismatch.

For accessibility, visual order and DOM order must always match when they affect 'meaning or operation'.

Basically, altering the visual order via CSS properties like order and the various flexbox/grid *-reverse properties must be avoided. It is only allowed for purely decorative elements like, for example, the position of an icon within a button (there was such a case in the Gutenberg editor).

Reference:

WCAG 2.2
1.3.2 Meaningful Sequence (Level A) https://www.w3.org/TR/WCAG22/#meaningful-sequence
2.4.3 Focus Order (Level A) https://www.w3.org/TR/WCAG22/#focus-order

Twenty Sixteen uses the order property to change the order of the social menu and site info on large screens. On small screens, the visual order is social menu first, site info after (matches the DOM order). Instead, on large screens the site info is first, the social menu is second. See screenshots.

Attachments (8)

large.png (44.3 KB) - added by afercia 10 months ago.
small.png (41.2 KB) - added by afercia 10 months ago.
60496.patch (616 bytes) - added by rcreators 9 months ago.
Order properties removed from css and margin updated as per new order.
60496.2.patch (1.1 KB) - added by sabernhardt 9 months ago.
60496.patch plus margin adjustments in rtl.css
60496.stack.diff (1.0 KB) - added by sabernhardt 9 months ago.
stacks social navigation above site info at all screen sizes
2016-footer-order-before.png (52.7 KB) - added by sabernhardt 7 months ago.
Before patch
2016-footer-order-60496.2.patch.png (55.6 KB) - added by sabernhardt 7 months ago.
60496.2.patch would reverse the visual order on larger screens to match the DOM order, according to text direction
2016-footer-order-60496.stack.diff.png (56.0 KB) - added by sabernhardt 7 months ago.
60496.stack.diff would show the social navigation above the site links at any screen size

Download all attachments as: .zip

Change History (26)

@afercia
10 months ago

@afercia
10 months ago

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


10 months ago

#2 @joedolson
10 months ago

  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 6.6

This seems worth looking at, but it feels a little late to put it into 6.5.

@rcreators
9 months ago

Order properties removed from css and margin updated as per new order.

#3 @rcreators
9 months ago

  • Keywords has-patch added; needs-patch removed

Added patch with CSS file. Order property removed and margin updated. Now social icons will always be first and site info will be second in order.

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


9 months ago

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


9 months ago

#6 @joedolson
9 months ago

  • Keywords needs-design-feedback added

This ticket basically needs one decision made: are we changing the visual appearance on the desktop view or on the mobile view? In order to fix the DOM order, one of these things needs to change; we just need a decision which.

In my opinion, the patch as provided makes the most sense; it makes more sense to me to have the copyright text last.

#7 @joedolson
9 months ago

  • Owner set to joedolson
  • Status changed from new to assigned

@sabernhardt
9 months ago

60496.patch plus margin adjustments in rtl.css

@sabernhardt
9 months ago

stacks social navigation above site info at all screen sizes

#8 @sabernhardt
9 months ago

The 'mobile' view already matches the DOM order; I would not change that (a child theme could replace the stylesheet or the footer template without replacing the other).

The 'desktop' viewport's changes in 60496.2.patch (and 60496.patch) would create a new visual layout in an eight-year-old theme. It still presents the two elements in columns, at opposite ends, but switching the order makes it new.

Another option is stacking the social navigation above the site info links at all screen sizes. Then the visual order would match the DOM order, and I think the visual change would be less surprising because that has been the 'mobile' layout. However, I needed to add a width of 100% (or possibly flex-basis: 100%), which might increase the chances of interfering with custom styles in a child theme or Additional CSS.

Last edited 9 months ago by sabernhardt (previous) (diff)

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


8 months ago

This ticket was mentioned in Slack in #core-themes by karmatosed. View the logs.


7 months ago

@sabernhardt
7 months ago

Before patch

@sabernhardt
7 months ago

60496.2.patch would reverse the visual order on larger screens to match the DOM order, according to text direction

@sabernhardt
7 months ago

60496.stack.diff would show the social navigation above the site links at any screen size

#11 @rcreators
7 months ago

@sabernhardt I think with RTL the order is also same as it is for normal desktop. The change in position from left to right is what RTL do. So that is not an issue.

But I think having social media icons stacked on top of the links for all screen looks uniform. So we can go with that. +1

#12 @joedolson
7 months ago

  • Keywords commit added

I think this looks good. I'm marking it for commit, but would appreciate an opinion from either @poena or @karmatosed.

#13 @karmatosed
7 months ago

@joedolson I think this is absolutely ready for commit and will follow that through, thank you everyone.

#14 @karmatosed
7 months ago

  • Owner changed from joedolson to karmatosed

#15 @karmatosed
7 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 58177:

Twenty Sixteen: Fixes mismatch of visual and DOM order of elements.

In the footer the site info and social menu visual order and DOM order was mismatched. This fixes that and resolves the altering.

Props afercia, joedolson, rcreators, sabernhardt.
Fixes #60496.

#16 @sabernhardt
5 months ago

  • Keywords needs-docs added; needs-design-feedback commit removed

I wrote a draft for a note about this change. The documentation may be more appropriate as a user note than as a dev note, but then I would not know where or how to post it.

This ticket was mentioned in Slack in #core by juanmaguitar. View the logs.


5 months ago

#18 @sabernhardt
5 months ago

  • Description modified (diff)
  • Keywords has-dev-note added; needs-docs removed

dev note added to miscellaneous changes note

Note: See TracTickets for help on using tickets.