[wp-trac] [WordPress Trac] #51006: Add a mechanism for accessible tooltips in core

[WordPress Trac]

#51006: Add a mechanism for accessible tooltips in core
-------------------------------------+-------------------------------------
 Reporter:  joedolson                |       Owner:  joedolson
     Type:  enhancement              |      Status:  accepted
 Priority:  normal                   |   Milestone:  6.8
Component:  General                  |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  tooltips has-patch       |     Focuses:  ui, accessibility,
  needs-testing needs-unit-tests     |  javascript
-------------------------------------+-------------------------------------
Changes (by joedolson):

 * keywords:  tooltips 2nd-opinion has-patch => tooltips has-patch needs-
     testing needs-unit-tests


Comment:

 I've worked this up, modifying PR5676 to the point where I think it's a
 viable option. @rajinsharwar provided a great start, but there were some
 things to do to enhance accessibility and make it more flexible.

 I've updated the interaction model so that it matches the standards set by
 the US Design System:
 https://designsystem.digital.gov/components/tooltip/.

 I also increased the size of the default button so that it would meet WCAG
 2.5.8; the minimum size is now 26px x 26px, exceeding the minimum required
 of 24x24.

 To make the tool more useful, I added handlers so that it can be used
 declaratively by adding the class '.wp-tooltip-container' to an anchor or
 button wrapper and a `data-tooltip` attribute to the control. This will
 improve it's flexibility for use with existing code.

 For testing, use:


 {{{
 function test_tooltips() {
     if ( function_exists( 'add_tooltip' ) ) {
         echo '<div class="notice notice-info">';
         add_tooltip( 'Test Tooltip' );
         echo '<div class="wp-tooltip-container"><button type="button" id
 ="wp-tooltip-custom-trigger" data-tooltip="This is the content of the
 tooltip">Trigger</button></div>';
         echo '</div>';
     }
 }
 }}}

 The `add_tooltip()` call will test the simplest case usage of the new
 function; the printed code tests the declarative usage.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/51006#comment:52>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform