diff --git a/core/package-lock.json b/core/package-lock.json index 9f5c5a82d5..62be248676 100644 --- a/core/package-lock.json +++ b/core/package-lock.json @@ -14,6 +14,7 @@ "tslib": "^2.1.0" }, "devDependencies": { + "@axe-core/puppeteer": "^4.1.1", "@jest/core": "^26.6.3", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", @@ -43,6 +44,21 @@ "typescript": "^4.0.5" } }, + "node_modules/@axe-core/puppeteer": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@axe-core/puppeteer/-/puppeteer-4.1.1.tgz", + "integrity": "sha512-Ao9N7HL//s26hdasx3Ba18tlJgxpoO+1SmIN6eSx5vC50dqYhiRU0xp6wBKWqzo10u1jpzl/s4RFsOAuolFMBA==", + "dev": true, + "dependencies": { + "axe-core": "^4.1.1" + }, + "engines": { + "node": ">=6.4.0" + }, + "peerDependencies": { + "puppeteer": ">=1.10.0 < 6" + } + }, "node_modules/@babel/code-frame": { "version": "7.10.1", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz", @@ -2029,6 +2045,15 @@ "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==", "dev": true }, + "node_modules/axe-core": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.1.4.tgz", + "integrity": "sha512-Pdgfv6iP0gNx9ejRGa3zE7Xgkj/iclXqLfe7BnatdZz0QnLZ3jrRHUVH8wNSdN68w05Sk3ShGTb3ydktMTooig==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/babel-plugin-istanbul": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz", @@ -13802,6 +13827,15 @@ } }, "dependencies": { + "@axe-core/puppeteer": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/@axe-core/puppeteer/-/puppeteer-4.1.1.tgz", + "integrity": "sha512-Ao9N7HL//s26hdasx3Ba18tlJgxpoO+1SmIN6eSx5vC50dqYhiRU0xp6wBKWqzo10u1jpzl/s4RFsOAuolFMBA==", + "dev": true, + "requires": { + "axe-core": "^4.1.1" + } + }, "@babel/code-frame": { "version": "7.10.1", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.1.tgz", @@ -15481,6 +15515,12 @@ "integrity": "sha512-zg7Hz2k5lI8kb7U32998pRRFin7zJlkfezGJjUc2heaD4Pw2wObakCDVzkKztTm/Ln7eiVvYsjqak0Ed4LkMDA==", "dev": true }, + "axe-core": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.1.4.tgz", + "integrity": "sha512-Pdgfv6iP0gNx9ejRGa3zE7Xgkj/iclXqLfe7BnatdZz0QnLZ3jrRHUVH8wNSdN68w05Sk3ShGTb3ydktMTooig==", + "dev": true + }, "babel-plugin-istanbul": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz", diff --git a/core/package.json b/core/package.json index 94fa265a07..61d18545f2 100644 --- a/core/package.json +++ b/core/package.json @@ -36,6 +36,7 @@ "tslib": "^2.1.0" }, "devDependencies": { + "@axe-core/puppeteer": "^4.1.1", "@jest/core": "^26.6.3", "@rollup/plugin-node-resolve": "^8.4.0", "@rollup/plugin-virtual": "^2.0.3", diff --git a/core/src/components/segment-button/segment-button.scss b/core/src/components/segment-button/segment-button.scss index 2c6d1a1ef2..7342a9337a 100644 --- a/core/src/components/segment-button/segment-button.scss +++ b/core/src/components/segment-button/segment-button.scss @@ -166,6 +166,10 @@ } } +:host(:focus) { + outline: none; +} + // Segment Button: Hover // -------------------------------------------------- diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index a030f0c3d9..92468d0977 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -86,13 +86,28 @@ export class SegmentButton implements ComponentInterface, ButtonInterface { } } + private get tabIndex() { + if (this.disabled) { return -1; } + + const hasTabIndex = this.el.hasAttribute('tabindex'); + + if (hasTabIndex) { + return this.el.getAttribute('tabindex'); + } + + return 0; + } + render() { - const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl } = this; + const { checked, type, disabled, hasIcon, hasLabel, layout, segmentEl, tabIndex } = this; const mode = getIonMode(this); const hasSegmentColor = () => segmentEl !== null && segmentEl.color !== undefined; return (