Keyboard focusability for copy-to-clipboard icons. (dart-lang#7348)

isoos · Jan 4, 2024 · fc7d44d · fc7d44d
1 parent 7f7726e
commit fc7d44d
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 10 deletions.
diff --git a/app/test/frontend/static_files_test.dart b/app/test/frontend/static_files_test.dart
@@ -200,7 +200,7 @@ void main() {
     test('script.dart.js and parts size check', () {
       final file = cache.getFile('/static/js/script.dart.js');
       expect(file, isNotNull);
-      expect((file!.bytes.length / 1024).round(), closeTo(317, 1));
+      expect((file!.bytes.length / 1024).round(), closeTo(319, 1));
 
       final parts = cache.paths
           .where((path) =>

diff --git a/pkg/web_app/lib/src/hoverable.dart b/pkg/web_app/lib/src/hoverable.dart
@@ -66,10 +66,11 @@ void _setEventForPackageTitleCopyToClipboard() {
   final copyContent = icon.dataset['copy-content'];
   if (copyContent == null || copyContent.isEmpty) return;
 
-  icon.onClick.listen((_) async {
-    _copyToClipboard(copyContent);
-    await _animateCopyFeedback(feedback);
-  });
+  _setupCopyAndFeedbackButton(
+    copy: icon,
+    feedback: feedback,
+    textFn: () => copyContent,
+  );
 }
 
 Future<void> _animateCopyFeedback(Element feedback) async {
@@ -112,11 +113,35 @@ void _setEventForPreCodeCopyToClipboard() {
       ..text = 'copied to clipboard';
     container.append(feedback);
 
-    button.onClick.listen((_) async {
-      final text = pre.dataset['textToCopy']?.trim() ?? pre.text!.trim();
-      _copyToClipboard(text);
-      await _animateCopyFeedback(feedback);
-    });
+    _setupCopyAndFeedbackButton(
+      copy: button,
+      feedback: feedback,
+      textFn: () => pre.dataset['textToCopy']?.trim() ?? pre.text!.trim(),
+    );
+  });
+}
+
+void _setupCopyAndFeedbackButton({
+  required Element copy,
+  required Element feedback,
+  required String Function() textFn,
+}) {
+  copy.attributes['tabindex'] = '0';
+
+  Future<void> doCopy() async {
+    final text = textFn();
+    _copyToClipboard(text);
+    await _animateCopyFeedback(feedback);
+    // return focus to the icon
+    copy.focus();
+  }
+
+  copy.onClick.listen((_) => doCopy());
+  copy.onKeyDown.listen((event) async {
+    if (event.key == 'Enter') {
+      event.preventDefault();
+      await doCopy();
+    }
   });
 }
 

diff --git a/pkg/web_css/lib/src/_base.scss b/pkg/web_css/lib/src/_base.scss
@@ -206,6 +206,7 @@ pre {
     opacity: 0.15;
     transition: opacity 0.5s;
 
+    &:focus,
     &:hover {
       opacity: 1;
     }

diff --git a/pkg/web_css/lib/src/_pkg.scss b/pkg/web_css/lib/src/_pkg.scss
@@ -293,6 +293,7 @@
     opacity: 0.1;
     transition: opacity 0.3s;
 
+    &:focus,
     h1.title:hover & {
       opacity: 0.5;
     }