diff --git a/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md b/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md index 2967c5d59..2f77fff56 100644 --- a/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md +++ b/ARIA/apg/about/coverage-and-quality/coverage-and-quality-report.md @@ -69,7 +69,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
-

Page last updated: August 12, 2025

+

Page last updated: September 16, 2025

About These Reports

@@ -108,8 +108,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

  • Roles with no Guidance or Examples (28)
  • Roles with at Least One Guidance or Example (12)
  • Roles with More than One Guidance or Example (38)
    • -
  • Properties and States with no Examples (12)
    • -
  • Properties and States with One Examples (8)
    • +
  • Properties and States with no Examples (10)
    • +
  • Properties and States with One Examples (10)
  • Properties and States with More than One Example (28)
  • Example Coding Practices
    • @@ -420,7 +420,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Listbox with Grouped Options
  • Editor Menubar (HC)
  • Color Viewer Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
  • Switch Using HTML Button (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • @@ -575,6 +575,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Note
  • Note
  • Note
    • +
  • Note
  • Note
    • @@ -680,7 +681,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); Spinbutton Pattern @@ -779,15 +781,13 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
    -

    Properties and States with No Guidance or Examples (12)

    +

    Properties and States with No Guidance or Examples (10)

    NOTE: The HC abbreviation means example has High Contrast support.
    -

    Properties and States with at Least One Guidance or Example (8)

    +

    Properties and States with at Least One Guidance or Example (10)

    NOTE: The HC abbreviation means example has High Contrast support.
    @@ -833,6 +833,18 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); + + + + + + + + + + @@ -952,6 +964,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Actions Menu Button Using aria-activedescendant (HC)
  • Actions Menu Button Using element.focus() (HC)
  • Navigation Menu Button (HC)
    • +
  • Quantity Spin Button
  • Experimental Tabs with Action Buttons (HC)
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
    • @@ -991,6 +1004,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); @@ -1055,7 +1069,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
    • +
  • Quantity Spin Button
  • Switch Using HTML Button (HC)
  • Switch Using HTML Checkbox Input (HC)
  • Switch (HC)
    • @@ -1082,7 +1097,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Navigation Menubar (HC)
  • Rating Radio Group (HC)
  • Horizontal Multi-Thumb Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
  • Table
  • Toolbar
  • Treegrid Email Inbox
    • @@ -1122,7 +1137,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
  • Switch Using HTML Button (HC)
  • Experimental Tabs with Action Buttons (HC)
  • Tabs with Automatic Activation (HC)
    • @@ -1275,7 +1290,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
    • +
  • Quantity Spin Button
  • Toolbar
    • @@ -1290,7 +1306,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
    • +
  • Quantity Spin Button
  • Toolbar
    • @@ -1306,7 +1323,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
    • +
  • Quantity Spin Button
  • Toolbar
    • @@ -1319,7 +1337,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
  • Toolbar
    • @@ -1335,7 +1353,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - + @@ -1347,7 +1365,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - + @@ -1364,7 +1382,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - + @@ -2011,7 +2029,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - + @@ -2023,6 +2041,19 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); + + + + + + + + + + + + + @@ -2509,13 +2540,21 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); - + + + + + + + + + diff --git a/ARIA/apg/index/index.md b/ARIA/apg/index/index.md index aa4ff463c..d24e8f300 100644 --- a/ARIA/apg/index/index.md +++ b/ARIA/apg/index/index.md @@ -214,7 +214,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Listbox with Grouped Options
  • Editor Menubar (HC)
  • Color Viewer Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
  • Switch Using HTML Button (HC)
  • File Directory Treeview Using Computed Properties
  • File Directory Treeview Using Declared Properties
    • @@ -409,7 +409,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); @@ -583,6 +584,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Actions Menu Button Using aria-activedescendant (HC)
  • Actions Menu Button Using element.focus() (HC)
  • Navigation Menu Button (HC)
    • +
  • Quantity Spin Button
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
  • Toolbar
    • @@ -620,10 +622,15 @@ if (enableSidebar) document.body.classList.add('has-sidebar'); + + + + + + + + @@ -923,7 +936,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
    • +
  • Quantity Spin Button
  • Toolbar
    • @@ -938,7 +952,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
    • +
  • Quantity Spin Button
  • Toolbar
    • @@ -950,7 +965,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
  • Toolbar
    • diff --git a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md index 9b3ddc07b..9cf5a7d65 100644 --- a/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md +++ b/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons.md @@ -1,6 +1,6 @@ --- # This file was generated by scripts/pre-build/library/formatForJekyll.js -title: "Date Picker Spin Button Example" +title: "(Deprecated) Date Picker Spin Button Example" ref: /ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/ github: @@ -12,7 +12,7 @@ permalink: /ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/ sidebar: true -footer: "

    View issues related to this example

    Page last updated: 12 August 2025

    " +footer: "

    View issues related to this example

    Page last updated: 8 September 2025

    " # Context here: https://github.com/w3c/wai-aria-practices/issues/31 type_of_guidance: APG @@ -21,7 +21,7 @@ lang: en --- -Date Picker Spin Button Example +(Deprecated) Date Picker Spin Button Example @@ -99,6 +99,13 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

    About This Example

    +
    +

    Deprecation Warning

    +

    + This pattern has been deprecated, and will be removed in a future version of the ARIA Authoring Practices. + The Quantity Spin Button should be used as an alternative to this pattern. +

    +

    The following example uses the Spin Button Pattern to implement a date picker. diff --git a/ARIA/apg/patterns/spinbutton/examples/quantity-spinbutton.md b/ARIA/apg/patterns/spinbutton/examples/quantity-spinbutton.md new file mode 100644 index 000000000..f89f9570e --- /dev/null +++ b/ARIA/apg/patterns/spinbutton/examples/quantity-spinbutton.md @@ -0,0 +1,518 @@ +--- +# This file was generated by scripts/pre-build/library/formatForJekyll.js +title: "Quantity Spin Button Example" +ref: /ARIA/apg/patterns/spinbutton/examples/quantity-spinbutton/ + +github: + repository: w3c/aria-practices + branch: main + path: content/patterns/spinbutton/examples/quantity-spinbutton.html +feedbackmail: public-aria-practices@w3.org +permalink: /ARIA/apg/patterns/spinbutton/examples/quantity-spinbutton/ + +sidebar: true + +footer: "

    View issues related to this example

    Page last updated: 16 September 2025

    " + +# Context here: https://github.com/w3c/wai-aria-practices/issues/31 +type_of_guidance: APG + +lang: en +--- + + +Quantity Spin Button Example + + + + + + + + + + + + + + + + + + +
    + +

    Read This First

    +
    + + The code in this example is not intended for production environments. + Before using it for any purpose, read this to understand why. + +

    This is an illustrative example of one way of using ARIA that conforms with the ARIA specification.

    + +
    + + +
    + + +
    +

    About This Example

    + +

    + The following example uses the Spin Button Pattern to implement three quantity inputs. +

    +

    Similar examples include:

    +
      +
    • Toolbar Example: A toolbar that contains a spin button for setting font size.
      • +
    +
    + +
    +
    +

    Example

    +
    + +
    +
    +
    + Guests + +
    +
    +
    + +
    + +
    +

    Accessibility Features

    +
      +
    • + The element with role spinbutton allows text input, for + users who prefer to enter a value directly. +
      • +
    • + The spin button input and its adjacent buttons are visually + presented as a single form field containing an editable value, an + increment button, and a + decrement button. +
      • +
    • + When either the spin button input or its adjacent buttons have + received focus, a single visual focus indicator encompasses all + three, reinforcing the relationship between them. +
      • +
    • + For users who have not set a preference for reduced motion, the + focus indicator appears with subtle animation to draw attention. +
      • +
    • + The increment and decrement buttons: +
        +
      • + Are generously sized for ease of use. +
        • +
      • + Are adjacent to the spin button input so they can be accessed by + users of touch-based and voice-based assistive technologies. +
        • +
      • + Are labeled with the title attribute, providing a + human-friendly representation of the plus and minus characters + for users of touch-based and voice-based assistive technologies. The + title attribute also presents a tooltip on hover, + clarifying the meaning of each button’s icon. +
        • +
      • + Use an invisible live region to announce the updated value + when pressed. The live region empties its contents after 3 + seconds to avoid leaving stale content in the document. +
        • +
      • + Are excluded from the page Tab sequence with + tabindex="-1" because they are redundant with the + arrow key support provided to keyboard users. +
        • +
      • + Can be activated with voice control by speaking a command such + as Click add adult. +
        • +
      +
      • +
    • + When forced colors are enabled, system + color keywords are used to ensure visibility and sufficient + contrast for the spin button’s content and interactive states. +
      • +
    • + Each spin button’s minimum and maximum values are programmatically + defined with aria-valuemin and + aria-valuemax, enabling assistive technologies to + convey that information to users in a predictable manner. +
      • +
    • + The minimum and maximum values are also visually expressed with + adjacent help text, but is purposefully not associated using + aria-describedby since the same information is already + programmatically defined. +
      • +
    • + When a user inputs an invalid value: +
        +
      • + The spin button is visually styled to indicate an error state. +
        • +
      • + aria-invalid="true" is added to the input to inform + assistive technologies of the invalid state. +
        • +
      • + An error message is displayed and associated with + the input using aria-errormessage. +
        • +
      +
      • +
    +
    + +
    +

    Keyboard Support

    +

    The spin buttons provide the following keyboard support described in the Spin Button Pattern.

    +
    aria-errormessageQuantity Spin Button +
    aria-invalidQuantity Spin Button +
    aria-multiselectable
    Total Examples6263
    High Contrast Documentation
    Uses forced-colors media query34
    Uses currentColor value
    Use Class3738
    Use Prototype
    Date Picker Spin Button(Deprecated) Date Picker Spin Button prototype Yes 7
    Quantity Spin Buttonclassexample1188
    Switch Using HTML Button classYes
    Date Picker Spin Button(Deprecated) Date Picker Spin Button Yes Yes
    Quantity Spin ButtonYes
    Switch Using HTML Button Yes spinbutton
    aria-errormessageQuantity Spin Button
    aria-expanded @@ -684,7 +691,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
    • +
  • Quantity Spin Button
  • Switch Using HTML Button (HC)
  • Switch Using HTML Checkbox Input (HC)
  • Switch (HC)
    • @@ -693,6 +701,10 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
    aria-invalidQuantity Spin Button
    aria-label @@ -710,7 +722,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Navigation Menubar (HC)
  • Rating Radio Group (HC)
  • Horizontal Multi-Thumb Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
  • Table
  • Toolbar
  • Treegrid Email Inbox
    • @@ -749,7 +761,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
  • Switch Using HTML Button (HC)
  • Tabs with Automatic Activation (HC)
  • Tabs with Manual Activation (HC)
    • @@ -908,7 +920,8 @@ if (enableSidebar) document.body.classList.add('has-sidebar');
  • Rating Slider (HC)
  • Media Seek Slider (HC)
  • Vertical Temperature Slider (HC)
    • -
  • Date Picker Spin Button
    • +
  • (Deprecated) Date Picker Spin Button
    • +
  • Quantity Spin Button
  • Toolbar
    		•
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    KeyFunction
    Down ArrowDecreases value by 1.
    Up ArrowIncreases value by 1.
    HomeDecreases to minimum value.
    EndIncreases to maximum value.
    Standard single line text editing keys +
      +
    • Keys used for cursor movement and text manipulation, such as Delete and Shift + Right Arrow.
      • +
    • An HTML input with type="text" is used for the spin button so the browser will provide platform-specific editing keys.
      • +
    +
    +
    + +
    +

    Role, Property, State, and Tabindex Attributes

    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    RoleAttributeElementUsage
    spinbuttoninput[type="text"]Identifies the input[type="text"] element as a spin button.
    aria-valuenow="NUMBER"input[type="text"] +
      +
    • Indicates the current numeric value of the spin button.
      • +
    • Updated by JavaScript as users change the value of the spin button.
      • +
    +
    aria-valuemin="NUMBER"input[type="text"]Indicates the minimum allowed value for the spin button.
    aria-valuemax="NUMBER"input[type="text"]Indicates the maximum allowed value for the spin button.
    aria-invalid="true"input[type="text"]Indicates that the current value is invalid.
    aria-errormessage="ID_REF"input[type="text"]Identifies the element that provides an error message for the spin button.
    title="NAME_STRING"buttonDefines the accessible name for each increment and decrement button (Remove adult, Add adult, Remove kid, Add kid, Remove animal, and Add animal).
    + aria-controls="ID_REF" + buttonIdentifies the element whose value will be modified when the button is activated.
    tabindex="-1"buttonRemoves the increment and decrement buttons from the page Tab sequence while keeping them focusable so they can be accessed with touch-based and voice-based assistive technologies.
    aria-disabled="true"buttonSet when the minimum or maximum value has been reached to inform assistive technologies that the button has been disabled.
    aria-hidden="true"spanFor assistive technology users, hides the visible minus and plus characters in the increment and decrement buttons since they are symbolic of the superior button labels provided by the title attribute.
    output +
      +
    • An element with an implicit role of status and an implicit aria-live value of polite.
      • +
    • Triggers a screen reader announcement of the output element’s updated content at the next graceful opportunity.
      • +
    • When either the increment or decrement button is pressed, the current value of the spin button is injected into the output element.
      • +
    • Its contents are emptied 2000 milliseconds after injection.
      • +
    +
    +
    + +
    +

    JavaScript and CSS Source Code

    + +
    + +
    +

    HTML Source Code

    +

    To copy the following HTML code, please open it in CodePen.

    + +
    + + +
    +
    + + + + diff --git a/ARIA/apg/patterns/spinbutton/spinbutton-pattern.md b/ARIA/apg/patterns/spinbutton/spinbutton-pattern.md index 836aebcce..dc1e42bb4 100644 --- a/ARIA/apg/patterns/spinbutton/spinbutton-pattern.md +++ b/ARIA/apg/patterns/spinbutton/spinbutton-pattern.md @@ -79,7 +79,7 @@ if (enableSidebar) document.body.classList.add('has-sidebar');

    Example

    -

    Date Picker Spin Button Example: Illustrates a date picker made from three spin buttons for day, month, and year.

    +

    Quantity Spin Button Example: A set of three spin buttons to collect the quantities of adults, children, and animals for a hotel reservation.

    diff --git a/_external/aria-practices b/_external/aria-practices index 219f52615..67f73a138 160000 --- a/_external/aria-practices +++ b/_external/aria-practices @@ -1 +1 @@ -Subproject commit 219f52615d93e94787420af37be029a3d40ccd7d +Subproject commit 67f73a138e9a9f5fedcf2e6d99ebcfe4f814e561 diff --git a/content-assets/wai-aria-practices/about/coverage-and-quality/prop-coverage.csv b/content-assets/wai-aria-practices/about/coverage-and-quality/prop-coverage.csv index 64c42b359..64f66b6c9 100644 --- a/content-assets/wai-aria-practices/about/coverage-and-quality/prop-coverage.csv +++ b/content-assets/wai-aria-practices/about/coverage-and-quality/prop-coverage.csv @@ -7,22 +7,22 @@ "aria-colcount","1","1","Guidance: Using aria-colcount and aria-colindex","Example: Data Grid" "aria-colindex","3","1","Guidance: Using aria-colcount and aria-colindex","Guidance: Using aria-colindex When Column Indices Are Contiguous","Guidance: Using aria-colindex When Column Indices Are Not Contiguous","Example: Data Grid" "aria-colspan","1","0","Guidance: Defining cell spans using aria-colspan and aria-rowspan" -"aria-controls","0","22","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" +"aria-controls","0","23","Example: Accordion","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Checkbox (Mixed-State)","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Quantity Spin Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: Toolbar" "aria-current","0","5","Example: Breadcrumb","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: Navigation Menubar","Example: Navigation Treeview" "aria-describedby","1","6","Guidance: Describing by referencing content with aria-describedby","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Table" "aria-details","0","0" -"aria-disabled","0","3","Example: Alert Dialog","Example: Editor Menubar","Example: Toolbar" +"aria-disabled","0","4","Example: Alert Dialog","Example: Editor Menubar","Example: Quantity Spin Button","Example: Toolbar" "aria-dropeffect","0","0" -"aria-errormessage","0","0" +"aria-errormessage","0","1","Example: Quantity Spin Button" "aria-expanded","0","23","Example: Accordion","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Disclosure (Show/Hide) Card","Example: Disclosure (Show/Hide) for Answers to Frequently Asked Questions","Example: Disclosure (Show/Hide) for Image Description","Example: Disclosure Navigation Menu with Top-Level Links","Example: Disclosure Navigation Menu","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" "aria-flowto","0","0" "aria-grabbed","0","0" "aria-haspopup","0","9","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Editor Menubar","Example: Navigation Menubar","Example: Toolbar" -"aria-hidden","0","16","Example: Button (IDL Version)","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar" -"aria-invalid","0","0" +"aria-hidden","0","17","Example: Button (IDL Version)","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Editor Menubar","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: (Deprecated) Date Picker Spin Button","Example: Quantity Spin Button","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch","Example: Sortable Table","Example: Toolbar" +"aria-invalid","0","1","Example: Quantity Spin Button" "aria-keyshortcuts","0","0" -"aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" -"aria-labelledby","1","41","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" +"aria-label","1","18","Guidance: Naming with a String Attribute Via aria-label","Example: Breadcrumb","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Link","Example: Editor Menubar","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: (Deprecated) Date Picker Spin Button","Example: Table","Example: Toolbar","Example: Treegrid Email Inbox","Example: Navigation Treeview" +"aria-labelledby","1","41","Guidance: Naming with Referenced Content Via aria-labelledby","Example: Accordion","Example: Alert Dialog","Example: Checkbox (Two State)","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Modal Dialog","Example: Infinite Scrolling Feed","Example: Data Grid","Example: Layout Grid","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Actions Menu Button Using aria-activedescendant","Example: Actions Menu Button Using element.focus()","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Meter","Example: Radio Group Using aria-activedescendant","Example: Rating Radio Group","Example: Radio Group Using Roving tabindex","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: (Deprecated) Date Picker Spin Button","Example: Switch Using HTML Button","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview","Example: Complementary Landmark","Example: Form Landmark","Example: Main Landmark","Example: Navigation Landmark","Example: Region Landmark","Example: Search Landmark" "aria-level","0","2","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-live","0","5","Example: Alert","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Date Picker Combobox","Example: Date Picker Dialog" "aria-modal","0","4","Example: Alert Dialog","Example: Date Picker Combobox","Example: Date Picker Dialog","Example: Modal Dialog" @@ -43,7 +43,7 @@ "aria-selected","0","17","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Date Picker Combobox","Example: Select-Only Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties" "aria-setsize","0","3","Example: Infinite Scrolling Feed","Example: Treegrid Email Inbox","Example: File Directory Treeview Using Declared Properties" "aria-sort","1","2","Guidance: Indicating sort order with aria-sort","Example: Data Grid","Example: Sortable Table" -"aria-valuemax","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" -"aria-valuemin","0","8","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" -"aria-valuenow","1","8","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" -"aria-valuetext","1","5","Guidance: Using aria-valuetext","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Date Picker Spin Button","Example: Toolbar" +"aria-valuemax","1","9","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: (Deprecated) Date Picker Spin Button","Example: Quantity Spin Button","Example: Toolbar" +"aria-valuemin","0","9","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: (Deprecated) Date Picker Spin Button","Example: Quantity Spin Button","Example: Toolbar" +"aria-valuenow","1","9","Guidance: Using aria-valuemin, aria-valuemax and aria-valuenow","Example: Meter","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: (Deprecated) Date Picker Spin Button","Example: Quantity Spin Button","Example: Toolbar" +"aria-valuetext","1","5","Guidance: Using aria-valuetext","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: (Deprecated) Date Picker Spin Button","Example: Toolbar" diff --git a/content-assets/wai-aria-practices/about/coverage-and-quality/role-coverage.csv b/content-assets/wai-aria-practices/about/coverage-and-quality/role-coverage.csv index e760c3cb2..c9c7ed7d2 100644 --- a/content-assets/wai-aria-practices/about/coverage-and-quality/role-coverage.csv +++ b/content-assets/wai-aria-practices/about/coverage-and-quality/role-coverage.csv @@ -25,7 +25,7 @@ "generic","0","0" "grid","3","5","Guidance: Grid Popup Keyboard Interaction","Guidance: Grid (Interactive Tabular Data and Layout Containers) Pattern","Guidance: Grid and Table Properties","Example: Date Picker Combobox","Example: Editable Combobox with Grid Popup","Example: Date Picker Dialog","Example: Data Grid","Example: Layout Grid" "gridcell","0","3","Example: Editable Combobox with Grid Popup","Example: Layout Grid","Example: Treegrid Email Inbox" -"group","2","10","Guidance: Radio Group Pattern","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" +"group","2","10","Guidance: Radio Group Pattern","Guidance: For Radio Group Contained in a Toolbar","Example: Auto-Rotating Image Carousel with Buttons for Slide Control","Example: Checkbox (Two State)","Example: Listbox with Grouped Options","Example: Editor Menubar","Example: Color Viewer Slider","Example: (Deprecated) Date Picker Spin Button","Example: Switch Using HTML Button","Example: File Directory Treeview Using Computed Properties","Example: File Directory Treeview Using Declared Properties","Example: Navigation Treeview" "heading","0","0" "img","0","0" "input","0","0" @@ -46,7 +46,7 @@ "meter","2","1","Guidance: Meter Pattern","Guidance: Range properties with meter","Example: Meter" "navigation","5","3","Guidance: Fundamental Keyboard Navigation Conventions","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Guidance: Keyboard Navigation Inside Components","Guidance: Ensure Basic Access Via Navigation","Guidance: Navigation","Example: Navigation Menubar","Example: Navigation Treeview","Example: Navigation Landmark" "none","0","7","Example: Navigation Menu Button","Example: Navigation Menubar","Example: Rating Radio Group","Example: Horizontal Multi-Thumb Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider","Example: Navigation Treeview" -"note","37","0","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note" +"note","38","0","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note","Guidance: Note" "option","0","8","Example: Editable Combobox With Both List and Inline Autocomplete","Example: Editable Combobox With List Autocomplete","Example: Editable Combobox without Autocomplete","Example: Select-Only Combobox","Example: (Deprecated) Collapsible Dropdown Listbox","Example: Listbox with Grouped Options","Example: Listboxes with Rearrangeable Options","Example: Scrollable Listbox" "paragraph","0","0" "presentation","5","0","Guidance: Hiding Semantics with the presentation Role","Guidance: Common Uses of Role presentation","Guidance: Effects of Role presentation","Guidance: Conditions That Cause Role presentation to be Ignored","Guidance: Example Demonstrating Effects of the presentation Role" @@ -62,7 +62,7 @@ "searchbox","0","0" "separator","0","1","Example: Editor Menubar" "slider","2","5","Guidance: Slider (Multi-Thumb) Pattern","Guidance: Slider Pattern","Example: Horizontal Multi-Thumb Slider","Example: Color Viewer Slider","Example: Rating Slider","Example: Media Seek Slider","Example: Vertical Temperature Slider" -"spinbutton","1","2","Guidance: Spinbutton Pattern","Example: Date Picker Spin Button","Example: Toolbar" +"spinbutton","1","3","Guidance: Spinbutton Pattern","Example: (Deprecated) Date Picker Spin Button","Example: Quantity Spin Button","Example: Toolbar" "status","0","0" "switch","1","3","Guidance: Switch Pattern","Example: Switch Using HTML Button","Example: Switch Using HTML Checkbox Input","Example: Switch" "tab","1","4","Guidance: Keyboard Navigation Between Components (The Tab Sequence)","Example: Auto-Rotating Image Carousel with Tabs for Slide Control","Example: Experimental Tabs with Action Buttons","Example: Tabs with Automatic Activation","Example: Tabs with Manual Activation" diff --git a/content-assets/wai-aria-practices/patterns/spinbutton/examples/css/quantity-spinbutton.css b/content-assets/wai-aria-practices/patterns/spinbutton/examples/css/quantity-spinbutton.css new file mode 100644 index 000000000..f5aa0388e --- /dev/null +++ b/content-assets/wai-aria-practices/patterns/spinbutton/examples/css/quantity-spinbutton.css @@ -0,0 +1,161 @@ +.spinners { + --length-s: 0.25rem; + --length-m: 0.5rem; + --color-field-background: white; + --color-button-background-idle: color-mix(in srgb, ghostwhite, darkblue 10%); + --color-button-background-hover: color-mix(in srgb, ghostwhite, darkblue 20%); + --color-interactive-focus: var(--wai-green, #005a6a); + --transition-duration-snappy: 0; + --transition-duration-leisurely: 0; + + @media (prefers-reduced-motion: no-preference) and (forced-colors: none) { + --transition-duration-snappy: 0.15s; + --transition-duration-leisurely: 0.5s; + } + + @media (forced-colors: active) { + --color-interactive-focus: Highlight; + } + + display: inline-flex; + font-family: system-ui, sans-serif; + line-height: 1.4; + padding: 1rem; + background-color: color-mix(in srgb, ghostwhite, darkblue 1%); + border: 1px solid color-mix(in srgb, ghostwhite, darkblue 10%); + border-radius: 0.5rem; + + *, + *::before, + *::after { + box-sizing: border-box; + margin: 0; + padding: 0; + } + + .visually-hidden { + border: 0; + clip: rect(0 0 0 0); + height: auto; + margin: 0; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; + white-space: nowrap; + } + + fieldset { + padding: 0.5rem; + border: 1px solid transparent; + } + + legend { + font-size: 1.2rem; + font-weight: bold; + margin-block-end: 1rem; + } + + .spinner-fields { + display: flex; + flex-wrap: wrap; + gap: 2ch; + } + + .spinner-field { + display: flex; + flex-direction: column; + align-items: start; + gap: 0.5rem; + + label { + font-size: 1.2rem; + } + + small { + font-size: 1rem; + } + + [id^="error"] { + color: crimson; + } + + [id^="error"], + &:has([aria-invalid="true"]) [id^="help"] { + display: none; + } + + &:has([aria-invalid="true"]) [id^="error"] { + display: block; + } + } + + .spinner { + display: flex; + flex-wrap: wrap; + gap: 0; + max-inline-size: calc(100vw - 6.4rem); + font-size: 1.4rem; + border: 1px solid color-mix(in srgb, ghostwhite, darkblue 60%); + border-radius: 0.25rem; + padding: 0.125em; + background-color: var(--color-field-background); + outline: 0 solid transparent; + outline-offset: 0; + transition: + outline-offset var(--transition-duration-snappy) ease, + outline-width var(--transition-duration-snappy) ease, + outline-color var(--transition-duration-snappy) ease, + border-color var(--transition-duration-snappy) ease; + + &:focus-within { + outline: var(--length-s) solid var(--color-interactive-focus); + outline-offset: var(--length-s); + } + + &:has([aria-invalid="true"]) { + border-color: crimson; + } + + input, + button { + appearance: none; + font: inherit; + font-weight: bold; + color: inherit; + border: none; + background: transparent; + padding: 0.25em 0.5em; + margin: 0; + outline: none; + border-radius: 0; + } + + [role="spinbutton"] { + text-align: center; + min-inline-size: 6ch; + font-variant-numeric: tabular-nums; + + &, + &:hover, + &:focus { + border: none; + } + } + + button { + min-inline-size: 3ch; + background-color: var(--color-button-background-idle); + + &:hover { + background-color: var(--color-button-background-hover); + } + + &[aria-disabled="true"] { + opacity: 0.25; + background-color: transparent; + cursor: not-allowed; + } + } + } +} diff --git a/content-assets/wai-aria-practices/patterns/spinbutton/examples/js/quantity-spinbutton.js b/content-assets/wai-aria-practices/patterns/spinbutton/examples/js/quantity-spinbutton.js new file mode 100644 index 000000000..5a1013d16 --- /dev/null +++ b/content-assets/wai-aria-practices/patterns/spinbutton/examples/js/quantity-spinbutton.js @@ -0,0 +1,141 @@ +/* + * This content is licensed according to the W3C Software License at + * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document + * + * File: quantity-spinbutton.js + */ + +'use strict'; + +class SpinButton { + constructor(el) { + this.el = el; + this.id = el.id; + this.controls = Array.from( + document.querySelectorAll(`button[aria-controls="${this.id}"]`) + ); + this.output = document.querySelector(`output[for="${this.id}"]`); + this.timer = null; + this.setBounds(); + el.addEventListener('input', () => this.setValue(el.value, true)); + el.addEventListener('blur', () => { + if (el.value === '' && this.hasMin) { + this.setValue(this.min, true); + } + }); + el.addEventListener('keydown', (e) => this.handleKey(e)); + this.controls.forEach((btn) => + btn.addEventListener('click', () => this.handleClick(btn)) + ); + this.setValue(el.value); + } + + clamp(n) { + return Math.min(Math.max(n, this.min), this.max); + } + + parseValue(raw) { + const s = String(raw).trim(); + if (!s) return null; + const n = parseInt(s.replace(/[^\d-]/g, ''), 10); + return isNaN(n) ? null : n; + } + + setBounds() { + const el = this.el; + this.hasMin = el.hasAttribute('aria-valuemin'); + this.hasMax = el.hasAttribute('aria-valuemax'); + this.min = this.hasMin + ? +el.getAttribute('aria-valuemin') + : Number.MIN_SAFE_INTEGER; + this.max = this.hasMax + ? +el.getAttribute('aria-valuemax') + : Number.MAX_SAFE_INTEGER; + } + + isValid(val) { + if (val === '' || val === null) return true; + const numVal = +val; + return !( + (this.hasMin && numVal < this.min) || + (this.hasMax && numVal > this.max) + ); + } + + snapValue(val, currentVal) { + let result = val; + + if (this.hasMin) result = Math.max(result, this.min); + if (this.hasMax) result = Math.min(result, this.max); + if ( + (result < currentVal && val > currentVal) || + (result > currentVal && val < currentVal) + ) { + return currentVal; + } + return result; + } + + setValue(raw, fromInput = false) { + let val = typeof raw === 'number' ? raw : this.parseValue(raw); + + if (!fromInput) { + const currentVal = +this.el.value || 0; + val = this.snapValue(val, currentVal); + } + + this.el.value = val; + this.el.ariaValueNow = val; + this.el.ariaInvalid = !this.isValid(val) ? 'true' : null; + this.updateButtonStates(); + } + + updateButtonStates() { + const val = +this.el.value; + this.controls.forEach((btn) => { + const op = btn.getAttribute('data-spinbutton-operation'); + btn.ariaDisabled = ( + op === 'decrement' ? val <= this.min : val >= this.max + ) + ? 'true' + : null; + }); + } + + announce() { + if (!this.output) return; + this.output.textContent = this.el.value; + clearTimeout(this.timer); + this.timer = setTimeout(() => { + this.output.textContent = ''; + this.timer = null; + }, this.output.dataset.selfDestruct || 1000); + } + + handleKey(e) { + let v = +this.el.value || 0; + if (e.key === 'ArrowUp' || e.key === 'ArrowDown') { + e.preventDefault(); + this.setValue(v + (e.key === 'ArrowUp' ? 1 : -1)); + } else if (e.key === 'Home') { + e.preventDefault(); + this.setValue(this.min); + } else if (e.key === 'End') { + e.preventDefault(); + this.setValue(this.max); + } + } + + handleClick(btn) { + const dir = + btn.getAttribute('data-spinbutton-operation') === 'decrement' ? -1 : 1; + this.setValue((+this.el.value || 0) + dir); + this.announce(); + } +} + +window.addEventListener('load', () => + document + .querySelectorAll('[role="spinbutton"]') + .forEach((el) => new SpinButton(el)) +);