diff --git a/app/assets/stylesheets/components/dropdowns.scss b/app/assets/stylesheets/components/dropdowns.scss
index 6293a3f0a..fb4c6435a 100644
--- a/app/assets/stylesheets/components/dropdowns.scss
+++ b/app/assets/stylesheets/components/dropdowns.scss
@@ -17,4 +17,16 @@
max-width: 360px;
width: max-content;
}
+
+ &.side-bar {
+ bottom: 100%;
+ font-size: var(--fs-base);
+ padding: var(--su-1);
+ right: var(--su-1);
+ @media (min-width: $breakpoint-m) {
+ right: auto;
+ bottom: auto;
+ top: 0;
+ }
+ }
}
diff --git a/app/javascript/packs/articlePage.jsx b/app/javascript/packs/articlePage.jsx
index 05da2119a..c6566e81a 100644
--- a/app/javascript/packs/articlePage.jsx
+++ b/app/javascript/packs/articlePage.jsx
@@ -50,8 +50,8 @@ if (shareDropdownButton.dataset.initialized !== 'true') {
.querySelectorAll('#article-show-more-dropdown [href]')
.forEach((link) => {
link.addEventListener('click', (event) => {
- closeDropdown(event)
-
+ closeDropdown(event);
+
// Temporary Ahoy Stats for usage reports
ahoy.track('Post Dropdown', { option: event.target.text.trim() });
});
@@ -63,25 +63,19 @@ if (shareDropdownButton.dataset.initialized !== 'true') {
// Initialize the copy to clipboard functionality
function showAnnouncer() {
- const { activeElement } = document;
- const input =
- activeElement.localName === 'clipboard-copy'
- ? activeElement.querySelector('input')
- : document.getElementById('article-copy-link-input');
- input.focus();
- input.setSelectionRange(0, input.value.length);
-
document.getElementById('article-copy-link-announcer').hidden = false;
}
function copyArticleLink() {
- const inputValue = document.getElementById('article-copy-link-input').value;
- Runtime.copyToClipboard(inputValue).then(() => {
+ const postUrlValue = document
+ .getElementById('copy-post-url-button')
+ .getAttribute('data-postUrl');
+ Runtime.copyToClipboard(postUrlValue).then(() => {
showAnnouncer();
});
}
document
- .querySelector('clipboard-copy')
+ .getElementById('copy-post-url-button')
?.addEventListener('click', copyArticleLink);
// Comment Subscription
diff --git a/app/views/articles/_actions.html.erb b/app/views/articles/_actions.html.erb
index 11b4a76f2..7fc383129 100644
--- a/app/views/articles/_actions.html.erb
+++ b/app/views/articles/_actions.html.erb
@@ -32,47 +32,51 @@
-
-
-
-
- <%= inline_svg_tag("copy.svg", aria: true, id: "article-copy-icon", class: "crayons-icon mx-2 shrink-0", title: "Copy article link to the clipboard") %>
-
- Copied to Clipboard
-
+
+
+
+
+
Copied to Clipboard
+
diff --git a/cypress/integration/articleFlows/postSidebarActions.spec.js b/cypress/integration/articleFlows/postSidebarActions.spec.js
index 7036fb286..1ee918a18 100644
--- a/cypress/integration/articleFlows/postSidebarActions.spec.js
+++ b/cypress/integration/articleFlows/postSidebarActions.spec.js
@@ -19,19 +19,16 @@ describe('Post sidebar actions', () => {
it('should open and close the share menu for the post', () => {
// Check dropdown is closed by asserting the first option isn't visible
- cy.findByRole('img', {
- name: /^Copy article link to the clipboard$/i,
- }).should('not.exist');
+ cy.findByRole('button', { name: /^Copy Post URL$/i }).should('not.exist');
cy.findByRole('button', { name: /^Share post options$/i }).as(
'dropdownButton',
);
cy.get('@dropdownButton').click();
-
- cy.findByLabelText('Post URL').should('have.focus');
- cy.findByRole('img', {
- name: /^Copy article link to the clipboard$/i,
- });
+ cy.findByRole('button', { name: /^Copy Post URL$/i }).as(
+ 'copyPostUrlButton',
+ );
+ cy.get('@copyPostUrlButton').should('have.focus');
cy.findByRole('link', { name: /^Share to Twitter$/i });
cy.findByRole('link', { name: /^Share to LinkedIn$/i });
cy.findByRole('link', { name: /^Share to Reddit$/i });
@@ -46,9 +43,7 @@ describe('Post sidebar actions', () => {
cy.get('@dropdownButton').click();
// Check dropdown is closed by asserting the first option isn't visible
- cy.findByRole('img', {
- name: /^Copy article link to the clipboard$/i,
- }).should('not.exist');
+ cy.get('@copyPostUrlButton').should('not.be.visible');
});
it('should close the options dropdown on Escape press, returning focus', () => {
@@ -56,10 +51,12 @@ describe('Post sidebar actions', () => {
'dropdownButton',
);
cy.get('@dropdownButton').click();
-
- cy.findByLabelText('Post URL').should('have.focus');
+ cy.findByRole('button', { name: /^Copy Post URL$/i }).as(
+ 'copyPostUrlButton',
+ );
+ cy.get('@copyPostUrlButton').should('have.focus');
cy.get('body').type('{esc}');
- cy.findByLabelText('Post URL').should('not.be.visible');
+ cy.get('@copyPostUrlButton').should('not.be.visible');
cy.get('@dropdownButton').should('have.focus');
});
@@ -68,11 +65,11 @@ describe('Post sidebar actions', () => {
'dropdownButton',
);
cy.get('@dropdownButton').click();
-
+ cy.findByRole('button', { name: /^Copy Post URL$/i }).as(
+ 'copyPostUrlButton',
+ );
cy.findByText('Copied to Clipboard').should('not.be.visible');
- cy.findByRole('img', {
- name: /^Copy article link to the clipboard$/i,
- }).click();
+ cy.get('@copyPostUrlButton').click();
cy.findByText('Copied to Clipboard').should('be.visible');
// Close the dropdown, and reopen it to check the message has disappeared