fix(segment, segment-button): use correct tablist and tab roles for screen readers (#23145)

* fix(segment, segment-button): change aria attributes for segment and segment-button

* add axe test

* Add tests, screen reader doc

* add updated screen reader

* fix(segment-button): move aria tags to host

* verify nvda and talkback behavior

* fix(segment-button): remove outline on focus

* Update core/src/components/segment/test/basic/index.html

Co-authored-by: Liam DeBeasi <liamdebeasi@icloud.com>

core/src/components/segment-button/segment-button.scss

@@ -166,6 +166,10 @@
   }
 }
 
+:host(:focus) {
+  outline: none;
+}
+
 // Segment Button: Hover
 // --------------------------------------------------
 

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 (
       <Host
+        role="tab"
+        aria-selected={checked ? 'true' : 'false'}
         aria-disabled={disabled ? 'true' : null}
+        tabIndex={tabIndex}
         class={{
           [mode]: true,
           'in-toolbar': hostContext('ion-toolbar', this.el),
@@ -113,7 +128,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
       >
         <button
           type={type}
-          aria-pressed={checked ? 'true' : 'false'}
+          tabIndex={-1}
           class="button-native"
           part="native"
           disabled={disabled}