Make dropdown menus accessible by tabbing #540
Conversation
|
Will this help with sub-menus not working on iOS devices? I have a new site that shows normal menus on an iPad in landscape. The submenus display but are not "touchable". |
|
@davidakennedy: Would you mind sharing your thoughts on this? |
|
@obenland Sure! I have it on the list. I'll take a look this weekend. |
| links = menu.getElementsByTagName( 'a' ); | ||
|
|
||
| // Each time a menu link is focused or blurred call the function toggleFocus | ||
| for ( i = 0, len = links.length; i < len; i++ ) { |
There was a problem hiding this comment.
Should we use var here so the variables are not undefined later? So like:
for ( var i = 0, len = links.length; i < len; i++ )
Suggestion after running the code through JSHint.
|
I tested this with a keyboard and with a screen reader (Voiceover on a Mac) using I also added a few JS suggestions on the code that may be helpful, but I defer to someone who's stronger in JS. :) As far as creating an array of separate menus so this works in more than one menu: I think it's best to keep it simple. Depending on where additional menus are on a site, they may not have/need multiple levels. It seems like an advanced use case that we should leave to developers. The good thing is this script gets them a lot of the way there! |
|
Thanks for the feedback @davidakennedy I'm glad everything's working properly. I've made the changes suggested and also adjusted the punctuation in my comments for consistency. |
|
@chrisdc Thanks for making the changes! I was going to retest, but looks like it might cause some conflicts. Do you want to update it? |
|
Hello, I apologise if I'm missing something else, but are you referring to
|
|
I'm jumping in late here: Have you considered looking at existing solutions like the one recommended by the Accessibility Project? http://codepen.io/grayghostvisuals/pen/d7d131e58a33665d24ea0881c01a02b8 While building a new solution can work, this is a topic heavily investigated by others already and it might be a good idea to borrow lessons from them. The solution above is bloated, but can easily be boiled down to the bare essentials while retaining the functionality needed in a way that is recommended by leading experts. |
|
Hello, my primary motivation in this pull request was to bring the tabbing functionality from the Twenty Fourteen theme into _s, which is also consistent with the wordpress.org accessibility guidelines. I have seen the example menu you linked to and there is certainly potential for bring more of these features into _s, especially arrow key navigation and increased use of ARIA roles (See also #545). In the end I thought it was better to submit a relatively simple pull request, and perhaps add other features afterwards, but if there is a consensus in favour of including more features now I'm happy to adjust my pull request. How do people feel about this? |
|
It's a bit of a philosophical question: Is tab enabled navigation the goal or is it making _s accessible out of the box? To me the answer is the latter, but others may differ. My fear is that tab enabled navigation will become a crutch that is used to say "we did enough" and the real issue (accessibility) will be left to obscurity. If _s sets a standard for properly accessible drop-down menus others will follow. |
|
Isn't tab enabled navigation one step closer to accessible drop-down? Arrow key navigation and ARIA would be big plus but are they as important? |
|
It's not so much that I think tabbing is the complete solution, rather I
|
|
@chrisdc I have tested and used this solution and it's working as expected, good job! And I agree that this is a good first step. |
|
Getting the menu to become truly accessible requires a bit of a rethink of how the main and mobile menus are included. While this is a good step towards accessibility I think the ideal solution lies down a different track entirely. |
|
@mor10 Can you explain in more detail? How should main and mobile menu be included. Are they different menus with different markup. Are you referring to codepen example above. |
|
@chrisdc Sorry for the confusion. Your JavaScript is fine. 😄 I was referring to the message just above the comment box that says, "This pull request contains merge conflicts. Please resolve them." Sometimes it means the pull request cannot be automatically merged. @mor10 Thanks for your feedback! I would be curious too as to what you would envision for the menus and why they would need a total rethink. Everyone on `_s is interested in making it as accessible as possible. Regarding tab-enabled support vs. more robust keyboard supprt/ARIA: Overall, I think the solution above is a great start to creating more accessible dropdown menus in Could this solution be more robust? Sure! If we think that's a direction we should go, let's talk about it here. A few questions pop into my mind:
|
|
@davidakennedy Ah, ok I understand now thanks. I'll try and rebase the pull request later today. Having said that, while we're dicussing alternatives would it be completely crazy to suggest a more object-orientated approah to menu javascript? We could create a menu class with methods for handling responsive features, ARIA, tabbing dropdowns, arrow key navigation etc. There's a risk of adding complexity, but I believe I can develop a clear system where theme authors can apply the features they need on an individual menu basis, or simply remove methods they don't need at all (and we can add more methods later on). |
|
@chrisdc that sounds awesome, but my worry would be - just like you say - the added complexity. I wonder how long it would take to whip up a prototype? |
|
@mikemike At this stage it's just an idea in my head, but I think I could deliver a prototype within the next few days. I'll try some stuff in Codepen and see if it works well or hits complications. |
|
@chrisdc I think that's an idea worth exploring. Thanks for taking it on! I think what we have above is a minimum viable PR for this, but let's see where this takes us. One thing I'll say that would be good to remember: And @chrisdc, let me know how it goes. Happy to test things out. |
|
@davidakennedy et.al. To answer your question, the current menu implementation is desktop-first. That means the menu toggle is off by default and is only triggered once the screen is small enough. It also means the structure and thinking around the menu is reversed from what it should be which is mobile as baseline and larger menu with drop-downs as a secondary option. IMO the menu should be mobile first and marked up as such. This will allow for proper handling of menu items for accessibility as the baseline. For wider screens the menu can then be expanded and drop-down behaviours added on. These would include JS solutions for accessibility with respect to the drop-downs as discussed above. There is also a good CSS reason for changing the order: With the current order of desktop to mobile a designer / developer needs to produce all the necessary styles to get the menu to look correct and then use media queries (and usually extensive overrides) to disable these styles on smaller screens. In the reverse scenario the menu can be styled to match designs on smaller screens and then additional rules for larger screens are added using media queries. This allows for less code and more intuitive structuring of styles. |
|
I've rebased the changes in this pull request so it should work now and I'm continuing work on my prototype. |
|
Possibly silly question: Since _s has gained Sass since I opened this pull request should I be adding my changes to style.css into the the Sass as well? Sorry I'm not quite clear on the procedure here. |
|
I think keeping them N'Sync would be good, yes. |
|
🎹 |
|
I wonder if role="menuitem" could be added in WordPress core (I guess haspopup would depend on the theme), but it should certainly be possible to add them both with vanilla JS . |
|
|
|
As it happens I was just having a quick adding them both in here. I'll try opening a ticket and we'll see what people think about it. |
|
May I ask how people are feeling about this pull request at the moment? Is the consensus in favour of (perhaps) merging the current changes and advancing from there, or would people prefer to hold out for something more advanced (probably object orientated navigation.js with tab access + enchanced use of aria). I'm happy to continue working on this in either case, but it might be worth discussing these enhancements elsewhere if this pull request is likely to be merged. |
|
I like the object-oriented approach. It is easy to follow and feels like it will be easier to enhance in the future. |
|
At this stage I'm pretty happy with my basic object-orientated navigation.js. It may be slightly longer than what we have now, but I feel this approach is flexible and easy for theme authors to customize. There is one bit that's giving me problems, and that's aria states, specifically aria-hidden on dropdown menus and aria-expanded as @davidakennedy has been looking at in #545 (Hope you don't mind me having a go including it). As far as I can see many of these states will change according to whether we are on the small, or large screen menu, but listening for this is tricky. The current approaches seem to be:
Let me know if you disagree (or I'm missing something obvious), but to me both of these approaches feel very heavy handed for a WordPress starter theme. MediaQueryListListeners look promising, but are nowhere near ready for general use. |
|
Ok, so the object orientated code has been giving me trouble then I anticipated, but I think I'm about there (Here's the latest version). This code is slightly less memory efficient then before, but easier for theme authors to work with I think. It's also handling errors better as well. Is everyone happy to put this into the pull request instead of the old code? @samikeijonen To follow up on our discussion above I opened a ticket on the core track to discus aria roles, but Joe Dolson made the point that the menu role is intended for controls of the current page rather than navigation. Based on this, and my comment directly above this one, I'm inclined to save any further use of aria for a future pull request. |
|
Looks good but I haven't tested it yet. |
Makes it a little easier to use the primary navigation with assistive devices. See #545.
|
I've switched this over to the object orientated approach as everyone seems to be in favour of this so far (Can always be changed back if need be). It's also updated to include the changes from #643 (EDIT: Sorry, got into a mess with a merge conflict there, but seems to be ok now) |
|
I'm just doubling back to this to say:
@chrisdc Thanks for all your work on this. Hold off adjusting the function names until we hear a yes or no. 😄 |
|
Just bumping: What is the status on this? Can we expect _s to ship with an accessible menu soon? |
|
The code works well. I've tried to combine flexibility with ease of
|
I think I'd prefer that. The purpose of this ticket is to improve menu a11y so let's not make it optional. This is pretty close to what it probably should look like eventually. Also: We as maintainers need to do a better job in shepherding tickets like this, where there is an active and responsive contributor and lots of interest around it. Me explicitly included. Let's make this happen. |
|
To be honest I'm inclined to agree, I'm starting to feel the oo version might be over-thinking things for a starter theme, so I've switched back for now. I'll leave this gist up for anyone who's interested in the oo version. The latest code keeps the more compact toggleFocus function and the code to add aria-haspopup. |
Completely agree with you here. Where are we at with this? Is it ready for review? |
|
Does anyone have any thoughts on the issue @davidakennedy raised above (Do we need to prefix js function names)? Other than that it's all ready as far as I can see. |
|
Can we use |
|
Do you mean as an anonymous function? Right now I would end up duplicating
|
Merge remote-tracking branch 'upstream/master' Merge pull request Automattic#910 from ckschmieder/figureMargin Fixed margin causing x-wide imgs (contained within a figure tag) to overflow content area. Props @ckschmieder and @jrfnl updated sass to include margin fix for figure elements Merge pull request Automattic#853 from jrfnl/feature/conditional-pingback-header Only generate pingback url header tag when relevant. Merge branch 'gatespace-use-tab-indent' Merge branch 'use-tab-indent' of git://github.com/gatespace/_s into gatespace-use-tab-indent Merge pull request Automattic#988 from davidakennedy/master Fix skip to content link. Fix skip to content link. * Reverts this commit: Automattic#927 The issue for that, Automattic#928 referenced an old commit. The `id` is still in the source though. * Brought up by Automattic#982. The `id` was correct, should not have been changed and this fixes everything. Fixes Automattic#982 Merge pull request Automattic#944 from mrwweb/fix-archive-description-class change .taxonomy-description to more accurate .archive-description Merge pull request Automattic#882 from byjml/patch-1 Use consistent syntax for control structures Merge pull request Automattic#985 from josephfusco/clean-whitespace Clean up trailing whitespace, thanks for this @josephfusco. Clean up trailing whitespace Merge pull request Automattic#978 from emiluzelac/patch-49 Tested up to: 4.5.3 version bump. Merge pull request Automattic#984 from josephfusco/clean-whitespace Clean up trailing whitespace Clean up trailing whitespace Using tabs instead of mixed tabs/spaces Mixed usage of tabs/spaces for `/inc/jetpack.php` and `/sass/style.scss`. Tested up to: 4.5.3 version bump. Merge pull request Automattic#968 from Automattic/remove-post-formats Removing post formats support and styles from _s Merge pull request Automattic#949 from phoenixenero/master Only show page entry footer if edit link is available; props @phoenixenero Removing post formats support and styles from _s Indent `.entry-footer` in `content.page.php` Merge pull request Automattic#963 from davidakennedy/master Fix errors in Travis CI from latest PR. Add new line at end of file for JS Hint. Fix errors in Travis CI from latest PR. * `navigation.js` had a few spacing issues and variable placement problems causing JS Hint to throw errors. * See: Automattic#900 Merge pull request Automattic#900 from iamtakashi/fix-menu-for-touch Toggle focus class to allow submenu access on tablets. Props @iamtakashi Merge pull request Automattic#961 from Automattic/sass-field-padding Update form field padding in Sass so style.css and Sass match. Merge pull request Automattic#953 from paulgibbs/whitespace Remove unnecessary tab character from readme. Props @paulgibbs Update form field padding in SASS Consolidate styles for form field/textarea padding in Sass. Consolidate styles for form field/textarea padding. Props @emiluzelac Consolidate styles for form field/textarea padding. Props @emiluzelac Merge pull request Automattic#947 from emiluzelac/patch-47 Custom header comment re-wording, props @emiluzelac Remove unnecessary tab character from readme. Redundant styles. Leftover from: Automattic@309037e#diff-da232d78aa810382f2dcdceae308ff8e Only show page footer if there's an edit link. Checks the output of `get_edit_post_link()` before displaying the entry footer. Custom header re-wording A custom header is no longer commented: https://github.com/Automattic/_s/blob/master/functions.php#L132 change .taxonomy-description to more accurate .archive-description Update copyright date in style.css header Merge pull request Automattic#938 from emiluzelac/patch-46 Add widget description - props @emiluzelac Merge pull request Automattic#915 from samikeijonen/master comments_popup_link arguments props @samikeijonen. I think Travis is having a moment about other issues so going to commit as on testing this it does work. Thanks. Update functions.php Add widget description I keep seeing authors leave description as-is (empty) and believe that it wouldn't hurt to add something in by default. This is a general description taken from https://github.com/WordPress/twentysixteen/blob/master/functions.php#L150 At the same time it shows good practice how to escape the content and translate the string too. Merge pull request Automattic#918 from daviduzelac/patch-1 _s.pot update to reflect current strings. Props @daviduzelac Merge pull request Automattic#927 from jaspermdegroot/skip-link Correct href for skip to content link. Props @jaspermdegroot Merge pull request Automattic#924 from Automattic/input-search Remove content-box box-sizing on search fields. Fixes Automattic#895 Merge pull request Automattic#937 from web2033/patch-1 New Jetpack domain New Jetpack domain Correct href for skip to content link Merge pull request Automattic#923 from Automattic/navigation-js-tab-documentation Clarify TAB key support in navigation header comment; Fixes Automattic#917 Remove content-box box-sizing on search fields Clarify TAB key support in navigation header comment _s.pot update to reflect current strings Most notable change is removal of: Automattic@60f7311 Thanks! Merge pull request Automattic#888 from jrfnl/feature/slim-down-travis Slim down the travis script - remove superfluous checks. Fixes Automattic#881. Let the Core handle all the others arguments but the first one. This is better for accessibility. And fewer strings to translate in your theme. Merge pull request Automattic#914 from emiluzelac/patch-45 Miscellaneous readme.txt changes Update readme.txt Merge pull request Automattic#913 from benoitchantre/update-year-in-copyrights Update the year in copyrights Update readme.txt Miscellaneous readme.txt Changes * Version number test change. * Capitalizing theme name to reflect the rest of the theme. * Copyright year bump. Update the year in copyrights Merge pull request Automattic#897 from gregrickaby/patch-1 add blank line between selectors Merge pull request Automattic#911 from pra85/patch-1 Fix typos Fix typos `exisiting` → `existing` `Contibuting` → `Contributing` Added new style rule which sets left & right margins for 'Figure' elements to 0px (currently 40px via normalize.css) because margin is causing extra wide images (i.e. 1200px) to overflow the content area. Merge pull request Automattic#904 from davidakennedy/master Update browser support documentation Update browser support documentation Toggle focus class to allow submenu access on tablets add blank line between selectors Only get the jshint file when needed. Merge pull request Automattic#887 from mrwweb/html5-inputs List all HTML5 input types. Props @mrwweb Let's not forget to clear the js cache as they have changed. Updated based on feedback. * Include skip-link-focus-fix.js in the js hint/lint tests & fix up the file. * Pull in .jshintrc from WP SVN. * Add PHPCompatibility Sniffs. * Sync the ignore statements to always exclude .min.js files. * Slim down the tested against PHP versions even more. Remove comments not ending in a period. Helps avoid Travis CI errors for wrongly formatted comments. Most of these end of function comments (if not all) are useless anyway. Props @WPAddiction for reporting. Fixes Automattic#891. Slim down the travis script, add js checks and fix js errors thrown up. What it will now do: - Lint the php files against relevant PHP versions. - Lint the js files once - the result won't change across PHP versions. - Check against WPCS once - the result won't change across PHP versions. What I have changed: - Added linting against PHP 7 and HHVM, with HHVM being allowed to fail. - Added js linting and style check per example from Twenty Sixteen. - Moved to the faster container based environment for running travis. - Script will no longer pull in PHPCS, WPCS and the JS linters in every build. Now they will only be pulled in when needed. - Limited the clone depth for quicker cloning of external repositories. - Removed the pulling in of WP and running builds against different WP versions as this wasn't used at all in the actual test scripts. use sass var for select border color Merge pull request Automattic#886 from mrwweb/contrib_html5 Remove note on HTML5 and H1s following Automattic#776. list all html5 input types. fixes Automattic#885 remove note on HTML5 and H1s following Automattic#776 Use consistent syntax for control structures Changed the opening brace to ':' (or colon) and the closing brace to `endif;` Only generate pingback url header tag when relevant. Rationale: 1. The principle of pingbacks is based on articles. Pingbacks are a special kind of comments and the article being 'pinged-back' has to be identifiable (which they're not on archive pages and the like). 2. WP only registers a ping if it can identify the article which is supposed to have been 'pung'. See: https://developer.wordpress.org/reference/classes/wp_xmlrpc_server/pingback_ping/ 3. Pingbacks, like comments, can be disabled on a per article basis. Therefore, having the pingback url auto-discovery header in place, only makes sense on singular pages where pings are open. Merge pull request Automattic#676 from grappler/content-single-post-format Add support for post format templates in single post content. Add support for post formats in single post Merge pull request Automattic#879 from Automattic/remove-custom-header-admin-callbacks Remove custom header admin callbacks. Remove custom header admin callbacks. These haven't been needed since 4.1, when the Header page under Appearance was deprecated and linked to the Customizer instead. Merge pull request Automattic#859 from jrfnl/feature/854-no-unncessary-php-tags Avoid going in and out of PHP unnecessarily. Merge pull request Automattic#874 from limestreet/master Update documentation references to present-best URLs. Last 3 non-https WordPress URLs updated and custom header link updated too - issue Automattic#734 Last 3 non-https WordPress URLs updated - issue Automattic#734 Merge pull request Automattic#867 from WPAddiction/change-aside Use a single aside for sidebar element, with sections for each widget. Merge pull request Automattic#872 from Automattic/simplify-primary-location-name Update 'primary menu' location to 'primary' to simplify for users. Update 'primary menu' location to 'primary' to simplify for users. Merge pull request Automattic#871 from emiluzelac/patch-44 Bumping (Tested up to:) version number Bumping (Tested up to:) version number Minor version update, that's all. Changed widget wrapper from div to section Per WordPress/twentysixteen#355 Move aside from the widgets to the entire sidebar. It appears that the entire sidebar should be one large aside instead of making each widget it's own aside. At least that's how I understand it when reading w3. It would make sense to make each widget it's own aside if not all of the widgets were asides, but otherwise the entire sidebar should be considered one aside. Plus I think this would make more sense for accessibility and with the widgets titles being h2 because if the entire sidebar had a title that would be the h1. https://www.w3.org/wiki/HTML/Elements/aside Merge pull request Automattic#865 from noskov/master Remove redundant empty new lines at the end of some files Remove redundant empty new lines at the end of some files Merge pull request Automattic#785 from carl-alberto/fixCustomizerHeaderTextColor Fix Customizer header text color, applying the color change to the `a`, not the parent element. Fix for open issue Automattic#768 (Site title color in the Customizer) This fixes the header text color link (blogname) to also update the same way as the blogdescription Fix for open issue Automattic#768 (Site title color in the Customizer) Fixed the missing Blog title text when "Display Header Text "option in the Customizer is toggled on/off Updated the code to adjust the css color of .site-title a Fix for the header color issue Automattic#816 Merge pull request Automattic#861 from davidakennedy/master Fix failing Travis build because of extra whitespace Fix failing Travis build because of extra whitespace Avoid going in and out of PHP unnecessarily. Closes Automattic#854 Includes minor alignment changes for easier readability/detection of start/end of conditions. Merge pull request Automattic#680 from iandunn/clearfix-max-width Set a fixed table-layout in the clearfix to avoid max-width conflict Merge pull request Automattic#848 from ernilambar/master respect content-search.php for search result in Jetpack Infinite Scroll Merging as comments and second opinion given in ticket. Merge pull request Automattic#820 from sixhours/master Remove hfeed from header.php, add to body_class filter. See Automattic#740 Merge pull request Automattic#857 from davidakennedy/skiplinkcss Do not show the outline on the skip link target container Do not show the outline on the skip link target container * Putting it in style.css solves the issue for our specific skip link, but leaves the outline working on other anchors in case developers need that. * For discussion, see: Automattic#814 * Related: Automattic#755 and Automattic#604 Fixes Automattic#543 Merge pull request Automattic#851 from iamdmitrymayorov/removeSearchSubmit Removed widget search submit styles. Removed widget search submit styles. Merge pull request Automattic#856 from jrfnl/feature/835-apply-to-style.css Apply the fix from Automattic#835 to style.css. Apply the fix from Automattic#835 to style.css. Merge pull request Automattic#850 from iamdmitrymayorov/hideSearchSubmit Not hiding submit button on search widget. Merge pull request Automattic#855 from jrfnl/feature/fix-travis-build Fix failing Travis build because of new way of echoing site `$description` Ignore WPCS output escape warning for description as it *is* already correctly escaped. Fixes failing travis build. Not hiding submit button on search widget. Merge pull request Automattic#826 from tywayne/issues/825 Only output tagline markup when tagline exists or is_customize_preview Merge pull request Automattic#840 from limestreet/master Update _widgets.scss. I think this is a good option as we can show like Twenty Sixteen and just remove if the theme requires it. respect content-search.php for search result in Jetpack Infinite Scroll Merge pull request Automattic#842 from davidakennedy/master Change URL of pull request so it's not altered by generator Change URL of pull request so it's not altered by generator * Fixes Automattic/underscores.me#39 * Related to Automattic#808 Merge pull request Automattic#841 from davidakennedy/master Fix failing build in Travis Fix failing build in Travis * See: https://travis-ci.org/Automattic/_s * Build failed because of empty lines are not allowed in multi-line function. Update _widgets.scss Merge pull request Automattic#821 from Automattic/update-po-file Update .po file to reflect current text strings. Merge pull request Automattic#837 from limestreet/master fixed issue Automattic#835 Merge pull request Automattic#831 from Automattic/responsive-videos Add theme support for Responsive Videos. Update PHP Documentation Update _menus.scss Add theme support for Responsive Videos. only output tagline markup when tagline exists or is_customize_preview Merge pull request Automattic#822 from Automattic/update-header-check Simplify check for hidden header text. Simplify check for hidden header text. Add missing line breaks. Split source references into two lines to mirror original syntax. Merge pull request Automattic#677 from mignonstyle/prototype_customizer Reflect the change of color in the customizer. Update generated bug report URL to reflect correct _s-specific URL. Add comments to indicate php markup and match original file. Merge pull request Automattic#809 from emiluzelac/patch-43 Header link update and capitalization Merge pull request Automattic#819 from Automattic/update-contributor-docs Update contributor docs Re-add #@ _s comment in order to match original source and indicate source of text strings. Update .po file to reflect current text strings. Remove 'hfeed' class from header.php * This was moved to inc/extras.php to be added via body_class filter Add 'hfeed' class via body_class * Only add the 'hfeed' class when viewing a non-singular page, such as an index or archive Merge pull request Automattic#775 from davidakennedy/editlinkposttitle Add post title to `edit_post_link` Update contributor docs I've split this into two sections: submitting issues and contributing code, since those are two different actions. This fixes Automattic#615 by mentioning that both CSS and SCSS source files should be updated when submitting a PR. Merge pull request Automattic#812 from jamigibbs/20150825 Removing unnecessary ampersands, fixes Automattic#791. Removing unnecessary ampersands, fixes Automattic#791 Merge pull request Automattic#810 from iamdmitrymayorov/master Added missing period in a load_theme_textdomain() comment. Added missing period in a load_theme_textdomain() comment. Update functions.php Update functions.php Header link update and capitalization Itty-bitty update for header comment block and new functions link. Merge pull request Automattic#792 from grantpalin/master Update comparisons to resolve the strict comparison warnings Merge pull request Automattic#805 from deadlyhifi/patch-1 Remove wp_title filter. Remove _s_wp_title function No longer required under 2 version back support requirements. Merge pull request Automattic#800 from iamdmitrymayorov/master Remove template-tag shims for versions prior to 4.1. Solves Automattic#799. Merge pull request Automattic#801 from corvannoorloos/patch-3 Add clearing rule to centre-aligned elements in order to match CSS file. Merge pull request Automattic#789 from corvannoorloos/patch-1 Add font-family declaration for body text. Merge pull request Automattic#790 from corvannoorloos/patch-2 Remove :hover and :active states on screen-reader-text. Merge pull request Automattic#802 from corvannoorloos/patch-4 Remove unnecessary margin-top and margin-bottom from caption text in order to match SCSS source file. Merge pull request Automattic#798 from emiluzelac/patch-42 Since 4.3 is now released, we no longer require backward-compatibility for versions older than 4.1 and this can be removed. Removing the_posts_navigation(), the_post_navigation(), the_archive_title(), the_archive_description() since 4.3 is out. Remove _s_render_title() Removing `_s_render_title()`, no longer needed as of 4.3. Update comparisons to resolve the strict comparison warnings. See Automattic#784 Remove sass :hover and :active states on screen-reader-text see Automattic@67b2428 Remove remaining caption margin-top and margin-bottom see Automattic@3d6bd4d Add sass missing center alignment clearing Add style.css missing main font family Merge pull request Automattic#778 from emiluzelac/patch-41 Link to developer resources for further reading. Fix typo. Merge pull request Automattic#781 from PJ-Finlay/add-documentation-in-comments Updated file documentation. Merge pull request Automattic#776 from mor10/new_heading_structure_redux Change headings structure for better accessibility for assistive technology users. Updated documentation in comments at the top of files. I tried to standardize and expand the documentation and links to codex.wordpress.org in the comments at the top of most files. Merge pull request Automattic#783 from pixolin/patch-5 Change Credit Link to https:// Change Credit Link to https:// As WordPress encourages to call their webpages with https-protocol, the credits link in the theme footer should use https, too. Amended patch to display site-title as paragraph on single posts and pages as per discussion in PR. Merge branch 'master' of https://github.com/Automattic/_s into editlinkposttitle Add post title to `edit_post_link` * Use `__()` instead of `_x()` * Add translator comment, remove context modifier. * Remove escaping on `the_title()`; it's trusted data. Resolves: Automattic#774 Move translator comment closer to string. Translator comments should be placed directly in the line above the string to be translated, in order for parser to pick it up. Added condition to include a hidden H1 on index when a page is set to front and the posts page is also set to a page as per suggestion by @davidakennedy Inline link update I believe that we can update inline links to https://developer.wordpress.org. Please confirm. New heading structure - redux of Automattic#651. Provides proper semantic structure for titles throughout theme: In header.php: Site title set to H1 on front page, div on other pages In functions.php: Widget title set to H2 for semantic hierarchy In content-search.php and content.php: Heading set to H2 as page title is "Search" or "Archive title" etc. Add post title to `edit_post_link` This improves the accessibility of these links, and gives more context for screen reader users. Now, they know exactly where the link goes. Escaped output with `esc_html_x` and `wp_kses`. Resolves: Automattic#774 Merge pull request Automattic#770 from circlecube/patch-1 Update theme comment section so it will remain when compiled & compressed. update theme comment section so it will remain when compiled & compressed Merge pull request Automattic#763 from sagarjadhav/master Updated Tagline markup as per W3C guidelines. Merge pull request Automattic#767 from emiluzelac/patch-40 _s.pot update _s.pot update To reflect most recent changes such as `template-parts`. Merge pull request Automattic#765 from emiluzelac/patch-39 Minor link update for languages. Minor link update for languages - http://codex.wordpress.org/WordPress_in_Your_Language now redirects to https://make.wordpress.org/polyglots/teams/ - http://codex.wordpress.org/Function_Reference/load_theme_textdomain has new (nicer) home https://developer.wordpress.org/reference/functions/load_theme_textdomain/ Updated Tagline markup as per WC3 guidelines. Merge pull request Automattic#762 from fklein-lu/fix/coding-standards-issues Update theme against WordPress Coding Standards. Fix Codesniffer errors. Merge pull request Automattic#750 from emiluzelac/patch-37 Update README. Minor GPL wording update Minor GPL wording update to reflect `GPLv2 or later` what readme already does at the beginning :) Merge pull request Automattic#744 from jamigibbs/master Add a readme.txt file props @jamigibbs - thanks for your work on this. Merge pull request Automattic#747 from Automattic/screen-reader-text-hover/active Remove :hover and :active states on .screen-reader-text. Props @lancewillett Remove :hover and :active states on screen-reader-text We should consider removing all CSS rules that provide `:hover` and `:active` pseudo element behavior for `screen-reader-text` elements. In IE 10/11, the `screen-reader-text` element, normally hidden, pops up when you hover your mouse over it, obscuring content — the Archives Widget drop-down menu is a good example. According to the latest from the core a11y team: https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/ -- we only need the `:focus` pseudo element class. Props to @lancewillett for figuring this out. Adding Installation and refining sections Updates based on the example by the “resonar” theme. Merge pull request Automattic#460 from grappler/content_width Move $content_width within setup function Merge pull request Automattic#745 from fklein-lu/fix/travis-build-fails Fix remaining coding standards errors. Fix remaining PHPCS errors: * Add ignoring in template-tags.php and comments.php. * Escape header text color in custom-header.php. Adding a readme.txt file Add a readme.txt file This is based on the recommendation of the theme review team. https://make.wordpress.org/themes/2015/04/29/a-revised-readme/ The goal is for a uniformly structured read file adopted by all theme authors. Having the template ready in _s would speed up the adoption. Merge pull request Automattic#729 from grappler/license Declare Underscores license. Merge pull request Automattic#742 from andyjsaint/wp_kses In the arguments passed to `the_content()`, whitelist the class attribute of the Read More link so that it passes through `wp_kses()`. Allow the class attribute to pass through kses Escape translations in search.php See Automattic#737. Escape translations in functions.php See Automattic#737. Escape translations in footer.php See Automattic#737. Escape translations on comments.php. See Automattic#737. Escape translations on 404.php See Automattic#737. Escape translations in content-single.php See Automattic#737. Escape translations in content-page.php See Automattic#737. Secure translations in content.php. See Automattic#737. Secure translations in content.php. See Automattic#737. Escape translations in custom template tags. See Automattic#737. Escape translation in title shim. See Automattic#737. Don't use `esc_html__()` on translation containing HTML. Use `wp_kses()` instead, whitelisting the only HTML the string can contain. Update Jetpack URLs to https See Automattic#734. Better coding standards for no content template. See Automattic#737. Better coding standards for theme header. See Automattic#737. Move template parts into their own dedicated folder and update Infinite Scroll to reflect this change. See Automattic#642. Props @leopuleo. Better coding standards. See Automattic#737. Update Travis CI Build Matrix now that WordPress 4.2 has been released. Move $content_width within a function State licence of Underscores Merge pull request Automattic#732 from emiluzelac/patch-36 Update localization link location. Add whitespace rule exclusion into build checks. See Automattic#737. Get rid of coding standards errors in the 404 page template by making sure that potentially unsafe output is escaped. See Automattic#737. Exclude whitespace rules from coding standards checks. See Automattic#737. Kick off better coding standards sweep. See Automattic#737 Travis CI builds are failing. Remove all coding standards exclusions so that we're able to generate a useful, actionable report on which to base fixes to the build failures. Localization link Minor change with the new localization URL. _s: Mobile-first toggle menu. Reverse media queries to use min-width instead of max-width, taking a mobile-first approach to the navigation menu. It displays as the default, and disappears at widths above 600px. Fixes Automattic#579. Merge branch 'pr/540' _s: Tabbable dropdown menus. Fixes Automattic#540. Merge pull request Automattic#690 from corvannoorloos/master Update travis.yml to adhere to coding style used in WordPress' CI file. Merge remote-tracking branch 'origin/master' Merge branch 'pr/722' Fixes Automattic#722. Merge branch 'pr/722' New 1200x900px screenshot, compressed Updated Sass and CSS files to remove numbered TOC structure for added flexibility Merge pull request Automattic#657 from jaspermdegroot/header Made aria-controls refer to an ID instead of a class. Prevents ARIA error. Merge pull request Automattic#708 from corvannoorloos/link-build-results Link Travis build results. Link Travis build results This links the badge to the Travis CI build results page Header: Made aria-controls refer to an ID instead of a class Merge pull request Automattic#704 from oskarcieslik/patch-1 Fix JSLint error: `regular expressions should be preceded by a left parenthesis assignment colon or comma`. JSLint error JSLint error: "regular expressions should be preceded by a left parenthesis assignment colon or comma" Merge pull request Automattic#703 from taupecat/upstream-master Using best practices to apply the proper units to the font-size mixin. See http://sass-guidelin.es/#units Using best practices to apply the proper units to the font-size mixin. See http://sass-guidelin.es/#units Merge pull request Automattic#702 from Automattic/fix-701 Sanitize location.hash before passing it to getElementById. See Automattic#701. Merge pull request Automattic#700 from pixelstrolch/comment-navigation Consistent navigation. Fixes Automattic#699. Sanitize location.hash before passing it to getElementById There is no actual vulnerability in the existing implementation, as we can only fetch existing elements (no DOM injection is possible). Plus, the only call occurring on those elements is `HTMLElement#focus`. Consider this an extra, more future-proof precaution. Consistent navigation Handle the comment navigation the same way as the new the_post_navigation() and the_posts_navigation(). Merge pull request Automattic#698 from slushman/master Remove duplicate b & strong and improve SASS inheritance. Removed duplicate b & strong styling, changed SASS files to make use of parent selector: _menu, _galleries, _buttons, _fields, and _elements. Merge pull request Automattic#695 from FStop/694-css-small-twice Remove duplicate CSS rule for `small`. Fixes Automattic#694. Remove duplicate CSS rules for `small` - refs Automattic#694 update travis.yml In short this updates `travis.yml`'s indent size to 2 spaces as per WordPress' development repo and Jetpack. Inserts final newline. Uses a period at the end of each sentence. Merge branch 'issue/617' Fixed merge conflicts. Merge pull request Automattic#679 from iandunn/center-block-margins Remove unnecessary margin-top and margin-bottom from center-block mixin. Set a fixed table-layout in the clearfix to avoid max-width conflict. Some browsers ignore the max-width property on children of elements with display: table. See http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/ Remove unnecessary margin-top and margin-bottom from center-block mixin. Setting top and bottom margins is not necessary to center the element, and it can potentially override the margins set by another rule. Reflect the change of color in the customizer. Fixed ".site-title" to ".site-title a". Merge branch 'pr/667' Revert "Merge branch 'pr/667'" This reverts commit a7c2f89. Been meaning to give proper attribution, but Git lost the commit after I edited the merge commit. See Automattic#667. Merge branch 'pr/667' Fixes Automattic#667. Props @gatespace. Use core navigation template tags. * Remove custom arguments from `the_posts_navigation()` and `the_post_navigation()`. * Adjust fallbacks for `the_posts_navigation()` and `the_post_navigation()`. * update pot file. * merge master for style.css and style.scss. Update Travis CI build checks. Props @miya0001. See Automattic#663. Update WP versions that are being used in Travis checks. [skip ci] Bring back box-sizing reset. Props @chrisdc. See Automattic#674. Merge pull request Automattic#670 from JulienMelissas/patch-1 Add braces around if statement. _s: Use semantic versioning. Fairly minor and noncommittal change. It does encourage theme authors to think about semantically versioning their themes but doesn’t require `_s` to take a strong stand on it. It also removes an obstacle from submitting the generated theme to the WordPress.org Theme Directory, as it refuses themes with non-numeric version numbers. Fixes Automattic/underscores.me#8 Closes Automattic/underscores.me#20 Props @ScottSmith95. Merge pull request Automattic#673 from fklein-lu/remove-home-link Remove home link from `wp_page_menu()` args. _s: Remove author data shim. Immediate set up of author data in author archives was added in WordPress 3.7, so it’s safe to remove. See https://core.trac.wordpress.org/ticket/14408. See a156f2c. _s: Update copyright year in anticipation of 2015. _s: Remove leading white space in style.scss. See de7a9b5. _s: Remove leading white space for theme name. At some point in the past it was believed that a leading whitespace was necessary for a proper replacement. Let’s see if the existing replace handler can indeed handle it without it. See Automattic/underscores.me@7671cad5685ae8df50a0 2f871a1ae28119b8dbf1 Remove home link from wp_page_menu() args. Normalize rather than Reset. The reset we used was a mix of Normalize, the Paul Irish reset, sprinkled with some blueprint.css, and base styles. It was hard to maintain and just seemed outdated (setting the base font-size to 10px instead of 16px, among other things). Normalize sets saner defaults and is generally just not as disruptive as a full reset. The code was added as is, has only its comments stripped (for now), and is not mixed with any styles to make future updates to it as easy as possible. See Automattic#3, Automattic#44, Automattic#174, Automattic#267, Automattic#617. Add braces around if statement. Running jshint on this file returned an error, adding braces fixed it. Please add braces around if statements!!! :) Avoid repeatedly checking specific post format. Will only check for a specific post format if it’s a post format archive page. See https://core.trac.wordpress.org/changeset/30854 Fixes Automattic#664. Don't check for a private function. Even with WordPress’ commitment to backwards compatibility, we should probably not bank on private functions being around for ever, and tying our functionality to it. This will go old school and do a version check to provide compatibility with older versions of WordPress. Again, this is only temporary until 4.3 is out. See Automattic#644. Fixes Automattic#636. Switch in and out of PHP to render fallback title. The upload checks for the .org Theme Directory are rightfully strict about the contents of the title tag. Switching in and out of PHP should make `_s`-based themes pass those tests again. See Automattic#644 (diff) See Automattic#644. Merge pull request #1 from Automattic/master Update from original
Hello, following on from issue #523 I'm submitting a possible javascript solution to making the dropdown menus in _s tabable (currently dropdowns aren't visible when you tab through the child links). As it's quite a big addition I've broken it down below:
Summary of changes
navigation.js
My additions to navigation.js attempt to replicate this code from Twenty Fourteen, only without the use of jQuery. When a link in a menu is focussed the class
.focusis added to the ancestors of the link, and when blurred it's removed again. This can be targeted with css to keep the appropriate menus visible. Thanks to @joshmcrty for input on combining this with the existing code.Note I did include one slight difference from the Twenty Fourteen code: The original adds
.focusto every ancestor all the way up to the HTML tag, whereas I have included checks to only include li elements within the current menu systems.style.css
To every
:hoverselector in the menu section I've added an equivalent.focusselector, reflecting the fact that we want tabbing through menus to be visually as close as possible to using the mouse.Limitations
Currently this code uses the variable
menupreviously defined in the navigation toggle code. This is efficient, but does make it relativley complicated for theme authors to add tabbing support to multiple menus. If desired I can adjust this code to work from a separate array of menu IDs.