Page MenuHomePhabricator

Integrate CSS mixin for screen reader and keyboard-only users into core
Closed, ResolvedPublic

Description

Starting from a comment by @TheDJ on https://gerrit.wikimedia.org/r/#/c/237870/4 it seems reasonable to integrate a CSS class mixin for screen reader and keyboard-only users into core for usage in skins or by templaters.
Copying from T112308

CSS namespaces (example) have in my experience a great potential to speed up coding collaboration with disperse people and projects on front-end side.
Example of an applied stateful class.

HTML:

<a href="#navigation-main" class="lnk--skip" tabindex="0">Skip to navigation</a>

Less/CSS:

.mixin-screen-reader-text() {
	display: block;
	position: absolute !important;
	clip: rect( 1px, 1px, 1px, 1px );
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	overflow: hidden;

	&[tabindex="0"]:active,
	&[tabindex="0"]:focus {
		position: static !important;
		clip: auto;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
	}
}

/* Exemplified usage */
.lnk--skip {
	.mixin-screen-reader-text;
}

including tabindex attribute is even more stateful.
See my CodePen for testing purposes.

Why tabindex="0": As stated in the MDN article "[a]n element with a 0 value, an invalid value, or no tabindex value should be placed after elements with a positive tabindex in the sequential keyboard navigation order."
So if for unknown reason we decide to put an element in some sub-template that should receive tabindex, we don't have to worry about with what value to start, as no positive tabindex is taken before. Therefore 0 seems the neutral and best way to include it in this environment/under these preconditions.

Update 2016-03-02: Due to the current RL architecture, using an @extend approach might result in de-duplication throughout modules. Therefore a mixin seems to be the best way at the moment.

Details

Related Gerrit Patches:

Related Objects

StatusAssignedTask
Resolved Spage
Resolved Spage
Resolved Spage
Resolvedori
DeclinedNone
ResolvedNone
DeclinedNone
ResolvedAnomie
DeclinedNone
OpenNone
OpenNone
Resolved Spage
DeclinedNone
Resolvedjeropbrenda
OpenNone
DeclinedQgil
Resolved Spage
ResolvedQgil
ResolvedQgil
ResolvedQgil
Resolved Spage
Resolved Spage
Resolved Spage
DeclinedNone
DeclinedNone
Resolved Spage
Resolved Spage
DeclinedNone
DeclinedNone
ResolvedVolker_E
ResolvedVolker_E
Resolved violetto
OpenNone
OpenNone
ResolvedVolker_E

Event Timeline

Volker_E created this task.Nov 23 2015, 9:20 PM
Volker_E raised the priority of this task from to Needs Triage.
Volker_E updated the task description. (Show Details)
Volker_E added subscribers: Volker_E, TheDJ.
Restricted Application added subscribers: StudiesWorld, Aklapper. · View Herald TranscriptNov 23 2015, 9:20 PM

Open questions so far:

  • Do Templaters always have the ability to add tabindex attribute to elements where they could add is-aural CSS class?
  • Does is-aural best-describe the class, when keyboard-only users are also addressed by it?
  • Where should such a class construct belong? A mediawiki.aural.styles module like @TheDJ proposed?
Volker_E updated the task description. (Show Details)Nov 24 2015, 12:59 AM
Volker_E set Security to None.

Open questions so far:

  • Do Templaters always have the ability to add tabindex attribute to elements where they could add is-aural CSS class?

Yes. All our html constructor things allow attributes whether they use Html::element, templates or oojs ui

  • Does is-aural best-describe the class, when keyboard-only users are also addressed by it?

Naming is hard. I'd suggest we discuss name in fe group.

  • Where should such a class construct belong? A mediawiki.aural.styles module like @TheDJ proposed?

I'd suggest something like this is baked into a CSS file that everything uses if you want it to get widespread adoption. I'm not sure if it needs it's only module (remember modules can consist of multiple files)

Volker_E updated the task description. (Show Details)Dec 30 2015, 2:16 AM

Change 261611 had a related patch set uploaded (by VolkerE):
Integrate Less class helper file

https://gerrit.wikimedia.org/r/261611

Volker_E renamed this task from Integrate (stateful) CSS class for screen reader and keyboard-only users into core to Integrate CSS mixin for screen reader and keyboard-only users into core.Mar 3 2016, 3:22 AM
Volker_E updated the task description. (Show Details)

Change 261611 merged by jenkins-bot:
Integrate Less helper .mixin-screen-reader-text()

https://gerrit.wikimedia.org/r/261611

matmarex closed this task as Resolved.Mar 3 2016, 8:26 PM
matmarex assigned this task to Volker_E.
matmarex removed a project: Patch-For-Review.

Citing from T43297#2119125

At some point we should consider adding clip-path property like in clip-path: polygon( 0 0, 0 0, 0 0, 0 0 ) as laid out in updated offscreen techniques article.