♿ [a11y-fixit][amp-social-share] Add custom CSS when focussed for amp…

…-social-share (#30775)

* Add custom focus css for social-share

* Add comment to test

* Add documentation example for overwritting focus CSS

extensions/amp-social-share/0.1/amp-social-share.css

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@import "../../../third_party/optimized-svg-icons/amp-social-share-svgs.css";
+@import '../../../third_party/optimized-svg-icons/amp-social-share-svgs.css';
 
 amp-social-share {
   background-repeat: no-repeat;
@@ -25,6 +25,11 @@ amp-social-share {
   position: relative;
 }
 
+amp-social-share:focus {
+  outline: #0389ff solid 2px;
+  outline-offset: 2px;
+}
+
 /**
  * Note: Attribute selectors were used initially here but we switched to using
  * class-based selector to style each type because of a bug on iOS Safari 8.
@@ -78,7 +83,7 @@ amp-social-share {
 
 /* SMS Styling */
 .amp-social-share-sms {
-  background-color: #CA2B63;
+  background-color: #ca2b63;
 }
 
 /* "system" styling */

extensions/amp-social-share/0.1/test/test-amp-social-share.js

@@ -17,6 +17,7 @@
 import '../amp-social-share';
 import {Keys} from '../../../../src/utils/key-codes';
 import {Services} from '../../../../src/services';
+import {tryFocus} from '../../../../src/dom';
 
 const STRINGS = {
   'text': 'Hello world',
@@ -383,6 +384,32 @@ describes.realWin(
       });
     });
 
+    it('uses custom CSS when element is focused', () => {
+      const share = doc.createElement('amp-social-share');
+
+      share.setAttribute('type', 'twitter');
+      share.setAttribute('width', 60);
+      share.setAttribute('height', 44);
+
+      doc.body.appendChild(share);
+
+      return loaded(share).then((el) => {
+        expect(win.getComputedStyle(el)['outline']).to.equal(
+          'rgb(0, 0, 0) none 0px'
+        );
+        expect(win.getComputedStyle(el)['outline-offset']).to.equal('0px');
+
+        tryFocus(el);
+        expect(doc.activeElement).to.equal(el);
+
+        // updated styles after focusing on element
+        expect(win.getComputedStyle(el)['outline']).to.equal(
+          'rgb(3, 137, 255) solid 2px'
+        );
+        expect(win.getComputedStyle(el)['outline-offset']).to.equal('2px');
+      });
+    });
+
     describe('[type=system]', () => {
       it('should not throw if navigator.share fails', async () => {
         Object.defineProperty(env.win, 'navigator', {

extensions/amp-social-share/amp-social-share.md

@@ -253,6 +253,34 @@ amp-social-share[type='twitter'] {
 
 When customizing the style of an `amp-social-share` icon please ensure that the customized icon meets the branding guidelines set out by the provider (e.g Twitter, Facebook, etc.)
 
+## Accessibility
+
+The `amp-social-share` element defaults to a blue outline as a visible focus indicator. It also defaults `tabindex=0` making it easy for a user to follow along as he or she tabs through multiple `amp-social-share` elements used together on a page.
+
+The default focus indicator is achieved with the following CSS rule-set.
+
+```css
+amp-social-share:focus {
+  outline: #0389ff solid 2px;
+  outline-offset: 2px;
+}
+```
+
+The default focus indicator can be overwritten by defining CSS styles for focus and including them within a `style` tag on an AMP HTML page. In the example below, the first CSS rule-set removes the focus indicator on all `amp-social-share` elements by setting the `outline` property to `none`. The second rule-set specifies a red outline (instead of the default blue) and also sets the `outline-offset` to be `3px` for all `amp-social-share` elements with the class `custom-focus`.
+
+```css
+amp-social-share:focus{
+  outline: none;
+}
+
+amp-social-share.custom-focus:focus {
+  outline: red solid 2px;
+  outline-offset: 3px;
+}
+```
+
+With these CSS rules, `amp-social-share` elements would not show the visible focus indicator unless they included the class `custom-focus` in which case they would have the red outlined indicator.
+
 ## Validation
 
 See [amp-social-share rules](https://github.com/ampproject/amphtml/blob/master/extensions/amp-social-share/validator-amp-social-share.protoascii) in the AMP validator specification.